一、框与边框
基本元素框
CSS中,所有文档元素都生成一个矩形框,称为元素框
左边框线 | 左边界 | 左边框 | 左补白 | 左内边框 | 宽度 |
宽度 | 右内边框 | 左补白 | 右边框 | 右边界 | 右边框线 |
Width
允许值 <长度> | <百分比> | auto
初始值 auto
可否继承 否
适用于 块级元素和替换元素
注意:百分比是指相对于父元素的宽度。
height
允许值 <长度> | auto
初始值 auto
可否继承 否
适用于 块级元素和替换元素
注意:百分比是指相对于父元素的宽度。
大多情况下,边界、补白及边框的宽度均为0,此时元素的宽度和父元素内容区域的宽度相同。
三种方法生成元素额外空间
1、只对元素增加补白
2、只对元素增加边框
3、既增加补白,又增加边框
选择何种不重要,但是元素使用背景,则与选择有关了。因为背景将扩展到补白里,但是不会扩展到边界中。
边界
margin
允许值 <长度> | <百分比> | auto {1,4}
初始值 未定义
可否继承 否
适用于 块级元素和替换元素
注意:百分比是指相对于父元素的宽度。
margin:top right bottom left; 上/右/下/左
从元素的顶端开始,顺时针围绕元素
复制值
单侧边界属性
margin-top,margin-right,margin-bottom,margin-left
允许值 <长度> | <百分比> | auto {1,4}
初始值 未定义
可否继承 否
适用于 块级元素和替换元素
注意:百分比是指相对于父元素的宽度。边框
边框就是一条(有时多条)围绕元素内容及补白的线。
边框特征:宽度或粗度、样式或外观、以及颜色
边框宽度的缺省值是medium,通常为两个货三个像素
缺省样式为none
如果一个边框没有样式,那么它不会出现。缺少边框样式也会重设置宽度。
边框缺省颜色是元素本身的前景色。如果没有声明前景色,那么他的颜色与元素文本颜色相同。若一个元素没有文本,边框的颜色是其父元素的文本颜色。
带样式的边框
border-style
允许值 none | dotted | dashed | solid | double| groove | ridge | inset | outset
初始值 none
可否继承 否
适用于 块级元素和替换元素
可以给边框定义多种样式
按照top-right-bottom-left顺序排列的值
边框宽度
border-width
允许值 [ thin | medium | thick | <长度>] {1,4}
初始值 未定义浓缩属性
可否继承 否
适用于 所有元素
缺省为medium
border-top-width,border-right-width,border-bottom-width,border-left-width
允许值 thin | medium | thick | <长度>
初始值 medium
可否继承 否
适用于 所有元素
border-color
允许值 <颜色> {1,4}
初始值 元素的颜色
可否继承 否
适用于 所有元素
border-top-color,border-right-color,border-bottom-color,border-left-color 允许值 thin | medium | thick | <长度>
初始值 medium
可否继承 否
适用于 所有元素压缩边框属性
border-top,border-right,border-bottom,border-left
允许值 <边框宽度> || <边框样式> || <颜色>
初始值 参考各个属性
可否继承 否
适用于 所有元素
快速设置边框border
允许值 <边框宽度> || <边框样式> || <颜色>
初始值 参考各个属性
可否继承 否
适用于 所有元素
补白
补白位于元素框的边界与内容区之间。
padding
允许值 [ <长度> | <百分比>] {1,4}
初始值 0
可否继承 否
适用于 所有元素
注意:百分比是指相对于父元素的宽度。单侧补白
padding-top,padding-right,padding-bottom,padding-left
允许值 <长度> | <百分比>
初始值 0
可否继承 否
适用于 所有元素
注意:百分比是指相对于父元素的宽度。补白与内联元素:应用与内联元素,边界和补白没有大的差别。
同边界一样,左侧补白应用在元素的开头,右侧补白应用在元素的结尾。
顶端与低端补白:与用户代理有关。
浮动与清除
float
允许值 left | right | none
初始值 none
可否继承 否
适用于 所有元素
clear
允许值 left | right | both | none
初始值 none
可否继承 否
适用于 所有元素
列表列表项类型
list-style-type
允许值 disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none
初始值 disc
可否继承 是
适用于 列表元素元素
disc :实心圆circle :空心圆
square :实心或空心方块
decimal :1、2、3、4、...
upper-alpha :A、B、C、D、...
lower-alpha :a、b、c、d、...
upper-roman :I、II、III、IV、V、...
lower-roman :i、ii、iii、iv、v、...
none:不使用项目符号
列表图像
list-style-image
允许值 <url> | none
初始值 none
可否继承 是
适用于 列表元素
列表项位置 list-style-position
允许值 inside | outside
初始值 outside
可否继承 是
适用于 列表元素
缩略列表样式
list-style
允许值 <列表项类型> || <列表项图像> || <列表项位置>
初始值 参考各项
可否继承 是
适用于 列表元素