CSS学习之 基本视觉格式化

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	将元素的内容区和行内框上移