持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
pointer-events
禁止事件触发
pointer-events: none，相当于 <button> 的 disabled。
使用场景：限时点击按钮，发送验证码倒计时，事件冒泡禁用。
background-attachment
背景图像的位置在视口内固定还是随着包含他的区块滚动
fixed : 即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local : 如果一个元素拥有滚动机制，背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
background-size
background-size: cover ：缩放图片完全覆盖背景区，可能背景图片部分不可见。
background-size: contain ：缩放图完全装入背景区域，可能会导致背景区域部分空白。
font-size
text-indent ：属性能定义一个块元素首行文本内容之前的缩进量。
letter-spacing： 属性用于设置文本字符的间距表现。
object-fit
object-fit：属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit: contain和background-size: contain一样。object-fit: cover和background-size: cover一样。object-fit: none被替换的内容将保持其原有的尺寸。object-fit:fill被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
元素的显示与隐藏
display:none: 元素从渲染树中消失，不可见，不占据空间，辅助设备无法访问，但是有资源的加载，DOM可以访问到元素。visibility: hidden; position: absolute: 元素不可见，不占据空间，辅助设备无法访问，但隐藏的时候可以有transition淡入淡出效果。visibility: hidden;: 元素在渲染树中不会消失，只是不可见，占据空间，辅助设备无法访问，子元素可以通过修改继承属性让子元素显示在页面上。opacity: 0: 元素不可见，但是可以点击，不占据空间,作用于该元素以及该元素内的所有内容的透明度(子元素会继承这个颜色)。display: none不影响animation动画的实现，但是影响transition过渡的执行。
无归类
rgba()：只作用于元素自身的颜色和其背景色。子元素不会继承透明的效果。
currentColor：变量可用于 border，background，box-shadow等，使用场景当鼠标移入的时候改变颜色，可减少大量代码。如果浏览器支持 currentColor 属性的话，我们尽可以的用这个，可扩展性强，修改的时候只要修改一个地方就好了。
border 没有定义 border-color 时，设置 color 后，border-color 会被定义成 color(outline 和 border 很像，但是 outline 不占据空间,没有上下左右方向之分)[outline]。
块级元素和 display：block 并不是一个概念；比如 li 元素的 display：list-item，table 的 display：table；但是他们都是块级元素；块级元素有一个基本的特征就是：水平流上只能单独显示一个元素，多个块级元素则换行显示（具有换行特性）clear 属性清除浮动就是这样做的。
块级元素负责结构，内联元素负责样式（在我们的书写样式的时候应该记住）
最大宽度：如果内部没有块级元素或者块级元素没有设定宽度，则最大宽度实际上就是最大的连续内联盒子的宽度。
CSS 属性分两种：一种纯视觉效果，不影响外部尺寸（box-show 和 outline）另一种是影响外部尺寸的，在移动端我们会用 padding 添加可点击区域的范围方便我们进行操作
padding 支持百分比（水平方向或者垂直方向均相对于宽度计算）
对于普通块元素，在默认的水平流下，margin 只能改变左右方向内部尺寸，垂直方向无法改变（如果我们使用 writing-mode 改变了）。
视觉上的等高，margin-bottom 为负，padding-bottom 为正，正负抵消，再用 overflow：hidden;实际上是不等高的。
如果想要某个块级元素右对齐，我们可以使用 margin-left: auto ,毕竟浮动是个小魔鬼，他和 text-align 控制左中右对齐正好遥相呼应。
border-width, outline, box-shadow, text-shadow 等等，不支持百分比。
resize CSS 属性允许你控制一个元素的可调整大小性。
caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
可以继承的样式属性：font-size, font-family, color, ul, li, dl, dd
关于响应式
响应式设计是一个网站能够兼容多个终端，而不是一个终端一个特定的版本。
响应式设计的原理是：通过媒体查询 (@media) 查询检测不同的设备屏幕尺寸做处理。
关于兼容：页面头部必须有 meta 声明的 viewport。
CSS2.0 和 CSS3.0 不同之处
- CSS3加强了CSS2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局，现在使用一个属性就能解决（例如columns等）。
- 在展示型效果方面还加入了更多的效果（如动画，阴影，圆角等），在盒子模型和列表模块都有了改进。但是CSS3就兼容性而言，还是有些不足之处是，只能支持一些高版本的浏览器。
- CSS3是为了实现更为丰富，更为复杂的网页，基本和流无关。
流体布局：利用元素流的特性实现各类布局效果（div+css 布局）, 块级元素的流体特征主要表现在水平方向上，流动性并不是宽度 100% 显示这么简单，而是一种 margin/padding/border/content 内容区域自动分配水平空间的机制
自适应布局：一套代码可以再多端运行（PC和移动端)
添加了一些新的属性：布局方面的flex，grid布局 等等，视觉效果的，transform/animation 等等。
添加了一些结构标签(相当于有意义的div标签)：
- article：用于定义一篇文章
- header：定义页面的头部
- footer：
- nav：导航条链接
- section：定义一个区域
- aside：定义页面内容的侧边栏
- hgroup：定义文件中一个区块的相关信息
- dialog:对话弹窗
多媒体标签:
- video：定义一个视频
- audio：定义一个音频
- ....
纯表现元素(删除后利于表现与结构分离):
- 1.Basefont
- 2.big
- 3.center
- 4.font
- 5.s
- 6.strike
style标签写在body前后有什么区别
一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。 若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现fouc现象（页面闪烁）。
过深的嵌套会增加页面的渲染和维护成本的
