盒子模型

盒子模型概念

根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。页面上每个元素都符合盒子模型的定义，所以它非常重要。每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。
盒子模型对应的CSS属性为:width，height，padding，border，margin。
我们来看例子：
div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }
根据盒子模型，元素的总宽度计算如下：
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

使用上述公式，就能算出示例中的高宽值

• Width：492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
• Height：192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

毫无疑问盒子模型是HTML和CSS很容易混淆的部分之一。
我们将width的值设置为400像素，但元素的实际宽度为492像素。因此想要确定盒子的实际大小，我们需要考虑将四面的内边距，边框，外边距都考虑进去。

宽度和高度

每个元素都有默认的高度和宽度。虽然宽度和高度都有可能是0像素，但默认情况下，浏览器会渲染每个元素的大小。元素的默认宽度和高度依赖于元素是怎么显示的。如果元素是页面布局的关键元素。那么它就需要设置具体的width和height属性值。这种情况下，只能指定非内联元素的属性值。
宽度
元素的默认宽度依赖于它display属性的值。块状元素的默认宽度为100%，占据整行空间。内联元素和内嵌块元素的宽度都随着元素的内容变化而变化。内联元素不具备固定的大小，所以width和height属性只有在非内联元素上才能生效。如下是为非内联元素设置宽度的例子：
div { width: 400px; }
高度
元素的默认高度取决于它的内容。元素根据内容需要进行垂直扩展或收缩。我们可以使用height属性为非内联元素设置高度：
div { height: 100px; }
调整内联元素
请记住内联元素不支持width和height属性和与其相关的值。块状元素和内嵌块元素支持width和height属性和与其对应的值。

外边距和内边距

浏览器会根据元素设置其默认的外边距和内边距，使其更清晰易读。我们使用基于文本的元素来看一下这个现象。不同浏览器和不同元素之间的默认外边距和内边距可能存在差异。
外边距
margin属性设置一个元素的周围空间大小。外边距在元素边框外并且是完全透明的。外边距可以帮助我们将元素定位在页面的特定位置，并且可以与其他元素保持距离。 示例如下：
div { margin: 20px; }
margin有一个特殊的现象，就是在内联元素中垂直外边距margin-top和margin-bottom不生效，在块状元素和内嵌块元素中有效。
内边距
padding属性和margin属性相似，只不过它在边框内部，padding是为元素提供内部空间。示例如下：
div { padding: 20px; }
padding属性和margin属性不一致的地方是垂直内边距在内联元素中同样有效；虽然垂直内边距显示在元素基准线之上或之下，但是它确实是存在的。

内联元素的外边距和内边距
内联元素对内边距和外边距的实现和块状元素与内嵌块元素不同。外边距只有横向margin-left和margin-right有效。内边距在内联元素中完全生效，但是垂直内边距padding-top和padding-bottom在元素基准线上面或下面显示(注：内联元素加上垂直内边距之后，元素内部的内容部分在视觉上没有产生偏移)。
块状元素和内嵌块元素的外边距和内边距的显示是正常的。
外边距和内边距的声明方式
在CSS中，很多属性都有多种声明方法。普通的写法，就是一个属性一个值，一个个地列出来。但我们也可以使用简写，一个属性包含多个值。不是所有的属性都有简写，所以我们必须确保写出的属性和值的结构是正确的。
margin和padding有普通和简写两种书写方式。当元素四面设置相同的外边距时，可以使用margin属性，并只指定一个值：
div { margin: 20px; }
如果上下外边距的值一致，左右外边距的值一致，我们可以输入两个值。 设置上下外边距的值在前面。以下例子将上下外边距设置为10像素，将左右外边距设置为20像素：
div { margin: 10px 20px; }
如果四个值都不一致，那么我们按照 上右下左 的顺序输入值。例如，我们为div设置10像素的顶部外边距，20像素的右侧外边距，0像素的底部外边距，以及15像素的左侧外边距：
div { margin: 10px 20px 0 15px; }
若我们要设置多个值，优先考虑用margin和padding。但我们也可以用普通写法，输入一一对应的属性和值。每个属性名（该例子中是外边距和内边距）后跟随一个破折号-以及要设置值的盒子的方向：top，bottom，right和left。
例如，padding-left属性只接受一个值，设置元素的左侧内边距；margin-top只接受一个值，设置元素的顶部外边距。
div { margin-top: 10px; padding-left: 6px; }
当我们只想设置单边的margin和padding值时，这种普通写法是最好的选择。保持代码的精确性可以防止出现混淆。例如，我们是否只想将元素的上右左三侧的外边距设为0，是否只想将底部外边距设为10像素？
普通写法输入属性和值可以让目标更明确。当处理三个或以上的值时，缩写更有帮助。

外边距和内边距的颜色 margin和padding属性是完全透明的，不可以设置颜色。但因为是透明的，所以透出了相关元素的背景色。元素外边距部分看到的颜色为它父级元素的背景色。元素内边距部分看到的颜色为该元素的背景色。

边框

边框在内边距和外边距之间，画出了元素轮廓。border属性要求三个值：宽度，样式，颜色。边框属性简写时值的顺序为：宽度，样式，颜色。普通书写方式下，边框的三个属性名为：border-width，border-style和border-color。普通书写方式因为是单个值，更容易修改和复写。
边框的宽度和颜色能分别使用第三节课中讨论过的长度单位和色值。
边框有很多不同样式。最常用的样式值为solid，dashed，dotted和none，但你可以在列表中看到很多其他的样式。
以下是边框设置示例：
div { border: 6px solid #949599; }

单侧边框
和margin，padding属性一样，也可以一次只设置元素一个方向的边框。使用属性名：border-top， border-right，border-bottom和border-left。它们的属性值和border的属性值一样有三个：宽度，样式和颜色。如下所示：
div { border-bottom: 6px solid #949599; }
另外，单侧边框的样式也可以被细分，如下所示：
div { border-bottom-width: 12px; }
这些高度细分的边框属性名都由连字符分隔，由border单词开头，随后是边框的方向：top，right，bottom，left，最后是要设置的样式：width，style，color。
border-radius
border-radius可以使元素的边角变圆。
border-radius接受多种长度单位，如百分比，像素，确定元素边角变圆的半径。单个值表示四个角的弧度一直，两个值按分别表示top-left/bottom-right和top-right/bottom-left，输入四个值按顺序分别表示：top-left，top-right，bottom-right和bottom-left。
思考border-radius多个值的顺序时(包括margin和padding)，记住它们是从左上角开始（margin和padding从上侧开始）按顺时针方向排序的。
div { border-radius: 5px; }

border-radius属性也允许我们使用普通方法书写单个属性值。这些普通的属性以border单词开通，跟着是边角的垂直位置(top或bottom),再是边角的横向位置(left或right)，最后是半径radius。例如，要设置