CSS全称是Cascading Style Sheets，翻译成中文就是“层叠样式表”。所谓“层叠”，顾名思义，就是样式可以层层累加，比方说页面元素都继承了12像素的大小，某标题就可以设置成14像素进行叠加。发现没？这种层叠策略对于样式的显示是相当的灵活。
CSS世界的诞生就是为图文信息展示服务的。
感谢物理学，它让我们理解CSS世界的“流”就轻松多了。CSS世界的“流”似乎就是按照物理世界的“水流”创造的。
CSS世界构建的基石是HTML，而HTML最具代表的两个基石<div>和<span>正好是CSS世界中块级元素和内联级元素的代表，它们对应的正是图1-3所示的盛水容器中的水和木头，其特性表现也正如现实世界的水和木头，如图1-4所示。
图1-3 流
图1-4 CSS世界构建的基石HTML
属性对应的是平常我们书面或交谈时对CSS的中文称谓。例如，上面示意CSS代码中的height和color就是属性。
“值”大多与数字挂钩。例如，上面的99px就是典型的值。在CSS世界中，值的分类非常广泛，下面是一些常用的类型。
z-index:1中的1，属于<integer>，同时也属于<number>。line-height:1.5中的1.5，属于<number>。padding:50%中的50%，属于<percent>。99px。#999。此外，还有字符串值、位置值等类型。在CSS3新世界中，还有角度值、频率值、时间值等类型，这里就不全部展示了。
顾名思义，关键字指的是CSS里面很关键的单词，这里的单词特指英文单词，abc是单词吗？不是，因此，如果CSS中出现它，一定不是关键字。上面示例CSS代码中的transparent就是典型的关键字，还有常见的solid、inherit等都是关键字，其中inherit也称作“泛关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有CSS属性都可以使用的关键字”的意思。
CSS中目前可以称为变量的比较有限，CSS3中的currentColor就是变量，非常有用。不过，这属于《CSS新世界》的内容，本书不会详细阐述，有兴趣的读者可以访问http://www.zhangxinxu.com/wordpress/?p=4385或者扫右侧的二维码，做简单的了解。
CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），但最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位。再说一遍，%不是长度单位！因为2%就是一个完整的值，就是一个整体，我想你一定认为0.02是值，没错，2%也同样是值。
值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0,.5)、url(‘css-world.png‘)、attr(‘href‘)和scale(-1)。
顾名思义，关键字指的是CSS里面很关键的单词，这里的单词特指英文单词，abc是单词吗？不是，因此，如果CSS中出现它，一定不是关键字。上面示例CSS代码中的transparent就是典型的关键字，还有常见的solid、inherit等都是关键字，其中inherit也称作“泛关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有CSS属性都可以使用的关键字”的意思。
CSS中目前可以称为变量的比较有限，CSS3中的currentColor就是变量，非常有用。不过，这属于《CSS新世界》的内容，本书不会详细阐述，有兴趣的读者可以访问http://www.zhangxinxu.com/wordpress/?p=4385或者扫右侧的二维码，做简单的了解。
CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），但最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位。再说一遍，%不是长度单位！因为2%就是一个完整的值，就是一个整体，我想你一定认为0.02是值，没错，2%也同样是值。
有人可能会有疑问，我就认为%是单位，有什么关系，页面还是长那样，有必要这么较真吗？
问的很在理，如果大家平时没有看原始文档的习惯，没必要较真，知道怎么使用就好了。但是，如果经常去MDN或W3C看一些CSS技术文档，搞清楚概念，看文档的时候就不容易犯迷糊，就不会看不懂具体说些什么，尤其都是英文的时候。
可能有人会有疑问，“值”那里提到的<length>，貌似和这里的“长度单位”比较暧昧啊？好眼力！没错，确实暧昧，但暧昧是不好的，我们必须把它们之间的关系搞清楚。一句话：
<number> + 长度单位 = <length>如果继续细分，长度单位又可以分为相对长度单位和绝对长度单位。
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
em和ex，还有CSS3新世界的rem和ch（字符0的宽度）。vh、vw、vmin和vmax。（2）绝对长度单位：最常见的就是px，还有pt、cm、mm、pc等了解一下就可以，在我看来，它们实用性近乎零，至少我这么多年一次都没用过。
值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0,.5)、url(‘css-world.png‘)、attr(‘href‘)和scale(-1)。
属性冒号后面的所有内容统一称为属性值。例如，1px solid rgb(0,0,0)就可以称为属性值，它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如，z-index:1的1也是属性值。
属性名加上属性值就是声明，例如：
color: transparent;
尽管本书内容会用很轻松的方式表达，但还是避免不了会出现一些CSS领域的专业术语。因此，在学习技术内容之前，我们需要先了解一下CSS世界里的一些专业术语。
首先，假设我们现在有如下一段常见的CSS代码：
.vocabulary {
height: 99px;
color: transparent;
}下面就针对这段代码，逐一引出其涉及的专业术语。
属性对应的是平常我们书面或交谈时对CSS的中文称谓。例如，上面示意CSS代码中的height和color就是属性。当我们聊天或者分享时说起CSS的时候，嘴里冒出来的都是“这个元素高度99像素”，或者“这个文字颜色透明”，对吧？这里提到的“高度”和“颜色”就是CSS世界的属性，感觉有点儿像现实世界里人的姓氏。
“值”大多与数字挂钩。例如，上面的99px就是典型的值。在CSS世界中，值的分类非常广泛，下面是一些常用的类型。
z-index:1中的1，属于<integer>，同时也属于<number>。line-height:1.5中的1.5，属于<number>。padding:50%中的50%，属于<percent>。99px。#999。此外，还有字符串值、位置值等类型。在CSS3新世界中，还有角度值、频率值、时间值等类型，这里就不全部展示了。
顾名思义，关键字指的是CSS里面很关键的单词，这里的单词特指英文单词，abc是单词吗？不是，因此，如果CSS中出现它，一定不是关键字。上面示例CSS代码中的transparent就是典型的关键字，还有常见的solid、inherit等都是关键字，其中inherit也称作“泛关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有CSS属性都可以使用的关键字”的意思。
CSS中目前可以称为变量的比较有限，CSS3中的currentColor就是变量，非常有用。不过，这属于《CSS新世界》的内容，本书不会详细阐述，有兴趣的读者可以访问http://www.zhangxinxu.com/wordpress/?p=4385或者扫右侧的二维码，做简单的了解。
CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），但最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位。再说一遍，%不是长度单位！因为2%就是一个完整的值，就是一个整体，我想你一定认为0.02是值，没错，2%也同样是值。
有人可能会有疑问，我就认为%是单位，有什么关系，页面还是长那样，有必要这么较真吗？
问的很在理，如果大家平时没有看原始文档的习惯，没必要较真，知道怎么使用就好了。但是，如果经常去MDN或W3C看一些CSS技术文档，搞清楚概念，看文档的时候就不容易犯迷糊，就不会看不懂具体说些什么，尤其都是英文的时候。
可能有人会有疑问，“值”那里提到的<length>，貌似和这里的“长度单位”比较暧昧啊？好眼力！没错，确实暧昧，但暧昧是不好的，我们必须把它们之间的关系搞清楚。一句话：
<number> + 长度单位 = <length>如果继续细分，长度单位又可以分为相对长度单位和绝对长度单位。
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
em和ex，还有CSS3新世界的rem和ch（字符0的宽度）。vh、vw、vmin和vmax。（2）绝对长度单位：最常见的就是px，还有pt、cm、mm、pc等了解一下就可以，在我看来，它们实用性近乎零，至少我这么多年一次都没用过。
值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0,.5)、url(‘css-world.png‘)、attr(‘href‘)和scale(-1)。
属性冒号后面的所有内容统一称为属性值。例如，1px solid rgb(0,0,0)就可以称为属性值，它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如，z-index:1的1也是属性值。
属性名加上属性值就是声明，例如：
color: transparent;声明块是花括号（{}）包裹的一系列声明。
尽管本书内容会用很轻松的方式表达，但还是避免不了会出现一些CSS领域的专业术语。因此，在学习技术内容之前，我们需要先了解一下CSS世界里的一些专业术语。
首先，假设我们现在有如下一段常见的CSS代码：
.vocabulary {
height: 99px;
color: transparent;
}下面就针对这段代码，逐一引出其涉及的专业术语。
属性对应的是平常我们书面或交谈时对CSS的中文称谓。例如，上面示意CSS代码中的height和color就是属性。当我们聊天或者分享时说起CSS的时候，嘴里冒出来的都是“这个元素高度99像素”，或者“这个文字颜色透明”，对吧？这里提到的“高度”和“颜色”就是CSS世界的属性，感觉有点儿像现实世界里人的姓氏。
“值”大多与数字挂钩。例如，上面的99px就是典型的值。在CSS世界中，值的分类非常广泛，下面是一些常用的类型。
z-index:1中的1，属于<integer>，同时也属于<number>。line-height:1.5中的1.5，属于<number>。padding:50%中的50%，属于<percent>。99px。#999。此外，还有字符串值、位置值等类型。在CSS3新世界中，还有角度值、频率值、时间值等类型，这里就不全部展示了。
顾名思义，关键字指的是CSS里面很关键的单词，这里的单词特指英文单词，abc是单词吗？不是，因此，如果CSS中出现它，一定不是关键字。上面示例CSS代码中的transparent就是典型的关键字，还有常见的solid、inherit等都是关键字，其中inherit也称作“泛关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有CSS属性都可以使用的关键字”的意思。
CSS中目前可以称为变量的比较有限，CSS3中的currentColor就是变量，非常有用。不过，这属于《CSS新世界》的内容，本书不会详细阐述，有兴趣的读者可以访问http://www.zhangxinxu.com/wordpress/?p=4385或者扫右侧的二维码，做简单的了解。
CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），但最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位。再说一遍，%不是长度单位！因为2%就是一个完整的值，就是一个整体，我想你一定认为0.02是值，没错，2%也同样是值。
有人可能会有疑问，我就认为%是单位，有什么关系，页面还是长那样，有必要这么较真吗？
问的很在理，如果大家平时没有看原始文档的习惯，没必要较真，知道怎么使用就好了。但是，如果经常去MDN或W3C看一些CSS技术文档，搞清楚概念，看文档的时候就不容易犯迷糊，就不会看不懂具体说些什么，尤其都是英文的时候。
可能有人会有疑问，“值”那里提到的<length>，貌似和这里的“长度单位”比较暧昧啊？好眼力！没错，确实暧昧，但暧昧是不好的，我们必须把它们之间的关系搞清楚。一句话：
<number> + 长度单位 = <length>如果继续细分，长度单位又可以分为相对长度单位和绝对长度单位。
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
em和ex，还有CSS3新世界的rem和ch（字符0的宽度）。vh、vw、vmin和vmax。（2）绝对长度单位：最常见的就是px，还有pt、cm、mm、pc等了解一下就可以，在我看来，它们实用性近乎零，至少我这么多年一次都没用过。
值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0,.5)、url(‘css-world.png‘)、attr(‘href‘)和scale(-1)。
属性冒号后面的所有内容统一称为属性值。例如，1px solid rgb(0,0,0)就可以称为属性值，它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如，z-index:1的1也是属性值。
属性名加上属性值就是声明，例如：
color: transparent;声明块是花括号（{}）包裹的一系列声明，例如：
{
height: 99px;
color: transparent;
}出现了选择器，而且后面还跟着声明块，比如本小节一开始的那个例子，就是一个规则集：
.vocabulary {
height: 99px;
color: transparent;
}
选择器是用来瞄准目标元素的东西，例如，上面的.vocabulary就是一个选择器。
“.”这个点号开头的选择器。很多元素可以应用同一个类选择器。“类”，天生就是被公用的命。“#”打头，权重相当高。ID一般指向唯一元素。但是，在CSS中，ID样式出现在多个不同的元素上并不会只渲染第一个，而是雨露均沾。但显然不推荐这么做。[]的选择器，形如[title]{}、[title= "css-world"]{}、[title~="css-world"]{}、
[title^="css-world"]{}和[title$="css-world"]{}等。:）的选择器，如:first-child 或:last-child等。::first-line::first-letter、::before和::after。关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还有+等，这些都是非常常用的选择器。
>连接。适用于IE7以上版本。~连接。适用于IE7以上版本。+连接。适用于IE7以上版本。@规则指的是以@字符开始的一些规则，像@media、@font-face、@page或者@support，诸如此类。2.2 了解CSS世界中的“未定义行为”
）。
“块级元素”对应的英文是block-level element，常见的块级元素有<div>、<li>和<table>等。需要注意是，“块级元素”和“display为block的元素”不是一个概念。例如，<li>元素默认的display值是list-item，<table>元素默认的display值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
list-item元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持list-item或许就是无法创建这个“标记盒子”导致的。display:block应该脑补成display:block-block，display:table应该脑补成display:block-table，我们平时的写法实际上是一种简写。width/height作用的具体细节width:auto我们应该都知道，width的默认值是auto。auto因为是默认值，所以出镜率不高，但是，它却是个深藏不露的家伙，它至少包含了以下4种不同的宽度表现。
（1）充分利用可用空间。比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫作fill-available，大家了解即可。
（2）收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或table元素，英文称为shrink-to-fit，直译为“收缩到合适”，有那么
第1章提过了，“流”之所以影响了整个CSS世界，就是因为影响了CSS世界的基石HTML。那具体是如何影响的呢？
HTML常见的标签有<div>、<p>、<li>和<table>以及<span>、<img>、和<em>等。虽然标签种类繁多，但通常我们就把它们分为两类：块级元素（block-level element）和内联元素（inline element）。
注意，如果按照W3C的CSS规范区分，这里应该分为“块级元素”和“内联级元素” （inline-level element）。但是，在W3C的HTML4规范中，已经明确把HTML元素分成了“块级元素”和“内联元素”，没错，是“内联元素”而不是“内联级元素”。两个规范貌似有微小的冲突。本书中所采用的是“内联元素”这种称谓，原因有两点：第一，这种称谓更亲切、更自然，因为大家平时都是这么叫的；第二，使用“内联元素”这个称谓对我们深入理解与内联相关的概念并没有什么影响。考虑到本书的目的不是为CSS规范做科普，而是以通俗易懂方式展示CSS的精彩世界，所以，采用了更老一点的HTML规范中的叫法。
“块级元素”对应的英文是block-level element，常见的块级元素有<div>、<li>和<table>等。需要注意是，“块级元素”和“display为block的元素”不是一个概念。例如，<li>元素默认的display值是list-item，<table>元素默认的display值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响。例如：
.clear:after {
content: ‘‘;
display: table; // 也可以是block，或者是list-item
clear: both;
}手动输入http://demo.cssworld.cn/3/1-1.php或者扫右侧的二维码。
从容器的背景色高度变化我们可以看出清除的效果，如图3-1所示。
图3-1 容器的背景色高度变化的效果
实际开发时，我们要么使用block，要么使用table，并不会使用list-item，主要有3个原因。
（1）1个字符的比较多，其他都是5个字符。
（2）会出现不需要的项目符号，如图3-2箭头所示。这其实并不是什么大问题，再加一行list-style:none声明就可以了。
（3）IE浏览器不支持伪元素的display值为list-item。这是不使用display:list-item清除浮动的主因，兼容性不好。对于IE浏览器（包括IE11），普通元素设置display:list-item有效，但是:before/:after伪元素就不行。
图3-2 出现项目符号
下面是提问环节了。请问，为什么IE浏览器不支持伪元素的display值为list-item呢？
其实这个问题的答案可以从下面这个问题中找到线索：请问，为什么设置display:list-item，元素会出现项目符号？
list-item元素会出现项目符号在CSS世界中，很多看似“理所当然”的现象的背后，实际上可能有一整套的体系支撑。挖掘简单现象背后的原因，会让你学到很多别人很难学到的CSS技能和知识。
回到这个问题。此问题本身并不难，但是，问题所能延伸出来的东西就要吓到诸位了。此问题牵扯到CSS世界中各种盒子。
由于牵扯名词甚多，所以我尽量以通俗易懂的方式给大家解释。
创造CSS的造物主原本的想法很简单：我要创造一个世界，就像只有男性和女性一样，这个世界只有块级盒子（block-level box）和内联盒子（inline box）。块级盒子就负责结构，内联盒子就负责内容。事非经过不知难，造物主后来才发现，这世界不止有男性和女性，还有特殊的性别，CSS世界的盒子也是这样。
原本以为块级盒子一套就够用了，也就是所有“块级元素”就只有一个“块级盒子”，但是，半路杀出个list-item，其默认要显示项目符号的，一个盒子解释不了，怎么办？
就跟我们写JavaScript组件遇到新功能增加API一样，天神灵机一动：我给list-item再重新命名一个盒子，就叫“附加盒子”。好了，这下顺了，所有的“块级元素”都有一个“主块级盒子”，list-item除此之外还有一个“附加盒子”。
现在大家知道上面问题的答案了吧！之所以list-item元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持list-item或许就是无法创建这个“标记盒子”导致的。
但是，我们的故事还没结束。搞定了list-item，天神本以为可以安安心心睡个午觉，结果碰到了真正的特殊性别的display:inline-block元素。
穿着inline的皮藏着block的心，现有的几个盒子根本没法解释啊，怎么办？
造物主再次灵机一动，没错，你猜对了，又新增一个盒子，也就是每个元素都两个盒子，外在盒子[1]和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。但是呢，造物主又想了想，叫“内在盒子”虽然容易理解，但是未免有些俗气，难登大雅之堂，于是，又想了一个更专业的名称，叫作“容器盒子”。
于是，按照display的属性值不同，值为block的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为inline的元素则内外均是“内联盒子”。
现在，大家应该明白为何display属性值是inline-block的元素既能和图文一行显示，又能直接设置width/height了吧！因为有两个盒子，外面的盒子是inline级别，里面的盒子是block级别。
实际上，如果遵循这种理解，display:block应该脑补成display:block-block，display:table应该脑补成display:block-table，我们平时的写法实际上是一种简写。
好了，说了这么多，出个小题测试一下大家的学习成果。请问：display:inline-table的盒子是怎样组成的？
display:inline-table的盒子是怎样组成的这个问题应该无压力：外面是“内联盒子”，里面是“table盒子”。得到的就是一个可以和文字在一行中显示的表格。
可以和文字在一行中显示的表格？没错，为了证明我没忽悠大家，我特意做了个演示页面，演示页面中<div>元素的相关CSS代码如下：
.inline-table {
display: inline-table;
width: 128px;
margin-left: 10px;
border: 1px solid #cad5eb;
}手动输入http://demo.cssworld.cn/3/1-2.php或者扫下面的二维码。结果该元素和文字一行显示，且行为表现如同真正的表格元素（子元素宽度等分），如图3-3所示。
图3-3 表格元素和文字在一行显示
上面示意的CSS代码表面上看起来很简单，但是，我也说过，简单的背后往往是不简单。这里CSS中有个width:128px，从最终的效果来看，宽度设置是起作用了。如果我们使用display:inline-block也会是同样的宽度表现。下面问题来了：元素都有内外两个盒子，我们平常设置的width/height属性是作用在哪个盒子上的？
width/height作用在哪个盒子上这个问题也是很简单的，因为在解释内外盒子的时候就已经提到过了：是内在盒子，也就是“容器盒子”。
不知大家有没有进一步深入思考过：width或height作用的具体细节是什么呢？
width/height作用的具体细节因为块级元素的流体特性主要体现在水平方向上，所以我们这里先着重讨论width。
估计很多人的第一次CSS属性书写就献给了width，就像路边的小草，好常见、好平淡、好简单的样子。如果你有这样的想法，此书你就买对了。
width:auto我们应该都知道，width的默认值是auto。auto因为是默认值，所以出镜率不高，但是，它却是个深藏不露的家伙，它至少包含了以下4种不同的宽度表现。
（1）充分利用可用空间。比方说，<div>、<p>这些元素的宽度默认是100%于父级容器的。这种充分利用可用空间的行为还有个专有名字，叫作fill-available，大家了解即可。
（2）收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或table元素，英文称为shrink-to-fit，直译为“收缩到合适”，有那么点儿意思，但不够形象，我一直把这种现象称为“包裹性”。CSS3中的fit-content指的就是这种宽度表现。
（3）收缩到最小。这个最容易出现在table-layout为auto的表格中。
在CSS2.1的规范中，有一段非常露骨的描述：content box环绕着width和height给定的矩形。
这对一些CSS新手的布局造成了一定的障碍，因为这些CSS从业者眼中的CSS结构是砖块，而不是水流。因此，布局讲求尺寸精确计算。这就导致在一些CSS属性值发生变化的时候（如padding值变大，元素尺寸也变大），空间不足，出现页面布局错位的问题。
说得这么直白，我已经没什么其他可说的了。明摆着，width:100px作用在了content box上，由于<div>元素默认的padding、border和margin都是0，因此，该<div>所呈现的宽度就是100像素。
在前端领域，一提到分离，作用一定是便于维护。比方说，样式和行为分离、前后端分离或者这里的“宽度分离”。
width使用的是默认值auto，所以会如水流般自动填满父级容器。因此，子元素的content box宽度就是100像素，和上面直接设置width为100像素表现一样。
width/height作用细节的box-sizingbox-sizing被直译为“盒尺寸”，实际上，其更准确的叫法应该是“盒尺寸的作用细节”，或者说得更通俗一点，叫“width作用的细节”，也就是说，box-sizing属性的作用是改变width的作用细节。*{box-sizing:border-box}（1）这种做法易产生没必要的消耗。通配符应该是一个慎用的选择器，因为它会选择所有的标签元素。对于普通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响，因此，对这些元素而言就是没有必要的消耗；同时有些元素，如search类型的搜索框，其默认的box-sizing就是border-box（如果浏览器支持），因此，*对search类型的<input>而言也是没有必要的消耗。
（2）这种做法并不能解决所有问题。box-sizing不支持margin-box，只有当元素没有水平margin时候，box-sizing才能真正无计算，而“宽度分离”等策略则可以彻底解决所有的宽度计算的问题。因此，我们有必要好好地想一想，box-sizing属性发明的初衷到底是什么？是为了让那些对block水平元素滥用width属性的人少出bug吗？我不这么认为！
min-width/max-widthmin-width/max-width就可以大显神威了：
.container {
min-width: 1200px;
max-width: 1400px;
}
在公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有下面的max-width限制：
img {
max-width: 100%;
height: auto!important;
}
height:auto是必需的，否则，如果原始图片有设定height，max-width生效的时候，图片就会被水平压缩。强制height为auto可以确保宽度不超出的同时使图片保持原来的比例。但这样也会有体验上的问题，那就是在加载时图片占据高度会从0变成计算高度，图文会有明显的瀑布式下落。
min-width/min-height的初始值是0，但是，根据我的分析和测试，所有浏览器中的min-width/min-height的初始值都是auto。min-width/min-height的初始值是auto，max-width/max-height的初始值是none。
!important，超越最大!important超越!important指的是max-width会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖，覆盖到什么程度呢？大家应该都知道CSS世界中的!important的权重相当高，在业界，往往会把!important的权重比成“泰坦尼克”，比直接在元素的style属性中设置CSS声明还要高，一般用在CSS覆盖JavaScript设置上。
.container {
min-width: 1400px;
max-width: 1200px;
}
最小宽度居然比最大宽度设置得还大，此时，两者必定是你死我活的状态。究竟谁死呢？遵循“超越最大”规则（注意不是“后来居上”规则），
min-width活下来，max-width被忽略，于是，.container元素表现为至少1400像素宽。虽然说“幽灵空白节点”是我自己根据CSS的特性表现起的一个非常形象的名字，但其绝不是空中楼阁、信口胡诌的。规范中实际上对这个“幽灵空白节点”是有提及的，“幽灵空白节点”实际上也是一个盒子，不过是个假想盒，名叫“strut”，中文直译为“支柱”，是一个存在于每个“行框盒子”前面，同时具有该元素的字体和行高属性的0宽度的内联盒。规范中的原文如下：
Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut”.
明白“幽灵空白节点”的存在是理解后续很多内联元
原文：https://www.cnblogs.com/carrywu/p/10296495.html