CSS可视化格式模型之宽度、高度

前文介绍绝对定位的时候，涉及到了怎么通过约束公式以及一些规则来计算绝对定位元素的宽度。现在，再具体介绍一下css中元素宽度、长度、外边距等值的计算方式。

在那之前，首先交代一下什么是替换元素和非替换元素。

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容.例如浏览器会根据<img>标签的src属性的值来读取并显示图片，根据<input>标签的type属性决定显示何种输入框。而其它的大部分元素都是非替换元素，即其内容直接表现给客户端。

1. 宽度width

width的默认值为auto，margin的默认值为0

（1）对于行内非替换元素，width属性并不适用

（2）对于行内非替换元素和inline-block元素，如果指定了其width的值，那么宽度就为该值。否则的话，如果指定了height的值，且元素内部有长宽的比例（像是图片都有自身的长宽比例），那么宽度等于根据指定的高度值等比例缩放的值。如果没有指定height的值，那么宽度就等于替换它的元素的高度。下图展分别展示了上述的三种情况。

<div>
<img style='width:80px' src="/i/eg_cute.gif" />some text.
<img style='height:80px' src="/i/eg_cute.gif" />some text.
<img src="/i/eg_cute.gif" />some text.
</div>

（3）对于块级非替换元素，总存在以下等式

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

当width的值不为auto，margin left和right中有一个不为auto，且左边公式中不为auto的值相加已经超过了包含块的宽度，此时，将值为auto的margin设成0，解出另一个margin的值，下图中margin-right=200px-0-220px=-20px

<div style='width:200px;border:solid 1px;margin:20px'>
<div style='background:red;height:50px;width:220px;margin-left:auto;margin-right:20px;'></div>
</div>

非auto值的和已经为220px + 20px = 240px > 200px，所以设置margin-left为0,此时margin-right=200px - 240px = -40px

如果等式左边的值都不为auto，且他们的和大于包含块的宽，那么，如果direction=ltr(rtl)时，将忽略margin-right(margin-left)的值 ，进而计算出另一个margin的值

<div style='width:200px;border:solid 1px;margin:20px;direction:rtl'>
<div style='background:red;height:50px;width:220px;margin-left:20px;margin-right:20px;'></div>
</div>

由于direction设置成rtl,所以margin-right的值被保留，margin-left的值被忽略，margin-left = 200px - 220px - 20px = -40px

如果width的值是auto，那么将等式内所有auto的值都设为0，计算出width的值，下图中width=200px-20px=180px

<div style='width:200px;border:solid 1px;'>
<div style='background:red;height:50px;margin-left:20px;margin-right:auto;'></div>
</div>

公式左边诸项只有一个值为auto，那么直接解出公式得到它的值，下图中margin-left = 200px -100px-20px=80px

<div style='width:200px;border:solid 1px;margin:20px'>
<div style='background:red;height:50px;width:100px;margin-left:auto;margin-right:20px;'></div>
</div>

如果margin-left和margin-right都为auto，那么他们计算出来的值相等，这可以实现元素水平居中的效果。下图中margin-left=margin-right=(200px-120px)/2=40px

<div style='width:200px;border:solid 1px;margin:20px;'>
<div style='background:red;height:50px;width:120px;margin:0 auto;'></div>
</div>

（4）对于块级替换元素，width的计算方法同（2），其余值的计算方法同（3）

（5）对于浮动非替换元素和inline-block元素，将margin-left/right中为auto的值设为0。如果width为auto，那么根据 css定位方案之绝对定位 一文中的方法计算出该元素的自适应宽度，即 min(max(preferred minimum width, available width), preferred width)。下面展示了float元素中出现不同文本内容时，其宽度的不同。

<div style='width:100px;height:50px;background-color:red'>
<div style='float:left;border:solid 1px;'>aaa aaaaaaaa aaaaaaaaaaaaaaaaa</div>
</div>

（6）绝对定位的替换和非替换元素的宽度计算前文都已经介绍过了

2. 高度height

（1）对于行内非替换元素，height的值并没有效果，行框的高度由line-height决定。所以尽管有padding，margin的存在，但是因为对line-height没有影响，也就对行框的高度没有影响。进一步讲，如果明确设置了line-height的值，那么行框的高度高度就为该值。否则，行框的高度是能容纳下行内所有元素的矩形框最小值。关于行框的更多概念可以看CSS定位之常规流一文。

<p style='border:solid 1px;'></p>
<p style='border:solid 1px;font-size:30px;'>hihihi<br/>hihihi</p>
<p style='line-height:15px;border:solid 1px;font-size:30px;'>hihihi<br/>hihihi</p>
<p style='line-height:50px;border:solid 1px;font-size:30px;'>hihihi<br/>hihihi</p>

可以看出，没有任何子元素的块框是没有高度的，而如果框里内容是行内元素时，其高度由每个行框的高度和决定，且这个值可以显式指定的。

值得注意的，就算不显式指定过大的行高，即每个行内元素的line-height都取默认值100%，行框的高度高度值也可能大于行内最高的元素，比如设置的水平对齐方式是基线对齐。先介绍一下水平对齐属性。

vertical-aligh属性：指定行内元素的垂直对齐方式，对块元素设置无效。其值可以是baseline、top、text-top、middle、bottom、text-bottom等。

这篇文章中作者通过一张图片来说明文字中上述各个值对齐的线是什么。http://www.blueidea.com/tech/web/2008/5892.asp。

该属性的默认值是baseline，简单来说就是四条横线英文作业本中，从上往下的第三条线。text-top、text-bottom分别指第一和最后一条线。这里只简单写一个例子来说明baseline的对齐显示，更多例子可以看这里 http://www.enet.com.cn/article/2010/0612/A20100612668569.shtml

<p style='border:solid 1px;font-size:50px;'><img src="/i/eg_cute.gif" />php</p>

可以看出图片的下边与字母h的下边对齐

（2）对于行内替换元素、常规流中的块级替换元素、常规流中的行内块替换元素和浮动替换元素，首先将两个vertical margin中auto的值设为0。如果width和height都为auto且替换的元素有自己的大小，那么该元素的高就是其被替换的元素的高。如果width的值不为auto且被内在元素有一定的长宽比，那么height的值等比例缩放。具体例子可以参见1-2。

（3）对于常规流中块级非替换且overflow的值为visible的元素，首先将vertical margin中auto值设为0，元素的高度大小就是其内容区的顶边，到其最后一个常规流中的子元素的下外边框（如果没有发生外边距合并）、或是下border框（下外边距发生合并）的距离。如果没有这样的元素，那么设为0

<div style='width:200px;background:red;margin:20px'>
<div style='width:100px;height:50px;border:solid 1px;margin:20px'>

下外边距发生合并，父块的底下边就是子元素的下boder边

<div style='width:200px;background:red;border:solid 1px;margin:20px'>
<div style='width:100px;height:50px;border:solid 1px;margin:20px'>

设置父元素的border使得其不与子元素合并外边距，父块的底边就是子元素的下margin边

（4）对于绝对定位的替换和非替换元素，前面的文章已经介绍过了

（5）对于常规流中的块级非替换元素且overflow不为visible、行内块非替换元素和浮动非替换元素，有以下规则

如果块内只包含行内元素，那么高度就最高行框的顶到最低行框的底的距离
如果块内包含块级元素，那么高度就是最高块框的上外边与最低块框的下外边的距离
绝对定位元素不会被考虑在内，相对定位元素考虑的是其未偏移前的位置，元素的子浮动元素会被全部包含进去。

第二条应用与overflow非visible的元素不与其子元素合并外边距。第三条的原因在于这些元素生成了blocking formatting context。

<div style='width:200px;border:solid 1px;margin:20px;overflow:hidden'>
<div style='width:100px;height:50px;background:red;margin:20px;position:relative;left:10px;top:30px'></div>
<div style='width:100px;height:50px;background:blue'></div>
<div style='width:100px;height:50px;float:right;clear:left;background:green'></div>
</div>

父块的高度 = red块margin top&bottom 20px×2 + red height 50px +blue height 50px +green height 50px = 190px