理解CSS视觉格式化

前面的话

  CSS视觉格式化这个词可能比较陌生，但提及盒模型可能就恍然大悟了。实际上，盒模型只是CSS视觉格式化的一部分。视觉格式化分为块级和行内两种处理方式。理解视觉格式化，能够肯定获得的效果是应该显示的正确效果，仍是浏览器兼容性的bug。下面将详细介绍CSS视觉格式化

 

术语解释

  了解CSS视觉格式化以前要先了解一些基本术语。而下面全部的术语中，最重要的就是基本框和包含块

【基本框】

  CSS假定每一个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区(content area)。这个内容区周围有可选的内边距、边框和外边距。之因此可选，是由于它们的宽度能够设置为0

  能够用多种属性设置外边距、边框和内边距。内容的背景也会应用到内边距。外边距一般是透明的，从中能够看到父元素的背景。内边距不能是负值，可是外边距能够

  对于不一样类型的元素格式化时存在着差异。块级元素的处理不一样于行内元素，而浮动元素和定位元素也分别有着各自不一样的表现

【包含块】

  每一个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文。对于正常的文本流中的一个元素而言，包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成

  [注意]行内元素的摆放方式并不直接依赖于包含块

【其余术语】

一、正常流

  文本从左向右、从上向下显示，是传统HTML文档的文本布局

二、非替换元素

  若是元素的内容包含在文档中，则称之为非替换元素

三、替换元素

  指做为其余内容占位符的一个元素(<img>、<video>、<audio>等)。但，inline-block元素在布局中也看成替换元素处理。因此，又包含大量的表单类元素及表格类元素

四、块级元素

  在正常流中，在其元素框以前和以后生成“换行”，且会垂直摆放的元素。经过声明display:block可让元素生成块级框

五、行内元素

  在正常流中，不会在元素框以前或以后生成“行分隔符”，是块级元素的后代。经过声明display:inline可让元素生成行内框

六、根元素

  位于文档树顶端的元素，在HTML文档中，是元素HTML

 

盒模型

  盒模型又叫框模型，由宽高、内边距、边框和外边距组成

【四个盒子】

  关于盒模型，首先要肯定四个盒子的概念

一、元素框是指margin box

  元素框: width/height + padding + border + margin

二、可视区域是指border box

  [注意]关于可视区域，一直都有两个争论，一个指border box，另外一个指padding box。但从字面去理解，可视区域应该就是指能够看到的区域，应该以border box为准

  可视区域：width/height + padding + border

三、客户区(client)是指padding box

  [注意]关于客户区这种说法来源于javascript中的clientWidth和clientHeight

  客户区：width/height + padding

四、内容区是指content box(width和height组成)

  内容区：width/height

  对于水平和垂直布局，有着不一样的效果，下面以水平格式化和垂直格式化分别介绍

【水平格式化】

  水平格式化的规则是正常流中块级元素框的水平总和等于父元素的width

  水平格式化的7大属性是margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。7个属性的值加在一块儿是元素包含块的宽度，这每每是块元素的父元素的width值(由于块级元素的父级元素几乎都是块级元素)

auto

  视觉格式化中比较重要的一个概念就是auto。auto值是用来弥补实际值与所需总和的差距

  在水平格式化的7个属性中只有margin-left、width、margin-right三个属性能够设置为auto，其他属性必须设置为特定的值，或者默认宽度为0

一、1个auto

  若只有一个值为auto，则根据7个水平属性的总结等于父级width的公式，计算出auto所表示的值

  因为width默认值为auto，而margin、border和padding默认值都为0。因此，会有块级元素默认撑满父元素的表现

二、2个auto

  若margin-left和margin-right为auto，则元素将在父元素中居中显示

  若margin-left和width为auto，则margin-left将被重置为0

  若margin-right和width为auto，则margin-right将被重置为0

三、3个auto

  若三个值都为auto，则margin-left和margin-right都被重置为0

四、0个auto

  若margin-left/width/margin-right三个属性都设置为非auto的某个值，这种状况叫作格式化属性过度受限。这样margin-right将被重置为auto

  关于水平auto的演示

替换元素

  上面介绍的是正常文本流中非替换块级元素的水平格式化，而替换块级元素管理起来则更简单一些。非替换块元素的全部规则一样适用于替换块元素，只有一个例外：若是width是auto，元素的宽度则是内容的固有宽度

  下面以图片为例子来讲明块级替换元素，但因为图片是行内替换元素，因此须要将display设置为block

  若是一个替换元素的width不一样于其固有宽度，那么height值也会成比例变化，除非Height显式设置一个特定值，反过来也同样

【垂直格式化】

  一个元素的默认高度由其内容决定，高度还会受内容宽度的影响，段落越窄，相应地就会越高，以便容纳其中全部的内联内容

  在CSS中，能够对任何块级元素设置显式高度。若是指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距同样；若是指定高度小于显示内容所需高度，则会向元素添加一个滚动条。若是元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性

  与水平格式化的状况相似，垂直格式化也有7个相关属性：margin-top/border-top/padding-top/height/padding-bottom/border-bottom/margin-bottom

  垂直格式化7大属性的和必须等于元素包含块的height

auto

  在垂直格式化的7个属性中，只有margin-top、height、margin-bottom三个属性能够设置为auto

  与水平格式化不一样，垂直格式化的auto处理较为简单。若是块级正常流元素设置为height:auto，显示时其高度将刚好足以包含其内联内容的行盒；若是margin-top或margin-bottom设置为auto，它会自动计算为0

  [注意]对于定位元素的上下外边距的auto处理，则有所不一样

 

行布局

  行内元素没有块级元素那么简单和直接，块级元素只是生成框，一般不容许其余内容与这些框并存

  在了解行内元素视觉格式化以前要先了解一些涉及到的基本术语

【术语】

一、匿名文本

  匿名文本(anonymous text)是指全部未包含在行内元素中的字符串

二、em框

  em框在字体中定义，也称为字符框(character box)。实际的字形可能比其em框更高或更矮。在CSS中，font-size的值肯定了各个em框的高度

三、内容区

  在非替换元素中，内容区是元素中各字符的em框串在一块儿构成的框；而在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。内容区相似于一个块级元素的内容框(content box)

四、行间距

  行间距(leading)是font-size和line-height之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部

  [注意]行间距只应用于非替换元素

五、行内框

  行内框经过向内容区增长行间距来描述。对于非替换元素，元素行内框的高度等于line-height的高度；对于替换元素，元素行内框的高度则刚好等于内容区的高度，由于行间距不该用到替换元素

  [注意]行内框的区域与内联元素背景颜色所在的区域无关

六、行框

  行框是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界；而行框的底边要放在最低行内框的下边界

【构造行框】

  行框构造是行布局中很是重要的一个环节，接下来介绍行框构造的步骤

  一、构造各元素的行内框

  a、对于替换元素来讲，获得各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它们加在一块儿(由于，行间距不该用到替换元素上，因此替换元素的内容大小等于行内框大小)

  b、对于非替换元素来讲，获得各行内非替换元素及不属于后代行内元素的全部文本的font-size值和line-height值，再将line-height减去font-size，获得行的行间距，这个行间距除以2，将其一半分别应用到em框的顶部和底部

  二、对于各内容区，肯定它在整行基线的上方和下方分别超出多少。对于非替换元素来讲，肯定各元素及匿名文本各部分的基线的位置，并知道该行自己基线的位置，而后将其对齐；对于替换元素来讲，将其底边放在整行的基线上

  三、对于指定了vertical-align值的元素，肯定其垂直偏移量。由此可知，该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下方超出的距离

  四、既然已经知道了全部行内框会放在哪里，再来计算最后的行框高度。为此，只需将基线与最高行内顶端之间的距离加上基线与最低行内框底端之间的距离

  行的高度(又叫行框的高度)由其组成元素和其余内容(如文本)的高度肯定。行高line-height实际上只影响行内元素和其余行内内容，而不会直接影响块级元素

  在行布局中，替换元素和非替换元素并不相同，接下来将分别进行介绍

【行内非替换元素】

  首先，对于行内非替换元素或匿名文本某一部分，font-size值肯定了内容区的高度。若是一个行内元素的font-size为15px，则内容区的高度为15px

  内容区加上行间距等于行内框。若是一个行内非替换元素的font-size为15px，line-height为21px，则相差6px。用户代理将这6像素一分为二，将其一半分别应用到内容区的顶部和底部，这就获得了行内框

  当line-height小于font-size时，行内框实际上小于内容区

  行框定义为行中最高行内框的顶端到最低行内框底端之间的距离，并且各行框的顶端挨着上一行行框的底端

  若是一行中存在行高相同但字体大小不一样的行内元素，虽然全部行内框大小都相等，但它们排列得并不整齐，由于文本都是按照基线对齐的

  若是改变行内框的垂直对齐，好比设置垂直对齐为4px，这会同时提高其内容区和行内框。若是设置的该行内框是行中的最高点，则会把整个行框的顶端也向上移动4像素

框属性

  若是一个行内元素存在边框或内边距，而没有设置一个足够大的行高line-height来容纳它们，就有覆盖其余行的危险

  内边距和边框不会改变内容区的尺寸，不过它会影响这个元素行内框的高度，但并不会影响行框的生成和布局，即不改变行高。至于外边距，它不会应用到行内非替换元素的顶端和底端，不会影响行框的高度

  尽管内边距、边框和外边距不影响行高，可是它们确实能影响一个元素内容的布局。可能将文本推离其左右两端。实际上，若是左、右两外边距为负，可能会把文本拉近行内元素，甚至致使重叠

  margin-left、padding-left、border-left应用到元素的开始处；而margin-right、padding-right、border-right应用到元素的结尾处

div{width: 200px;border: 1px solid red;
}
    
span{border: 1px solid black;background-color: yellow;padding: 6px;margin: 6px;font-size: 30px;line-height: 50px;
}

<div><span>测试文字测试文字测试文字</span></div>

【行内替换元素】

  通常地，行内替换元素(如图像)都有固有的高度和宽度。有固有高度的替换元素可能致使行框比正常要高。但这不会改变行中任何元素的行高line-height值，包括替换元素自己。相反，只是让行框高度刚好能包含替换元素

  行内替换元素须要行高line-height值，从而在垂直对齐时可以正确地定位元素。由于垂直对齐vertical-align的百分数值是相对于元素的行高line-height来计算的。对于垂直对齐来讲，图像自己的高度可有可无，关键是line-height的值

  因为行内替换元素行内框的高度由高度height、内边距padding、边框border和外边距margin共同决定。因此，盒模型属性的变化会影响行内框的高度，进而可能会影响行框的高度

  默认地，行内替换元素位于基线上。若是向替换元素增长下内边距、外边距或边框，内容区会上移。替换元素并无本身的基线，因此相对来讲最好的办法是将其行内框的底端与基线对齐。所以，其实是下外边距边界与基线对齐

div{width: 300px;border: 1px solid red;
}
    
span{border: 1px solid black;background-color: yellow;font-size: 30px;line-height: 50px;
}
img{height: 26px;padding: 2px;margin: 2px;
}

<div><span>测试文字测试<
img src="backup/lamp.gif" alt="测试图片">文字测试文字</span></div>

 

最后

  关于盒模型，基本内容通常都比较熟悉，比较重要的内容就是水平方向和垂直方向上auto不一样状况的分析

  欢迎交流