CSS-盒子模型

温故而知新。本篇为《CSS权威指南》的学习笔记

盒子模型是什么

CSS盒子模型是最重要的一个概念，话不多说，先上图。

如图所示，盒子四周（上下左右）分别都有对应的

• 外边距 margin
• 边框 border
• 内边距 padding
• 中间内容部分有width和height

这就是盒子模型所有的组成部分，可以想象一个包装精美的月饼来辅助理解。

一般，一个元素的width被定义为从左内边界到右内边界的距离，height则是从上内边界到下内边界的距离。【对应图片看-图上有指示】width影响的是内容区的宽度，而不是整个可见的元素框。

整个元素可见如上图，width影响的是浅蓝色区域的宽度

水平格式化

有七个属性：
margin-left border-left padding-left width padding-right border-right margin-right
相加等于元素包含块的width,高亮的属性可以取值auto，其他默认为0

从某种程度说，可以用auto弥补实际值与所需总和的差距。
eg:七个属性之和须等于400px

p {margin-left: auto; margin-right: 100px; width: 100px} 
// auto = 400-100-100=200,若设置的三个值之和≠400，则会强制把margin-right重置为auto(从左向右读的语言如英语)

垂直格式化

同样有七个属性：
margin-top border-top padding-top height padding-bottom border-bottom margin-bottom
相加等于元素包含块的height，高亮的属性可设置为auto，其他默认为0

可是。。如果将一个元素的上下外边距都设置为auto，实际上它们都会重置为0，使元素框没有外边距。

auto

以上，我们知道可以取auto的属性有：

• margin-top
• margin-right
• margin-bottom
• margin-left
• height
• width

在水平方向上，会自动“补齐”。但是在垂直方向上,大有文章。

若设置height: auto，有无padding\border其height不同。

什么意思呢？看例子：

第一个例子

<div style="height: auto; background: silver;">
    <p style="margin-top: 2em; margin-bottom: 2em;">a paragraph!</p>
</div>

高度仅仅是文本内容的高度!

第二个例子

如果块级元素里面有内边距、边框等，高度和上个例子有区别。

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">
       <p style="margin-top: 2em; margin-bottom: 2em;">Another Paragraph!</p>
</div>

高度=文本内容21px+(margin-top)32px +(margin-top) 32px = 85px