前言：所有内容源于基思·J·格兰特的《深入解析css》
叠层
层叠指的就是这一系列规则。它决定了如何解决冲突。当声明冲突时，层叠会依据三种条件解决冲突：
- 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
- 选择器优先级：哪些选择器比另一些选择器更重要。
- 源码顺序：样式在样式表里的声明顺序。
1.样式来源
- 浏览器默认样式：优先级低
- 你自己引入的样式
!important声明：优先级高
2.优先级
-
行内样式：可以覆盖任何来自样式表或者
<style>标签的样式（除非其他声明了!importent）<div style="color:red"></div> -
选择器：ID选择器>类选择器>标签选择器
优先级比较规则：选择器ID数量多者胜；若ID数量一致，类选择器多者胜；若以上两者都一致，标签选择器多者胜。
其他说明：
伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。
3.源码顺序
如果两个声明的来源和优先级相同，后出现的样式会覆盖先出现的样式
总结
浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值。元素的每个属性最多只有一个层叠值
继承
如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。
但不是所有的属性都能被继承，默认情况下，只有特定的一些属性能被继承。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing；或者列表属性：list-style、list-style-type、list-style-position以及list-style-image；表格的边框属性border-collapse和border-spacing（不完全枚举）
开发者工具的使用
特殊值
-
inherit
用继承的方式代替一个层叠值，
a:link{color:blue} //全局的网页链接颜色 .footer{color #666} //页脚的文本颜色 .footer a{color:inherit} //从页脚继承的文本颜色 -
initial
撤销作用于某个元素的样式（每一个CSS属性都有初始值，这种方式可以重置初始值）
.footer a{color:initial} //在大多数浏览器中，黑色是color属性的初始值，所以color: initial等价于color: black
简写属性
简写属性用于同时给多个属性赋值，比如：
-
font可以设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。
-
background可以设置多个背景属性：background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。
-
border可以设置：border-width、border-style以及border-color
-
border-width可以设置：上、右、下、左四个边框宽度
覆盖其他样式
简写属性可以省略一些值，只指定我们关注的值。但这样做仍然会设置省略的值，即它们会被隐式地设置为初始值。
h1{font-weight:bold;}
.title{ font:32px Arial} //-->隐性设置了默认值font-weight:normal，故不会加粗
简写值的顺序
简写属性会尽可能包容指定的属性值的顺序。比如设置border: 1px solid black或者border: black 1px solid，两者都会生效。但是有很多属性的值很模糊，在这种情况下，值的顺序很关键。
-
上、右、下、左
当遇到像
margin、padding这样的属性，还有为元素的四条边分别指定值的边框属性时，这些属性的值是按顺时针方向，从上边开始的。这种模式下的属性值还可以缩写，没有声明的取其对边的值：padding:1em //上右下左 padding:1em 2em; //上下 左右 padding:1em 2em 1em; //上 左右 下 -
水平、垂直
还有一些属性只支持最多指定两个值，这些属性包括
background-position、box-shadow、text-shadow（严格来讲它们并不是简写属性）。这些属性值的顺序跟上方的正好相反。比如，
padding: 1em 2em是先指定了上/下属性值，然后才是右/左属性值，而background-position: 25% 75%则先指定右/左属性值，然后才是上/下属性值
相对单位
绝对单位如像素，如5px放在哪里都一样大。而像em和rem这样的是相对单位。相对单位的值会根据外部因素发生变化。
随着技术的发展，加上制造商推出高清显示器，智能手机出现，开发人员再也无法假装每个用户访问网站的体验都能一样。不管我们喜欢与否，都得抛弃以前那种固定宽度的栏目设计，开始考虑响应式设计。
相对单位可以基于窗口大小来等比例地缩放字号，或者将网页上的任何元素的大小都相对于基础字号来设置
em
1em等于当前元素的字号，而2em就相当于两倍当前元素的字号。当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。
.box-small{font-size:12px}
.box-large{font-size:18px}
.box{
padding:1em;
border-radius:1em;
}
<div class="box box-small"></div>
<div class="box box-large"></div>
rem
当使用em给元素定义字号并且多级嵌套时，可能会发生文字缩小或放大的现象。rem可以解决这个问题。
在DOM中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器:root，等价于类型选择器html。rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。
:root{font-size:1em} //表示使用浏览器的默认字号
ul{font-size:.8rem} //表示相对于根元素将字号扩大八倍
响应式面板
根据屏幕尺寸，可以用媒体查询改变根元素的字号。这样就能够基于不同用户的屏幕尺寸，渲染出不同大小的面板。
//作用在所有屏幕上，可能会被后面的覆盖
:root{font-size:0.75em;}
//作用在宽度为800px及以上的屏幕，覆盖前面的值
@media (min-800px){
:root{font-size:0.875em;}
}
//作用在宽度为1200px及以上的屏幕，覆盖前面的值
@media (min-1200px){
:root{font-size:0.875em;}
}
如果需要让同一个组件在页面某些部位显示不同的大小，可以用em来单独缩放一个组件。
.panel{
font-size:1rem;
padding:1em;
}
.panel>h2{
font-size:0.8em;
}
视口
视口指浏览器窗口里网页可见部分的边框区域，它不包括浏览器的地址栏、工具栏、状态栏。视口的相对单位是相对于浏览器视口定义的
- vh：视口高度的1/100
- vw：视口宽度的1/100
- vmin：视口宽、高中较小的一方的1/100
- vmax：视口宽、高中较大的一方的1/100
比如，100vw等同于整个视口宽度，50vw等于视口宽度的一半；
vmin有个作用：保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。
div{
90vmin;
height:90vmin;
background-color:red
}
calc()定义字号
calc()函数内可以对两个及其以上的值进行基本运算。支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。在下面的例子中，慢慢缩放浏览器，字体会平滑地缩放，0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。
:root{
font-size:calc(0.5em+1vm)
}
无单位的数值
有些属性允许无单位的值如：line-height、z-index、font-weight
自定义属性
css可以自定义属性。下面的代码定义了一个名叫--main-font的变量。变量名前面必须有两个连字符--，用来跟CSS属性区分，剩下的部分可以随意命名。变量必须在一个声明块内声明。比如这里是在root选择器里，因此该变量可以在整个网页使用：
1.声明变量
:root{
--main-foot:Arial
}
2.调用函数var()使用该变量
p{
font-family:var(--main-foot)
}
如果刚好用了内置变量功能的CSS预处理器，比如Sass或者Less，你可能就不太想用CSS变量了。然而，新规范里的CSS变量比任何一款预处理器的变量功能都多，因此作者倾向于称其为“自定义属性”，而不是变量，以强调它跟预处理器变量的区别。
var()函数接受第二个参数，指定备用值
p{
font-family:var(--main-foot,'宋体')
}
动态改变自定义属性
例如，可以定义一个变量为黑色、一个变量为白色；然后在某个容器中重新定义变量的颜色。那么，在容器内部会动态解析这些变量。
<div class="panel">
<p>zxcvbwfhs</p>
</div>
<aside class="dark">
<div class="panel">
<p>zxcvbwfhs</p>
</div>
</aside>
:root{
--main-bg:#fff;
--main-color:#000
}
.panel{
background-color:var(--main-bg);
color:var(--main-color)
}
.dark{
--main-bg:#333; //在容器中从定义变量
--main-color:#fff;
}
盒模型
元素宽度
默认盒模型
padding、border、margin是追加在内容宽度外边的。当子元素的宽度（包括padding、border、margin）超过父容器内容宽度的100%的时候，块级元素会自动折行。
默认盒子的宽=内容宽度
box-sizing:content-box //默认
调整盒模型
盒模型还有另一种：border-box，此时盒子的宽=内容宽度+padding+border
box-sizing:border-box
全局设置border-box
选中页面所有元素及伪元素
*,::before,::after{ box-sizing:border-box}
但是如果在网页中使用了带样式的第三方组件，可能会有冲突，这时可以：
:root{box-sizing:border-box}
*,::before,::after{box-sizing:inherit}
给列之间加上间隔
假设有两个同级的div：main和sidebar
.main{
float: left;
box-sizing: border-box;
70%;
}
.sidebar{
float: left;
box-sizing: border-box;
30%
padding: 1.5em;
}
可以基于百分比的外边距留白
.sidebar{
30%;
}
------------------变成：
.sidebar{
29%;
margin-left:1%
}
元素高度
普通文档流是为限定的宽度和无限的高度设计的。内容会填满视口的宽度，然后在必要的时候折行，因此，容器的高度由内容决定
普通文档流——指的是网页元素的默认布局行为。行内元素跟随文字的方向从左到右排列，当到达容器边缘时会换行。块级元素会占据完整的一行。
控制溢出行为
当明确设置一个元素的高度时，内容可能会溢出容器。用overflow属性可以控制溢出内容的行为，该属性支持以下4个值：
- visible：所有内容可见，即使溢出容器边缘（默认值）
- hidden：溢出容器内边距边缘的内容被裁剪，无法看见
- scroll：容器出现滚动条，用户可以通过滚动查看剩余内容
- auto：只有内容溢出时容器才会出现滚动条
overflow-x可以控制水平方向的溢出，overflow-y控制垂直方向溢出
实现等列高
首先可以采用百分比，然而想让百分比高度生效，必须给父元素明确定义一个高度。而且更多时候我们不确定高度，这时候可以用如下方法：
-
CSS表格布局
/* container容器包含main和sidebar */ .container{ display: table; /* 1. table布局*/ 100%; /* 2. 让表格填充容器的宽度*/ border-spacing: 1.5em 0; /* 3. table布局中，外边距不再生效，用border-spacing实现间隔*/ } /* 4. 在container容器外包裹消除左右边距 */ .wrapper{ margin-left: -1.5em; margin-right: -1.5em; } /* 5. 给子元素设置table-cell布局 */ .main{ display: table-cell; box-sizing: border-box; 70%; padding: 1.5em; } /* 给子元素设置table-cell布局 */ .sidebar{ display: table-cell; box-sizing: border-box; 30%; padding: 1.5em; } -
Flex布局
也称弹性容器，子元素默认等高。
.container{ display: flex; } .main{ box-sizing: border-box; 70%; } .sidebar{ box-sizing: border-box; 29%; margin-left: 1%; }
min-height和max-height
min-height可以指定一个最小高度。此时元素至少等于你指定的高度，如果内容太多，浏览器就会允许元素自己扩展高度，以免内容溢出
同理，max-height允许元素自然地增高到一个特定界限。如果到达这个界限，元素就不再增高，内容会溢出
垂直居中
vertical-align不生效问题：
vertical-align声明只会影响行内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。比如，可以用它控制一个行内的图片跟相邻的文字对齐。对于显示为table-cell的元素，vertical-align控制了内容在单元格内的对齐。
如果给块级元素设置vertical-align: middle，浏览器会忽略这个声明。
垂直居中指南：
-
如果可以用一个自然高度的容器，给容器加上相等的上下内边距让内容居中。
div{ background-color: #0072b0; color: #fff; padding: 4em 0; } -
如果容器需要指定高度或者避免使用内边距，对容器使用
display: table-cell和vertical-align: middle -
如果可以用Flexbox， 详见flex布局
-
如果容器里面的内容只有一行文字的行内元素，设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。
-
如果知道容器和内容的高度，将内容绝对定位
-
如果不知道内部元素的高度，用绝对定位结合变形（transform）
负外边距
负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。负外边距的具体行为取决于设置在元素的哪边
外边距折叠
当顶部和底部的外边距相邻时，就会重叠，产生单个外边距，数值取其中最大者。这种现象被称作折叠。
-
文字折叠：外边距折叠的主要原因与包含文字的块之间的间隔相关。比如，段落
<p>默认有1em的上外边距和1em的下外边距，当前后叠放两个段落时，它们的外边距不会相加产生一个2em的间距，而会折叠，只产生1em的间隔。 -
多个外边距折叠：即使两个元素不是相邻的兄弟节点；或用额外的div将段落包裹，只要没有其他CSS的影响，所有相邻的顶部和底部外边距都会折叠。举个例子
<h2>qqqqq</h2> <div> <p>aaaaaaa</p> </div>有三个不同的外边距折叠到一块了：
<h2>底部的外边距、<div>顶部的外边距、<p>顶部的外边距。计算值分别是19.92px、0px、16px。因此最终间隔还是19.92px，也就是三者中最大的值。 -
防止外边距折叠
- 对容器使用overflow: auto（或者非visible的值），防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。
- 在两个外边距之间加上边框或者内边距，防止它们折叠。
- 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠。
- 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局同理。
- 当元素显示为table-cell时不具备外边距属性，因此它们不会折叠。
容器内元素间距
猫头鹰选择器：不用给网页当前的内容固定外边距，而是应该采取更通用的方式，不管网页结构如何变化都能够生效。它长这样：＊ +＊
下面表示body内所有元素的相邻兄弟元素。有了这个，就不需要每次都给元素添加固定的外边距了
body * + *{
margin-top:1.5em
}
<div class="container">
<div class="sidebar">
<a href="">123</a>
<a href="">456</a>
<a href="">759</a>
</div>
</div>
完整css
body * + *{
margin-top:1.5em
}
.container{
display: flex;
}
.sidebar{
background-color: #ccc;
20%;
padding: 1.5em;
box-sizing: border-box;
}
.sidebar a{
text-align: center;
display: block;
padding: .5em;
background-color: #0072b0;
text-decoration: none;
color: white;
font-weight: bold;
}