1、基本框
CSS假定每个元素都有一个或多个矩形框,称为元素框。各元素框中还有一个内容区,内容区周围有可选的内边距、边框和外边距。
外边距可以为负值,但内边距和边框不能为负值。
元素的width属性被定义为从左内边界到右内边界的距离,height则是从上内边界到下内边界的距离。
2、水平格式化
水平格式化往往比想像的要复杂,其复杂性在于width影响的是内容区的宽度,而不是整个可见元素框。示例如下:
<p style="width:200px;padding:10px;margin:20px;">可见框宽度侧试</p>
整个元素框的宽度为:200+10*2+20*2=260px
水平属性
水平格式化有七大属性:margin-left(左外边距)、border-left(左边框)、padding-left(左内边距)、width(内容宽度)、padding-right(右内边距)、border-right(右边框)、margin-right(右外边距)。
七个属性中只有width、margin-left、padding-right可以设置为auto,其他必须设为特定值,如不设默认为0。
3、垂直格式化
像width一样,height定义了内容区的高度,而不是可见元素框的高度。
垂直属性
垂直格式化也有七个属性:margin-top(上外边距)、border-top(上边框)、padding-top(上内边距)、height、padding-bottom(下内边距)、border-bottom(下边框)、margin-bottom(下外边距)。
合并垂直边距
垂直格式化的另一个重要方面是垂直相邻外边距的合并,这种合并只应用于外边距,如果元素有内边距或边框,它们绝对不会合并。
所谓合并,就是两个外边距中较小的一个会被较大的一个合并。
4、行内框的vertical-agin属性
属性值 | 属性值的含义 |
top | 将元素行内框的顶端与包含该元素的行框的顶端对齐 |
bottom | 将元素行内框的底端与包含该元素的行框的底端对齐 |
text-top | 将元素行内框的顶端与父元素内容区的顶端对齐 |
text-bottom | 将元素行内框的底端与父元素内容区的底端对齐 |
middle | 将元素行内框的重直中点与父元素基线上0.5em处的一点对齐 |
super | 将元素的内容区和行内框上移 |