深入CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第3天
一. 选择器的特异度(Specificity)
特异度：选择器的特殊程度，越特殊，优先级越高。
- id > (伪)类 > 标签
- 在上面这个例子中，
.btn有0个id，1个类，0个标签；.btn.primary有0个id，2个类，0个标签，因此.btn.primary中的color和background会覆盖.btn中对应的部分。
二. 继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值。
- 一般来说，在CSS中，和文字相关的一些属性(
color,font-size)都是可以继承的，和盒模型相关的一些属性(width)都是不可继承的。 - 可以通过
inherit来显式继承这些不可继承的属性。
三. 初始化
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用
initial关键字显式重置为初始值- background-color：initial
四. CSS求值过程
五. 布局(Layout)
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
1. 布局相关技术
2. 盒模型
- width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box 宽度
- height
- 指定content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box 高度
- 容器有指定的高度时，百分数才有效
- padding
- 指定元素四个方向(顺时针)的内边距
- 百分数相对于容器宽度
- border
- 指定容器边框样式、粗细和颜色
- 👉边框样式、粗细和粗细👈
- margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
👆使用
margin: auto实现水平居中
👆margin collapse：两个盒子之间为100px，不是200px
- border-box
👆
border-box和conten-box的区别
- overflow
- visible
- hidden
- scroll
- auto 当指定宽度和高度时，overflow就可以控制溢出的那部分内容如何去展示。
3. 常规流 Normal Flow
4. 行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
5. 块级排版上下文
- Block Formatting Context(BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
- BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFc不会和浮动元素重叠
6. 块级 vs. 行级
- display属性
- block：块级
- inline：行级
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行。(类似图片)
- none：排版时完全被忽略
7. Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
摆放的流向(👆 👇 👈 👉)
水平和垂直方向的对齐
摆放顺序
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow：有剩余空间时的伸展能力
- flex-shrink：容器空间不足时收缩的能力
- flex-basis：没有伸展或收缩时的基础长度
8. Grid布局
9. float 浮动
10. position 属性
六. 学习CSS的几点建议
- 充分利用MDN和W3C CSS 规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还爱不断出现
