CSS2布局属性

 

border：用于同时设置border-width，border-style，border-color

 

border-bottom：设置下边框宽度，样式颜色

 

border-bottom-color：下边框颜色

属性：

取值：red | #ff0000 | rgb(255,0,0) | transparent

解释：red | #ff0000 | rgb(255,0,0) |透明（默认）

 

border-bottom-style：下边框样式

属性：

取值：none | hidden | dotted | dashed | solid | double | groove |ridge |inset| outset

解释：无边框| 无边框，用于表解决冲突 | 点状边框 | 虚线边框 | 实线边框 | 双线边框 | 凹槽边框 |垄状边框 |内凹边框| 外凸边框

 

border-style:dotted solid double dashed;  上边框是点状，右边框是实线，下边框是双线，左边框是虚线

 

 

border-bottom-width：下边框宽度

属性：

取值：thin | medium | thick | 2

解释：细的边框 | 正常默认边框 | 粗的边框 | 定义边框宽度

 

border-width: medium none; 不显示边框

 

 

border-collapse：表格单元格边框是否临近边框合并

属性：

取值：separate | collapse

 

解释：边框会分开 | 边框会合并单一的边框

 

 

bordrt-color：边框颜色

属性：

取值：red | #ff0000 | rgb(255,0,0) | transparent

解释：red | #ff0000 | rgb(255,0,0) | 透明（默认）

red green blue pink 上，右，下，左，排列

red green blue上，左右，下排列

red green上下，左右

red 四边

 

 

 

bordrt-left：左边框宽度颜色样式（属性同上）
border-top：上边框宽度颜色样式（属性同上）
border-right：右边框宽度颜色样式（属性同上）

 

 

outline：（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。可以设置outline-color，outline-style，outline-width这些属性。

 

outline-color：轮廓的颜色

属性：

取值：red | #ff0000 | rgb(255,0,0) | invert

 

解释：red | #ff0000 | rgb(255,0,0) | 执行颜色反转（逆向的颜色），可使轮廓在不同的背景颜色中都是可见

 

 

outline-style：轮廓的样式

属性：

取值：none | dotted  | dashed  | solid | double | groove | ridge | inset | outset |

 

解释： 默认，定义无轮廓 | 定义点状的轮廓 | 定义虚线轮廓 | 定义双线轮廓，双线的宽度等同于 outline-width 的值 | 定义3D凹槽轮廓，此效果取决于 outline-color 值 | 定义3D凸槽轮廓,此效果取决于 outline-color 值 | 定义 3D 凹边轮廓,此效果取决于outline-color值 | 定义3D凸边轮廓,此效果取决于outline-color值

 

 

outline-width:轮廓宽度

属性：

取值：thin | medium | thick | 2

 

解释：细的轮廓 | 正常默认轮廓| 粗的轮廓 | 定义轮廓宽度
outline是不占空间的，既不会增加额外的width或者height,outline有可能是非矩形的

 

 

float：浮动

属性：

取值：left | right | none

解释：左漂浮 | 右漂浮 | 不浮动（默认）

有绝对定位的时候不能有float;right；只能使用right

 

 

clear：清除浮动

属性：

取值：left | right | both  | none

 

 

解释：左侧不允许漂浮 | 右侧部允许漂浮 | 左右两侧都不允许漂浮|允许浮动出现在两侧（默认）

 

 

margin：用于同时设置margin-top，margin-right，margin-bottom，margin-left

 

margin-left：左边缘到其父对象的间距，左侧外边距

属性：

 

取值：auto | 2 | 2%

 

解释：浏览器自动调节左外边距 | 设定距离 | 父对象高度的百分比左外边距

 

margin-right：右边缘到其父对象的间距，右侧外边距（属性同上）

margin-top：上边缘到其父对象的间距，上侧外边距（属性同上）

margin-bottom：下边缘到其父对象的间距，下侧外边距（属性同上）

marign：10 20 30 40 上，右，下，左排列
margin：10 20 30 上，左右，下排列
margin：10 20 上下，左右排列
margin：10 四边
margin:0 auto;居中布局
 

 

 

padding：用于同时设置padding-top，padding-bottom，padding-left，padding-right

 

padding-top：上边边缘到其子对象的间距

属性：

取值：2 | 2%

解释：设定距离 | 上边缘的百分比就是到子对象的距离

 

padding-bottom：下边边缘到其子对象的间距

padding-left：左边边缘到其子对象的间距

 

padding-right：右边边缘到其子对象的间距

 

 

display：建立布局元素生成显示框类型

属性：

取值：none | block |inline  | inline-block | list-item | run-in  | table | inline-table | table-row-group  | table-header-group | table-footer-group | table-row  | table-column-group   | table-column   | table-cell  |  table-caption  |

 

解释：元素不显示 | 显示为块级元素，此元素前后会带有换行符 | 显示为内联元素，元素前后没有换行符(默认)  | 行内块元素 | 元素会作为列表显示 | 根据上下文作为块级元素或内联元素显示 | 作为块级表格来显示（类似 <table>），表格前后带有换行符 | 作为内联表格来显示（类似 <table>），表格前后没有换行符 | 作为一个或多个行的分组来显示（类似 <tbody>）  | 作为一个或多个行的分组来显示（类似 <thead>） | 作为一个或多个行的分组来显示（类似 <tfoot>） | 作为一个表格行显示（类似 <tr>）  | 作为一个或多个列的分组来显示（类似 <colgroup>）  | 作为一个单元格列显示（类似 <col>）  |  作为一个表格单元格显示（类似 <td> 和 <th>）  |  作为一个表格标题显示（类似 <caption>）