CSS2布局属性

来源:互联网 发布:mac照片怎么导入iphone 编辑:程序博客网 时间:2024/06/05 12:38
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>)
原创粉丝点击