这是我参与「第四届青训营」笔记创作活动的的第2天

1.思维框架

布局 Layout是CSS学习的重中之重，因此我们再用一张思维导图来更好的展现其逻辑

aonaotu-download (2).png

2.要点阐释

1.行高line-height

行高：两行文字基准线baseline之间的距离倍数

我们一般常用的表达式是倍数：即行高是自身字体的多少倍,不会在继承时产生不确定的结果

行高与可及性

主段落内容的 line-height 至少应为 1.5。这将有助于改善低可视条件下的体验，也对认知阻碍者，如阅读困难者有帮助。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

2.选择器的特异度

本质上是更特殊会胜出

不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配选择器

选择器	千位	百位	十位	个位	优先级
`h1`	0	0	0	1	0001
`h1 + p::first-letter`	0	0	0	3	0003
`li > a[href*="en-US"] > .inline-warning`	0	0	2	2	0022
`#identifier`	0	1	0	0	0100
内联样式	1	0	0	0	1000

3.理解继承

Strong没有设置颜色所以它用的是父级标签p的颜色

一般，文字相关属性都是可继承的

盒模型相关的属性都是不可继承的 像 widths, margins, padding, 和 borders 不会被继承

当然我们可以通过inherit的值设置来让原本不可继承的属性可以被继承

4.CSS求值过程

这里需要注意的是计算值和使用值的区别

计算值：光看HTML和CSS文件就能算出来的值，继承也是继承父级的计算值
使用值：需要看实际渲染环境才能计算出的值，比如实际视口宽度

5.display:inline-block

display:inline-block在内联和块之间提供了一个中间状态。

如果不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免重叠，那么该中间状态就会极为有用。

一个元素使用 display: inline-block，可以实现块级的部分效果：

设置width 和height 属性会生效。
padding, margin, 以及border 会推开其他元素。

但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大。

1个小技巧

<a> 是像 <span> 一样的内联元素；可以使用 display: inline-block 来设置内边距，使链接具有更大的命中区域

设置 display: inline-block 的意义在于，可以让链接元素是通过内边距推开其他元素，这样就避免了内联元素本身的重叠

6.盒模型

CSS 中组成一个块级盒子需要：

Content box: 这个区域是用来显示内容，大小可以通过设置 width和 height
Padding box: 包围在内容区域外部的空白区域；大小通过 padding相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin相关属性设置。

margin不计入实际大小 —— 它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。

实际项目和各类框架中，用border-box更多一些

7.溢出

CSS 中万物皆盒

因此我们可以通过给width和height（或者 inline-size和 block-size）赋值的方式来约束盒子的尺寸。

当我们往盒子里面塞太多东西的时候，就会发生溢出。

CSS默认会溢出

CSS 就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰

这时候无论是否真正需要用滚动条，页面上都会显示一个滚动条

为了改善这一点，可以使用overflow: auto此时由浏览器根据内容决定是否显示滚动条

在我们使用scroll或者auto的时候，我们建立了一个块级排版上下文 Block Formatting Context，BFC）

8.块格式上下文

使用块布局规则的最外层元素<html>建立第一个或初始块格式上下文BFC。

参与BFC的元素遵循CSS Box Model列出的规则，它定义了元素的边距、边框和填充如何在相同的上下文中与其他块交互。

即html元素块中的每个元素都按照正常流来布局，遵循块和内联布局的规则。

html元素并不是唯一能够创建BFC的元素。

任何块级元素都可以通过应用特定的CSS属性来创建BFC。

我们为何要创建BFC？

因为一个新的BFC将表现得很像最外层的文档
因为它成为主布局中的一个迷你布局
BFC包含了它内部的所有内容
float和clear只适用于相同格式上下文中的项
而margin只在相同格式上下文中的元素之间折叠

如何创建BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display:flow-root

其中，使用 display: flow-root （或 display: flow-root list-item）将创建一个新的BFC，而不会产生任何其他潜在的问题副作用。

比如不会有滚动条或者剪切阴影

这在本质上类似于创建了一个新的根元素（如 <html>所做）

9.行内格式上下文

Inline formatting contexts，IFC IFC存在于其他格式化上下文中

我们可以把IFC理解为一个段落的上下文

段落创建了一个IFC，其中在文本中使用诸如 <strong>、<a>或 <span>元素等内容

盒模型并不完全适用于IFC

3.小结

通过这次CSS的学习，老师很好的帮助我梳理了关于CSS的相关知识，起到了查漏补缺的作用

我们下期再见

参考文档

CSS学习要点 ｜ 青训营笔记