这是我参与「第四届青训营」笔记创作活动的第11天，学习内容为《深入CSS》
1. CSS优先级：
根据特异度
# id > 伪类 > 标签
100 10 1
2. 继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
2.1 显示继承
有些元素不可继承
这就要使用 inherit
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
2.2 初始值
CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color: initial
3. CSS求值过程
每一个元素我在寻找一个特定的属性时，就需要经历这么一个长的过程
resolve ： 还有图片相对路径转成绝对路径
formatting之后：init，inherit，60%这些进行转换
计算值：浏览器拿到的，我通过分析css，我就知道你这个font-szie是多少的。
但是又一些情况，你单纯拿到css和背景图等，你算不出来，只能在formatting阶段进行。
比如宽度100%，这种实际布局的时候在能够计算的。
继承父亲的计算值：不仅仅是父亲设置的值，还有行高等
4. 布局相关技术
4.1 常规流
行级 块级 表格布局 FlexBox Grid布局
盒子模型
margin - border - padding - content (width - height)
4.2 width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
4.3 height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
4.4 padding
- 指定元素四个方向的内边距(上右左下）)
- 百分数相对于容器宽度
4.5 border
-
三种属性
- border-width
- border-style
- border-color
-
四个方向
- border-top
- boder-right
- border-bottom
- border-left
border: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 2px dotted red;
border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;
border-left-width: 3px;
border-top-color: #f00;
4.6 margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
4.7 使用 margin:auto 水平居中
4.8 margin collapse
margin在垂直方向上会塌陷 合并：只会取一个较大的
如果不需要的话，可以创建BFC
4.9 box-sizing: border-box
Content-box算的是content的width和hegith
如果是box，那就是包括了border+content的宽高
5. overflow
scroll visitable hidden
5.1 块级 vs. 行级
下面是css的概念
| Block Level Box | Inline Level Box |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
下面是HTML的概念
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | - 生成行级盒子 - 内容分散在多个行盒 (line box) 中 |
| body、article、div、main、section、h1-6、p、ul、li 等 | span、em、strong、cite、code 等 |
| display: block | display: inline |
5.2 display 属性
| block | 块级盒子 |
|---|---|
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
5.3 常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
5.4 行级排版上下文
一行放不下，就换行。
-
Inline Formatting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
5.5 overflow-wrap: break-word 太长单词可以换行
5.6 块级排版上下文
-
Block Formatting Context (BFC)
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC 内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
行级：从左到右 块级：从上到下
都有：遇到块级，就换行
5.7 QA:
1、水印思路：整个页面上 去盖一个半透明的水印层，这个水印层 可以 去 重叠地去显示一些文字，但是这个水印层不会影响页面的一个交互。可以通过 css里pointer-event，来忽略水印层的鼠标事件。
2、tailwind、unocss等相比传统CSS工程化有什么优势
组件化地开发优势
3、响应式布局
rem这个方案，如果是从手机适配到电脑，宽方位的 用到 medium等
4、预处理器
5.8 Flex Box 是什么？
-
一种新的排版上下文
-
它可以控制子级盒子的：
- 摆放的流向 ( → ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
6. Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
6.1 flex
| flex: 1 | flex-grow: 1 |
|---|---|
| flex: 100px | flex-basis: 100px |
| flex: 2 1 | flex-grow: 2; flex-shrink: 1 |
| flex: 1 100px | flex-grow: 1; flex-basis: 100px |
| flex: 2 0 100px | flex-grow: 2; flex-shrink: 0; flex-basis: 100px |
| flex: auto | flex: 1 1 auto |
| flex: none | flex: 0 0 auto |
6.2 Flex Box VS Grid 这个更重要
6.3 浮动
6.4 Float 浮动性现在不是很重要
Position属性
relative: 想对自身原本位偏移，不脱离文档流
Absolute 绝对定位，相对非static祖先元素定位
static 默认值，非定位元素
fixed 相对于视口绝对定位 还有一个粘性定位，stick
6.5 绝对定位
MDN
回流重绘
先通过layout算出来每个元素的宽高
在进行一个绘制，颜色，边框
重排 relayout 因为js，改变了元素的布局高度，layout就得重新触发
改了color，不会影响位置，就不用回流，就直接重绘就好
transclate gpu 3D
为什么获取元素的一些位置属性，如offsetTop会引起重排
浏览器内部的原因
之前老问css局中？
flex或者grid就很容易实现
CSS Sprites
优化的技巧，用的也不多了
