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

层叠、优先级和继承

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

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

层叠

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

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

1. 样式表的来源
   • 作者样式表>用户代理样式表
2. 选择器的优先级
   • HTML的行内样式>选择器的样式（ID选择器>类/伪类/属性选择器>标签选择器）
   • 通用选择器（*）和组合器对优先级没有影响

   关于选择器和组合器

   • 复杂选择器：用组合器将多个基础选择器连接起来所组成，如.wrapper .header
   • 后代组合器（空格）：匹配指定元素的后代
   • 子组合器（>）：匹配指定元素的直接后代
   • 相邻兄弟组合器（+）：匹配紧跟在指定元素后面的元素
   • 通用兄弟组合器（~）：匹配所有跟随在指定元素之后的兄弟元素
   • 复合组合器：多个基础选择器直接连起来，如button.active

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

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

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

层叠值

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

继承

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

可以被继承的属性包括：

1. 文本相关的属性：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等
2. 列表的属性：list-style、list-style-type、list-style-position 以及 list-style-image等
3. 表格的边框属性：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属性书写顺序：位置→外观→内容→其它

1. 布局定位属性：display/position/float/overflow/clear等
2. 自身属性：width/height/margin/padding/border/background等
3. 文本属性：color/font-size/text-align/vertical-align/white-space等
4. 其它属性：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