css关键概念（一）
CSS(Cascading<层叠>Stylesheet<样式表>），顾名思义啊层叠样式表的重点就是层叠和样式表，当然以下部分都是CSS的关键概念。同时不得不说，这些内容都是外国人写的，所以无论是MDN还是W3Cschool有些地方的中文的翻译是不如看英文的...第一部分只记录前5条
一、语法
语法声明格式：属性 : 值
声明块：选择器 {
属性：值 ；//多个属性用 ‘ ；’隔开，建议所有的声明式子末尾都加分号以方便后期扩展。
}
//以一个p（段落元素）标签为例 p {
font-size: 15px; //属性： 值 }
二、优先级、继承、级联
1.优先级
！important > 内联样式（1000）> ID选择器（100）> 类选择器（10）[class，属性选择器，伪类] > 类型选择器（1）[标签，伪元素] > 通配符 + 关系选择符+否定伪类（0）> 继承
:not()否定伪类较为特别，优先级为0，声明在其内部的选择器的优先级也会因此受到影响。
其他的在MDN优先级不做赘述。
2.继承
本小节涉及到css中的其他关键属性：计算值，初始值。
每一个属性的是否为可继承的（Inherited）是早已默认定义好的，这是为了解决了一些元素的属性没有给定值的时候计算值。所以所有CSS属性都可以分成这两类：继承属性、非继承属性。
继承属性：当前元素的一个继承属性——能够继承值的属性，没有指定值时，会用父元素中声明的这个属性来为当前元素赋值。
对上一段话的理解，举例来说：p标签没有设置文字颜色color属性，而他的父元素div指定了color值为red红色，那么p标签内的文字就会因为color为可继承元素的缘故全部显示为红色。
非继承属性：当元素的一个非继承属性没有指定值时，则取属性的初始值。
解释一下初始值，CSS为所有属性都规定了初始值也就是默认值。当元素使用可继承的属性时，只有一直追溯到根元素都没有设置这个属性时继承属性才可以使用这个值。而非继承属性可以用于任意没有指定值的元素上。
inherit关键字允许显式的声明继承性，并且对继承和非继承属性都生效。一般只用于增强默认行为。 例如：color：inherit指定继承父元素
initial关键字用来指定属性使用默认值，但是不要把initial的默认值和浏览器样式表的混为一谈，浏览器那个是client定义的表不是CSS默认值。可以用来恢复属性默认值。例如：border：initial
unset关键字是个神奇的关键字，声明的属性一般优先使用inherit继承来自父元素的值，父元素没有值，那就设置为initial的样式。
revert关键字用于将属性重置为user-agent样式表规定的值（或者是用户样式，if exist~~），这里又涉及了两个不常见的东西用户样式和user-agent样式表，简单来说用户样式表不常用，它允许浏览网页的用户使用自己的样式表；user-agent样式表其实就是浏览器自定义的样式表，所以每个浏览器的user-agent样式表应该都是不太一样的，所以个人来说不推荐使用（mdn甚至没有这个值的链接）。
all简写属性可以一次控制所有属性的继承。可以使用以上四个值。
3.级联
级联，也可以翻译为层叠，是CSS的基本特征。
- 参与级联（层叠）计算的CSS实体：css声明，大多数@规则的CSS声明
- 整体参与的：@font-face、@keyframes（这里有疑问）
- 完全不参与，且不受影响：@import、@charset
CSS 声明有以下三种来源：user-agent（一般是浏览器）、Author（作者编写的）、Us er（用户个人的）
级联（层叠）顺序：user !important > author !important > css动画 > author > user >user-agent !important > user-agent
解释一下，CSS为了平衡用户和作者，当用户表使用了!important时用户表优先，当不使用!important时，作者表优先。（这里我不太懂的一点是，mdn上对于每个语言的顺序都不太一样，中文更是删除了英文中重要性最高的transition，对这里有一些疑虑）
三、盒子模型和外边距合并
1. 盒子模型
盒子模型简单来说就是用盒子的形象来解释一个HTML元素的显示样式。盒子模型元素分别包括：内容（content）、内边距（padding）、边框（border）、外边距（margin）。而这几个盒子模型的元素依赖于box-sizing——盒子尺寸的值。
默认情况下box-sizing为content-box也就是内容盒子。解释一下，内容盒子就是宽高完全服务于内容，也就是设置这种默认盒子的宽高都是在设置内容区域的宽和高。
除了默认值，还可以设置box-sizing为border-box，个人常用于解决边框超出页面时设置。border-box就是边框盒子，顾名思义，边框盒子就是拥有边框的盒子，需要注意的是设置这种盒子的宽高是设置了内容（content）+ 内边距（padding）+ 边框（border）。
通过学习mdn知道了还有这样一个属性，background-clip。这个属性除了可以使用之前介绍的关键字，还可以使用
- border-box——和box-sizing：border-box效果一致，也就是边框覆盖在内容
- padding-box——内边距盒子；
- content-box——内容盒子；
- text——文字，这个效果是最酷炫的，可以把背景显示在文字上（当然文字颜色需要设置成透明的）。
这个属性一般用来解决使用box-sizing：border-box时背景被边框覆盖。
2. 外边距合并
块级元素之间有时候会产生外边距合并情况，就是两个块级元素取margin更大的为两者的外边距。当然脱离文档流的浮动和绝对定位元素的外边距不会发生折叠情况。
三种外边距合并情况：
- 相邻元素
- 父元素和第一个或最后一个子元素
- 空块元素
简单来说，只要满足块元素和以上三种条件之一，margin为0或负值都会产生外边距合并（第二种子元素会从父元素溢出）。
较为好的解决方式就是clearfix，清除浮动。对于第二种可以设置父元素的border或overflow：visible以外的其他值。
四、包含块
包含块决定了一个元素的尺寸和位置如何计算（百分值）。也就是说为什么你在根节点下声明一个块元素并为它设置height： 100%是无效的，因为这个块元素的包含块是包含它的父元素（根节点），而父元素高度为0所以设置高度为百分比是无效的。
一个元素的包含块由position决定，并不是什么时候包含块都是父元素。
- position: static(默认值）| relative，包含块为最近的祖先元素内容区边缘组成；
- position: absolute，包含块为最近的position不是默认值的祖先元素内边距边缘组成；
- position: fixed，连续媒体时，包含块时viewport；分页媒体时，包含块是分页区域；
当然，mdn还提供了另一个可能性，当position：absolute | fixed时，以下情况包含块可能是最近的父级元素的内边距边员组成（以下属性都需要兼容）
- transform和perspective值不为none时；
- will-change(一种还在试验的优化方法，用来告知浏览器将要发生的变化使浏览器有所准备）值为transform和perspective时；
- filter(滤镜属性）不为none时或者will-change值为filter（滤镜，仅在Firefox有效）时；
- contain（这个属性也是为了浏览器优化，用于告知浏览器当前属性尽可能独立，避免reflow对当前元素的影响）值为paint时。
五、层叠上下文和块格式化
1. 层叠上下文
层叠上下文就是元素在显示不同层次。本来以为就是简单的在position不为默认时，设置z-index，但是使用flexbox和grid容器时设置z-index也可以；同时，opacity（透明度）小于1时也会产生层叠；剩下的都是我需要研究的属性：
- 以下属性不为none时，有层叠：
- transform
- filter
- perspective
- clip-path
- mask/mask-image/mask-border
mix-blend-mode属性值不为normal的元素- isolation属性值为isolate的元素有层叠
- -webkit-overflow-scrolling属性值为touch的元素
will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
2. 块格式化
块格式化上下文也就是BFC，一开始我以为它是为了解决浮动元素脱离文档流和清除浮动的方法，但是实际上BFC就是一个块盒子。并不是说BFC的出现是为了解决什么，而是因为BFC才有了浮动元素定位和清除浮动问题（鸡生蛋么）。
块格式化出现的情况：
- 根元素，浮动元素，绝对定位元素，行内块元素，表格单元格元素（display：table-cell），表格标题元素（display：table-caption），匿名表格单元格元素（各种display为table相关的属性）
- overflow不是默认值
- display：flow-root
- contain：layout | content | paint
- 弹性元素，网格元素，多列容器
- column-span为all的元素
相关方法：
- 使浮动内容和周围内容等高的方法是，设置overflow除默认值以外的值
- 外边距塌陷问题，创建新的BFC解决
- 使用display： flow-root创建无副作用的BFC