追根溯源，必须知道的CSS核心概念《深入解析精通CSS》第一部分的读书笔记，主要涉及层叠、优先级、继承、单位、盒模型、

层叠、优先级和继承

👉解决的问题：将特定样式应用到目标元素

body {    //规则
	color: black; //声明。属性：值
	font-size: 20px;
}

层叠

👉解决的问题：规定了如何解决样式的冲突问题

⭐声明优先顺序的计算规则

样式表的来源
- 作者样式表>用户代理样式表
选择器的优先级
- HTML的行内样式>选择器的样式（ID选择器>类/伪类/属性选择器>标签选择器）
- 通用选择器（*）和组合器对优先级没有影响
关于选择器和组合器
- 复杂选择器：用组合器将多个基础选择器连接起来所组成，如.wrapper .header
- 后代组合器（空格）：匹配指定元素的后代
- 子组合器（>）：匹配指定元素的直接后代
- 相邻兄弟组合器（+）：匹配紧跟在指定元素后面的元素
- 通用兄弟组合器（~）：匹配所有跟随在指定元素之后的兄弟元素
- 复合组合器：多个基础选择器直接连起来，如button.active

💡建议最开始设置样式时，最好让选择器的优先级尽可能地低，以方便覆盖修改

源码顺序：声明的来源和优先级相同时，后出现的声明会覆盖之前出现的

⭐链接样式的顺序口诀：LVHA（link, visited, hover, active）

层叠值

👉作为层叠结果，应用到一个元素上的特定属性的值

继承

👉继承属性会顺序传递给后代元素，直到被层叠值覆盖

可以被继承的属性包括：

文本相关的属性：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 关键字：1. 替代层叠值；2. 强制继承不会默认继承的属性
initial 关键字：将属性重置为默认值
- display: initial 等价于 display: inline
- width: initial 等价于width: auto

⭐关于简写的属性

属性需要指定从一个点出发的两个方向的值，就是“XY”，如box-shadow
属性需要指定从一个点出发的四个方向的值，就是“上右下左”，如margin、padding；如果声明结束时，四个值还有未指定的，那么未指定的就取其对边值

单位

绝对单位

1 in（英寸） = 2.54 cm  = 6 pc（派卡）= 25.4 mm= 72 pt （点）= 96 px

相对单位

相对于`font-size`的单位

em
- 定于字号：基于继承来的font-size计算当前字号
- 定义元素大小：基于当前元素的字号font-size计算当前元素大小
⭐em 用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂
rem
- 定义字号：基于根元素的字号（默认16px）

💡 建议用rem设置字号，用px设置边框，用em设置其它大部分属性（尤其内外边距、圆角），用%设置宽度

相对于浏览器视口的单位

vh：视口高度的1%
vw：视口宽度的1%

💡vh和vw用于设置字号，保证元素在不同大小屏幕之间平滑地过渡： font-size: calc(0.5em + 1vw);
vmin：视口高度和宽度中较小者的1%
vmax：视口高度和宽度中较大者的1%

💡 vmin和vmax可保证元素在屏幕方向变化时适应屏幕
无单位的属性
line-height既可以有单位，也可以无单位，区别在于继承方式，通常应该使用无单位的值
- 用无单位的值定义行高：后代元素继承无单位的值，然后基于自身的font-size得到计算值
- 用有单位的值定义行高：后代元素继承它的计算值
自定义属性（CSS变量）
- 定义自定义属性：两个连字符作前缀
- 调用自定义属性：var()函数

💡 CSS属性书写顺序：位置→外观→内容→其它

布局定位属性：display/position/float/overflow/clear等
自身属性：width/height/margin/padding/border/background等
文本属性：color/font-size/text-align/vertical-align/white-space等
其它属性：content/border-radius/cursor/box-shadow/text-shadow等

盒模型

盒模型的相关属性

内边距：盒子边框和内容之间的距离
外边距：两盒子边框之间的距离
- margin和padding的百分比值参照是容器的宽度，而不是高度
内容的宽度和高度：width/height
元素的宽度和高度：width/height+padding+border
元素空间的宽度和高度：width/height+padding+border+margin

元素宽度

盒模型的默认行为与调整
- 添加padding和border会改变元素的宽度和高度，border-sizing属性可以保证给盒子新增padding和border后元素的宽度和高度不变
- content-box中width/height设置的是内容的宽高；而在border-box中，width/height 设置的直接是元素的宽高

全局修改盒模型，且考虑使用带样式第三方组件的代码清单

:root { 
  box-sizing: border-box;  //盒模型默认不会被继承 
} 

*, 
::before, 
::after { 
  box-sizing: inherit;    
}

.third-party-component { 
  box-sizing: content-box; 
}

元素高度

⭐普通文档流是为限定的宽度和无限的高度设计的。容器的高度由内容天然地决定，而不是容器自己决定
- 行内元素和行内块元素跟随内容的方向从左到右排列，当到达容器边缘时会换行
  - 行内元素：span/a/strong/b/i/u/em/del等
  - 行内块元素：img/input/td等
- 块级元素会占据完整的一行，垂直排列，前后都有换行
  - 块级元素：h1/p/div/ul/ol/li等
要想让百分比高度生效，必须给父元素明确定义一个高度，不然会陷入死循环
等高列的实现
- display:table+负外边距
  - table元素的宽度不会默认100%，需要指定
  - margin不会作用于table-cell元素，使用border-spacing设置单元格间距
  - ⭐正的外边距会将容器的边缘往里推，而负的外边距则会将边缘往外拉
- display:flex
  - Flexbox默认产生等高的子元素，外边距也生效

💡除非别无选择，否则不要明确设置元素的高度。建议使用min-height和max-height

外边距

负外边距

👉可以让元素重叠或者拉伸到比容器还宽

如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠
如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来

外边距折叠

只有普通文档流的块级元素才存在折叠；只有上下外边距会产生折叠，左右外边距不会折叠
外边距可以在容器内部折叠也可以在容器内部折叠

💡防止外边距折叠
- 在两个外边距之间加上border或者padding
- 使用 Flexbox 布局和Grid布局
- 对容器使用overflow: auto防止内部元素的外边距跟容器外部的外边距折叠
- 容器为浮动元素、内联块、绝对定位或固定定位
- 元素为不具备外边距属性的表格元素
容器内的元素间距
- 猫头鹰选择器：选中页面上有着相同父级的非第一个子元素
```
body * + * { 
  margin-top: 1.5em; 
}
```
- 通常只在有并列元素，或者有多列布局时才使用猫头鹰选择器设置外边距
💡 外边距典型应用
- 块级元素水平居中：给元素指定宽度+margin: 0 auto
行内元素和行内块元素水平居中：给其父元素添加text-align:center

追根溯源，必须知道的CSS核心概念