第4课 一张图让你对CSS盒模型过目不忘

一、CSS与CSS盒模型

1. 什么是CSS？

CSS即层叠样式表(全称：Cascading Style Sheets)，是一种用来表现HTML样式的计算机语言，它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 也许这个术语可能比较陌生，但是实际上我们已经用过了。大部分容器的属性style的值以及标签里的内容都只能是CSS。

2. 什么是CSS盒模型?

我们之前提过容器的概念，这里的盒子可理解为在浏览器上可见的块状容器。比如一个登录模块，新闻或人物摘要模块，文章列表等。CSS给这些盒子定了一个盒子模型，包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素，这个模型像极了一个快递盒子。为了更好地说明这个问题，我真的弄了一个快递盒子，折腾了两小时，今天非得把这个问题说明白了，看图！

盒子模型

这个快递盒子已经把盒子模型表达得很清楚了。

• padding: 是内容与边框之间的距离，图上表现即表现为泡沫的厚度（忽略间隙，下同）。
• border: 边框，图上表现为纸箱。
• margin: 是一个容器的边框与另一个容器边框之间的距离，上图表现为纸箱间距。
• content: 容器中的内容，上图表现为砖头。

小明家装修就差几块砖，刚好我家有点旧砖就给他寄过去，寄之前我按绿色箭头的测量方法测量好了之后，把尺寸告诉给小明。过些天快件要到了。彼时小明已记不清我说的尺寸，但又不好意思再问我，于是让派件小哥帮忙测量，派件小哥就把快件按红色箭头的测量方法测量好了之后，把尺寸告诉给小明。小明犯难了，这尺寸不对呀，这可如何是好。

其实不是尺寸出了问题，而是我们度量尺寸之前没有协商好以什么样的方式去度量。box-sizing的作用就是把容器的度量方式给确定下来，这样在说明或计算一个容器的宽高的时候才不致于混乱。然而实际开发的过程中，这个样式属性用得很少，是因为一般情况下我们是按其默认值 content-box的方式进程度量的。

二、属性解析

box-sizing: content-box|border-box|inherit

值	说明
content-box	这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
inherit	指定box-sizing属性的值，应该从父元素继承