CSS高度和宽度

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框，各元素框中心有一个内容区。内容区周围有可选的内边距、边框和外边距。如下图：

注：1. 元素背景显示的区域是 内容区+内边距

** 2. 边框和内边距的宽度不能会负值，外边距可以为负值**

术语：

• 正常流：传统的HTML文档的文本布局，文本从左向右，从上向下显示。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素

• 非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。大部分HTML元素都是非替换元素。

• 替换元素：这是指用作为其他内容占位符的一个元素。img就是一个典型的替换元素，它只是指向一个图像文件，这个文件将插入到文件流中替换img所在的位置。

• 块级元素：在正常流中，在其框之前和之后生成“换行”，所以在正常流中的块级元素会垂直摆放。例如p, div

• 行内元素：元素不会再之前或者之后生成“换行”，他们是块级元素的后代。例如: span, strong, i

1. 块级元素

1.1 水平宽度

一个元素的width被定义为从左内边界到右内边界的距离，所以width影响的是内容区的宽度，而不是整个可见的元素框。

1.1.1 正常流中非替换块级元素的水平宽度

正常流中块级元素的水平部分的总和就等于父元素的width。

公式1： maring-left, border-left, padding-left, width, padding-right, border-right, margin-right 这7个属性的和加在一起是元素包含块的宽度，这往往是块元素的父元素的width

这7个元素中，width, margin-left, margin-right 可以设置为auto，其余属性必须设置为特定值，或者默认是0。

auto

auto的使用情景以及值的计算：

1. 如果这三个值都不为auto，那么margin-right会被强制为auto，用来弥补实际值与所需总和的差距。
2. 如果margin-left和margin-right不为auto，width为auto，则width会按照上面的公式1计算出某个值，从而达到总宽度。
3. 如果margin-left和margin-right为auto，width不为auto，则会将margin计算为相同的值，从而使元素居中。（元素居中的一种方法）
4. 如果三个属性都为auto，则margin-left和margin-right都会为0，width会尽可能的宽。

负外边距

在margin未负的情况下，上述公式1仍然成立，可能导致子元素超出父元素。

百分数

在上述值设为百分数时，会应用同样的基本规则。百分数的相对值是包含块的宽度

1.1.2 正常流中替换块级元素的水平宽度

非替换块元素的所有规则同样适用于替换块元素。也就是说，上述的公式仍然适用于非替换元素。

但有一个例外，如果width 为auto，元素的宽度则是内容的固有宽度

<img src="smile.png" style="display:block;width:auto;margin:0 px">
<!-- 如果图片的实际宽度是100px，该元素的宽度也为100px -->

如果一个替换元素的width不同于其固有宽度，那么height值也会成比例变化，除非将height也设置为一个特定值。

1.2 竖直高度

1.2.1 正常流中块级元素的高度

一个元素的默认高度尤其内容决定。可以对任何块级元素设置显示高度，如果指定高度大于显示内容所需的高度，多余的高度会产生视觉效果，就像有额外的内边距一样。如果高度小于内容所需的高度，浏览器会提供某种方法来查看所有内容。浏览器的具体行为取决于overflow的属性值。

一个元素的height被定义为从上内边界到下内边界的距离。

公式2：margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom 这7个垂直相关的属性的总和等于包含块的height，这往往是父元素的height值。

有三个属性可以设置为auto：元素的height以及上下外边距。

如果正常流中一个块元素的margin-top或margin-bottom设置为auto，他会自动计算为0。

百分数高度

如果一个块级正常流元素的height设置为百分数，这个值是包含块height的百分数。

如果没有显示声明包含块的height, 百分数高度会重置为auto。

auto高度

正常流元素的高度设置为auto的情况：

1. 只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低级子元素外边框边界之间的距离。
2. 块级元素有上内边距或下内边距，或者有上边框或者下边框，其高度则是从最高子元素的上外边距边界到期最低子元素的下外边界之间的距离

<div style="height:auto;background:silver">
		<p margin-top="2em" margin-bottom="2em">
			高度为1em
		</p>
	</div>
	<div style="height:auto;border-top: 1px solid;border-bottom: 1px solid;background-color: silver;">
		<p style="margin-top:2em;margin-bottom:2em;">
			高度为5em
		</p>
	</div>

合并垂直外边距

在元素没有内边距和边框的情况下，垂直相邻外边距会进行合并。

li { margin-top: 10px; margin-bottom: 15px; }

显示上面的列表时，相邻列表项之间的距离是15像素，而不是25像素。

负外边距

1. 如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。
2. 如果一个正外边距与一个负外边距合并，会直接求和。

2. 行内元素

2.1 基本术语

1. 匿名文本：所有为包含在行内元素中的字符串，例如

   hello world

   ,hello world 是匿名文本，其中空格也是匿名文本的一部分。
2. em框：字符框，font-size 确定了各个em框的高度。
3. 内容区：元素中个字符的em框串在一起构成的框。
4. 行间距：font-size 和 line-height值之差。
5. 行内框：①对于非替换元素，元素行内框的高度等于line-height的大小，②对于替换元素，元素行内框的高度等于内容区的高度。
6. 行框：包含该行中出现的行内框的最高的和最低点的最小框，行框的上边界要位于最高行内框的上边界，行框的底边要放在最低行内框的下边界。

2.2 确定行内元素的高度

1. ①非替换元素： 得到个行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值，再将line-height减去font-size,

   ②替换元素：得到个替换元素的height,margin-top, margin-bottom, padding-top, padding-bottom, border-top-width, border-bottom-width 值，把他们加在一起。

2. 对于各内容区，确定他在整行基线的上方和下方分别超出多少。需要知道各元素及匿名文本各部分的基线的位置，还需要知道该行本身基线的位置，然后将他们对齐。对于非替换元素，要将其底边放在整行的基线上。

3. 对于指定了vertical-align值的元素，确定其垂直偏移量。该属性改变的是元素在基线上方或下方超出的距离。

4. 最后计算行框高度，将基线与最高行内框顶端之间的距离加上基线与最低行内框低端之间的距离。

2.3 行内非替换元素

line-height会显著的影响行内元素如何显示，line-height只影响行内元素和其他行内内容，而不影响块级元素，至少不会直接影响块级元素。

考虑一下标记：

<p style="font-size:12px; line-height: 12px;">
		which is <strong style="font-size: 24px;">strongly emphasized</strong>
	</p>

上述使用的字体的基线在离1/4em处。

上例中，对于正常文本而言，font-size和line-height都是12px，内容高度没有改变。而对于strong文本，line-height与font-size之差是-12px, 半间距是-6px，再把这个半间距增加到内容区的顶部和底部，就得到了行内框，大小也为12px（灰色部分）。因为文本是按照基线对齐的，所以排列的不整齐。

管理line-height

改变一个行内元素的line-height可能导致文本相互重叠，改进办法是

① 对font-size有改变的元素结合使用em单位

② 对line-height使用数字值，该数字会成为缩放因子，该因子是一个继承值而非计算值

p { font-size: 14px; line-height: 1em; }
p strong { font-size: 250%; line-height: 1em; }

p{ font-size: 14px; line-height: 1.5}

增加框属性

内边距、外边距和边框都可以应用到行内非替换元素。但行内元素的这些属性根本不会影响行框的高度。

行内元素的边框边界由font-size而不是line-height控制。也就是说，如果一个span元素的font-size为12px，line-height为36px，其内容区就是12px高。

可以为行内元素指定内边距，这会把边框从文本本身拉开。

span { border: 1px solid black; padding: 4px; }

注：这个内边距并没有改变内容区的具体形状，不过它会影响这个元素行内框的高度。

注：外边距不会应用到行内非替换元素的顶端和低端。

2.4 行内替换元素

行内替换元素一般有固定的高度和宽度。替换元素可能导致行框比正常要高，但这不会改变行中任何元素的line-height值，包括替换元素本身。

p { font-size: 15px; line-height: 18px; }
img { height: 30px; margin: 0; padding: 0; border: none; }

.png)]

增加框属性

内边距和边框像平常一样应用到替换元素；内边距在具体内容外插入空间，边框围绕着内边距。

p { font-size: 15px; line-height: 18px; }
img { height: 30px; margin: 0; padding: 0; border: none; }
img.one { margin: 0; padding: 0; border: 1px dotted; }
img.two { margin: 5px; padding: 3px; border: 1px solid; }

注：上图向我们展现了：默认情况下，行内替换元素位于基线上

3. 改变元素显示display

display: none | inline | block | inline-block 等等

3.1 行内块元素

display: inline-block

行内块元素是块级元素和行内元素的混合。实际上，行内块元素会作为替换元素放在行中。

3.2 display计算值

如果元素是浮动元素或定位元素，display的计算值可以改变，计算结果由声明值确定，如下表

声明值	计算值
inline-table	table
inline, run-in, table-row-group,table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
所有其他	根据指定确定