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>)