本文介绍的是CSS世界中务必了解的专业术语，包括属性、值、关键词、变量、长度单位、功能符、属性值、生命、声明块、规则或规则集、选择器、关系选择器、@规则以及CSS世界中的“未定义行为”。
“流”之所以影响了整个CSS世界，就是因为影响了CSS世界的基石HTML。HTNML标签通常分为两类：块级元素和内联元素。
注意： 按照W3C的CSS规范，这里应该是“块级元素”和“内联级元素”。但是在W3C的HTML规范里，已经明确把HTML元素分为了“块级元素”和“内联元素”。我们这里采用现实中常用的HTML的内联元素这一说法。
一、块级元素（block-level element）
1.1 基本特性：
基本特性：换行特性（一个水平流上只能单独显示一个元素，多个块级元素则换行显示。）
注意：块级元素的流体特性主要表现在水平方向上。
1.2 块级元素和“display 为block 的元素”不是一个概念
display:list-item、display:table均块级元素，因为他们符合块级元素的基本特征，即换行特征。
1.3 用display值为block和list-item来配合clear属性来清除浮动带来的影响
不使用list-item的原因：字母比较多、会出现项目符号、ie浏览器不支持伪元素的display值为listitem。
如案例：
.clear: after {
content: '';
display: table; // 也可以是block，或者是list-item
clear: both;
}
二、list-item 元素会出现项目符号的原因
2.1 标记盒子：
注意:标记盒子可以理解为主块级之外的附加盒子。
list-item 元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目号。
IE浏览器下伪元素不支持list-item 或许就是无法创建这个“标记盒子”导致的。
2.2 外在盒子和容器盒子
注意:容器盒子可以理解为内在盒子。
内在盒子：负责元素是一行显示还是只能换行显示。
容器盒子：负责宽高、内容呈现等。
[按照display的属性值我们可以知道：
- display值为block的元素由外在的“块级盒子”和内在的“块级容器盒子”组成。
- display值为inline-block的元素由外在的“内联盒子”和内在的“块级容器盒子”组成。
- display值为inline的元素内外均是“内联盒子”。
- display值为inline-table的元素外面是“内联盒子”，里面是“table 盒子”。
2.3 width/height 作用在“容器盒子”
案例结果：该元素和文字一行显示，且表现如同真正的表格元素（子元素宽度等分）
三、width/height作用的细节
3.1 width默认值auto的4种表现：
1、充分利用可用空间，宽度默认100%于父级容器的。
比如：<div>、<p>这些元素的宽度默认是100%于父级容器的。
这种充分利用可用空间的行为还有个专有名字，叫作fill-available。
2、自适应大小，具有包裹性。
典型代表：浮动、绝对定位、inline-block 元素或table 元素。
3、收缩到最小
这个最容易出现在table-l表格ayout 为auto 的中：
当一列空间都不够时，文字能断就断，但中文随便断的，英文单词不能断。
4、超出容器限制
除非明确width的相关设置，否则上面3种都不会主动超过父级容器宽度的，但是存在一些特殊情况。例如：内容很长的连续的英文和数字，或者内联元素被设置了white-space：nowrap,则表现为如下：
像这一种子元素既保持了inline-block元素的收缩性，又同时让内容宽度最大，直接无视父级容器的宽度限制，后来在CSS3中有了专门的属性值描述，教室max-cintent.
上面的几个只有第一个是“外部尺寸”，其余全部是“内部尺寸”。而这唯一的“外部尺寸”，是“流”的精髓所在。
四、外部尺寸与流体特性
元素尺寸由外部的容器决定
正常流宽度是一种margin/border/padding和content 内容区域自动分配水平空间的机制，尽量用无宽带的流来布局。
格式化宽度：在position属性值为absolute 或fixed 的元素中。在默认情况下，宽度由内部尺寸决定。当left/top 或top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是static）的祖先元素计算。margin、border、padding 和content 内容区域同样会自动分配水平（和垂直）空间
五、内部尺寸与流体特性
元素尺寸由内部元素决定，“内部尺寸”有下面3 种表现形式：
包裹性:元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）按钮:
按钮就是inline-block 元素。
按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应特性）。
<button>标签按钮才会自动换行，<input>标签按钮，默white-space:pre，
是不会换行的，需要将pre 值重置为默认的normal。
按钮最大宽度就是容器的240 像素
首选最小宽度:元素最适合的最小宽度.外部容器的宽度是240 像素，假设宽度是0，里面的inline-block 元素的宽度是首选最小宽度。具体表现规则：
东亚文字（如中文）最小宽度为每个汉字的宽度。
西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS 中的word-break:break-all。
类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
最大宽度:是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space:nowrap 声明后的宽度。如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。
六、width 值作用的细节
width 是作用在“内在盒子”上的，“内在盒子”又被分成了4 个盒子，分别是content box、padding box、border box和margin box。
content box ： content-box，padding box ：padding-box，border box ：border-box。margin box没有名字。
margin 的背景永远是透明的。
在CSS2.1 的规范中，有一段非常露骨的描述：content box 环绕着width 和height 给定的矩形。这种宽度设定和表现并不合理：
流动性丢失：对于块状元素，如果width:auto，则元素会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断。
与现实世界表现不一致的困扰。
七、CSS 流体布局下的宽度分离原则
所谓“宽度分离原则”，就是CSS 中的width 属性不与影响宽度的padding/border（有时候包括margin）属性共存。写法：
.father {
width: 180px;
}
.son {
margin: 0 20px;
padding: 20px;
border: 1px solid;
}
为何要宽度分离:当一件事情的发展可以被多个因素所左右的时候，这个事情最终的结
果就会变数很大而不可预期。宽度在这里也是类似，由于盒尺寸中的4 个盒子都能影响宽度，自然页面元素的最终宽度就很容易发生变化而导致意想不到的布局发生。使用“宽度分离”后，咱们不需要烧脑子去计算了，而且页面结构反而更稳固。
八、改变width/height 作用细节的box-sizing
box-sizing 的作用：改变了width 作用的盒子。box-sizing:border-box 就是让100 像素的宽度直接作用在border box上，从默认的content box 变成border box。此时，content box 从宽度值中释放，形成了局部的流动性，和padding 一起自动分配width 值。
box-sizing 并不支持margin-box。
如何评价*{box-sizing:border-box}。从纯个人角度讲，不喜欢这种做法的。
这种做法易产生没必要的消耗，通配符*应该是一个慎用的选择器，因为它会选择所
有的标签元素。
这种做法并不能解决所有问题。box-sizing 不支持margin-box，只有当元素没
有水平margin 时候，box-sizing 才能真正无计算，而“宽度分离”等策略则可以彻底解决
所有的宽度计算的问题。
替换元素css重置更合适：
input, textarea, img, video, object {
box-sizing: border-box;
}
九、关于height
对于width 属性，就算父元素width 为auto，其百分比值也是支持的。
对于height 属性，如果父元素height 为auto，只要子元素在文档流中，其百分比值完全就被忽略了。百分比高度值要想起作用，其父级必须有一个可以生效的高度值。
如何让元素支持height:100%效果：
设定显式的高度值。
使用绝对定位。绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于padding box 的，也就是说会把padding 大小值计算在内，但是，非绝对定位元素则是相对于content box 计算的。
十、min-width/max-width和min-height/max-height
max-width 和max-height 的初始值是none,min-width/min-height 的初始值都是auto。
超越!important 指的是max-width 会覆盖width，而且这种覆盖不是普通的覆盖，是超级覆盖。
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
答案是256px。
min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候。
任意高度元素的展开收起动画技术：
.element {
height: 0;
overflow: hidden;
transition: height .25s;
}
.element.active {
height: auto; /* 没有transition 效果，只是生硬地展开 */
}
可以试试下面方法
.element {
max - height: 0;
overflow: hidden;
transition: max - height .25s;
}
.element.active {
max - height: 666px; /* 一个足够大的最大高度值 */
}
注意：即虽然说从适用范围讲，max- height 值越大使用场景越多，但是，如果max-height 值太大，在收起的时候可能会有“效果延迟”的问题。因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也
会因为时间很短，很难被用户察觉，并不会影响体验。
十一、内联元素
块级负责结构，内联负责内容。
“内联元素”的“内联”特指“外在盒子”，和“display 为inline的元素”不是一个概念。
“内联元素”的典型特征就是可以和文字在一行显示。
内容区域（content area）：域指一种围绕文字看不见的盒子可以理解为把文本选中的背景色区域作为内容区域。
注意：在IE 和Firefox 浏览器下，文字的选中背景总能准确反映内容区域范围，但是Chrome 浏览器下，::selection 范围并不总是准确的，例如，和图片混排或者有垂直padding 的时候，范围会明显过大，这一点需要注意。
内联盒子（inline box）：“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：
内联盒子:外部含内联标签<span>、<a>和<em>等。
匿名内联盒子:光秃秃的文字。
行框盒子（line box）:每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。
包含盒子（containing box）:<p>标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。
十二、幽灵空白节点
在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。
注意:这里有一个前提，文档声明必须是HTML5 文档声明，如果还是很多年前的老声明，则不存在“幽灵空白节点”。
十三、致谢
本文内容是我对张鑫旭老师《CSS世界》一书第三章的学习笔记，由衷的钦佩张鑫旭老师，向张鑫旭老师学习！也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦
作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！
