Day3 深入CSS

选择器的特异性（Specificity）--->优先级

#(id) > .(伪类) > E(标签)

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值
可通过以下代码进行显式继承

*{
    box-sizing:inherit;
}
html{
    box-sizing:border-box;
}
.some-widget{
    box-sizing:content-box;
}
复制代码

初始值

CSS中每一个属性都有初始值
·background-color 的初始值为transparent
·magrin-left的初始值为0
可以使用initial关键字显式重置为初始值
·background-color：initial

布局（layout）

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
相关技术：

(1)常规流：行级、块级、表格布局、FlexBox、Grid布局

width:指定content box宽度取值为长度、百分数、auto且auto的取值由内容计算得来
height:指定content box高度取值为长度、百分数、auto且auto的取值由内容计算得来
padding:指定元素四个方向的内边距、百分数相对于容器
margin:指定元素四个方向的外边距、百分数相对于容器
margin：auto可实现在父容器内水平居中

border:指定容器边框样式、粗细和颜色
box-sizing:border-box--->宽度和高度包含了padding的值
块级盒子：不和其他盒子并列摆放
行级盒子：和其他行级盒子一起放在一行或拆开成多行（盒模型中的width、height不适用）

块级元素：生成块级盒子

如：body、article、div、main、section、h1-6、p、ul、li等

行级元素:生成行级盒子

如：span、em、strong、cite、code等

display属性

block-块级盒子
inline-行级盒子
inline-block-本身是行级、可以放在行盒中，可以设置宽高
none:取消样式

行级排版上下文

Inline Formatting Context（IFC）
只包含行级盒子会创建IFC
IFC的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定行内盒子的水平对齐
- vertical-align决定一个盒子在行内垂直对齐
- 避开浮动元素

块级排版上下文

Block Formatting Context(BFC)
某些容器会创建BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display：flow-root
BFC的排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外部的合并
- BFC不会和浮动元素重叠

Flex Box

一种新的排版上下文
它可以控制子级盒子的
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

学习CSS的建议

充分利用MDN和W3C CSS 规范
保持好奇心，善用浏览器的开发者工具
持续学习，CSS新特性还在不断出现

深入CSS | 青训营