css3 特性
（1）布局更为丰富。
• 移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的 srcset 属性、CSS 的 object-fit 属性。
• 弹性盒子布局（flexible box layout）终于熬出了头。
• 格栅布局（grid layout）姗姗来迟。
（2）视觉表现长足进步。
• 圆角、阴影和渐变让元素更有质感。
• transform 变换让元素有更多可能。
• filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
• animation 让动画变得非常简单。
长度单位
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
• 相对字体长度单位，如 em 和 ex，还有 CSS3 新世界的 rem 和 ch（字符 0 的宽度）。
• 相对视区长度单位，如 vh、vw、vmin 和 vmax。
（2）绝对长度单位：最常见的就是 px，
块级元素
常见的块级元素有<div>、<li>和<table>等。
需要注意是，“块级元素”和“display 为 block 的元素”不是一个概念。例如，<li>元素默认的 display 值是 list-item，<table>元素默认的 display 值是 table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
list-item 会出现不需要的项目符号。这其实并不是什么大问题，再加一行 list-style: none 声明就可以了。IE 浏览器不支持伪元素的 display 值为 list- item。这是不使用 display:list-item 清除浮动的主因，兼容性不好。对于 IE 浏览器（包括 IE11），普通元素设置 display:list-item 有效，但是 :before /:after 伪元素就不行。
原因：只有块级盒子和内联盒子，list-item 自带的，之所以 list-item 元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。
解释 inline-block，每个元素都两个盒子，外在盒子（块级，内联）和内在盒子（容器盒子）。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现
width 和 height 作用在内在盒子（容器盒子）
（1）布局更为丰富。
• 移动端的崛起，催生了 CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素的 srcset 属性、CSS 的 object-fit 属性。
• 弹性盒子布局（flexible box layout）终于熬出了头。
• 格栅布局（grid layout）姗姗来迟。
（2）视觉表现长足进步。
• 圆角、阴影和渐变让元素更有质感。
• transform 变换让元素有更多可能。
• filter 滤镜和混合模式让 Web 轻松变成在线的 Photoshop；
• animation 让动画变得非常简单。
长度单位
（1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
• 相对字体长度单位，如 em 和 ex，还有 CSS3 新世界的 rem 和 ch（字符 0 的宽度）。
• 相对视区长度单位，如 vh、vw、vmin 和 vmax。
（2）绝对长度单位：最常见的就是 px，
块级元素
常见的块级元素有<div>、<li>和<table>等。
需要注意是，“块级元素”和“display 为 block 的元素”不是一个概念。例如，<li>元素默认的 display 值是 list-item，<table>元素默认的 display 值是 table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
list-item 会出现不需要的项目符号。这其实并不是什么大问题，再加一行 list-style: none 声明就可以了。IE 浏览器不支持伪元素的 display 值为 list- item。这是不使用 display:list-item 清除浮动的主因，兼容性不好。对于 IE 浏览器（包括 IE11），普通元素设置 display:list-item 有效，但是 :before /:after 伪元素就不行。
原因：只有块级盒子和内联盒子，list-item 自带的，之所以 list-item 元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。
解释 inline-block，每个元素都两个盒子，外在盒子（块级，内联）和内在盒子（容器盒子）。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现
width 和 height 作用在内在盒子（容器盒子）
