深入css笔记 |青训营

不同选择器可以选中同一元素，设置不同样式时，最终显示与选择器优先级有关。【特异度】

继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值。和文字相关的一些属性都是可以继承的，与盒模型相关的一些属性都是不可继承的。
- 显式继承：
```
*{
	box-sizing:inherit;
}
html{
	box-sizing:border-box;
}
.some-widget{
	box-sizing:content-box;
}
```
  box-sizing是一个不可继承的属性，使其变为可继承属性，首先指定所有元素的box-sizing属性都为inherit，这时所有的元素都从父级去继承，我们可以通过一个容器去改变一个容器内部的box-sizing。
- 初始值：每一个属性在规定里规范好的初始值，当一个元素不可继承并且我们并没有给他设置初始值时，会用到初始值。背景颜色的初始值是透明...
css的样式是怎么被计算出来的？（css的求值过程）
- 首先浏览器拿到HTML之后会进行一个解析，解析为DOM树。解析过程中会发现一些link、style收集起来作为样式规则。
- 浏览器为了布局渲染，会找到每一个页面，每一个元素对应的css值。将规则都拿到后，会对规则进行筛选：选择器匹配、符合当前media等。
- 流程图：

css中会用到的三种布局方式：
- 常规流（overflow）
  - 行级
  - 块级
    - inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会拆成很多行
    - 根元素、浮动和绝对定位的元素会脱离常规流；其他元素都在常规流之中；常规流中的盒子，在某种排版上下文参与布局。
      - 行级排版上下文（IFC）：只包含行级盒子，如：span中只有文字
        
        IFC排版规则：
        
        盒子在一行内水平摆放
        
        一行放不下时，换行显示
        
        overflow-wrap:break-word;//在文字超出容器时换行
        
        text-align决定一行内盒子的水平对齐
        
        vertical-align决定一个盒子在行内的垂直对齐
        
        避开浮动（float）元素
      - 块级排版上下文（BFC）：
        
        根元素
        
        浮动、绝对定位、inline-block
        
        Flex子项和Grid子项
        
        overflow值不是visible的块盒overflow:hidden;
        
        display:flow-root;
        
        BFC内的排版规则：
        
        盒子从上到下摆放
        
        垂直margin合并
        
        BFC内的盒子的margin不会和外面的合并
        
        BFC不会和浮动元素重叠
      - 在常规流里面，一个子集的盒子只能都是行级或者都是块级。块级从上到下摆放，行级从左到右。
      - <span> <div></div> </span>
        
        他们的父级既含有行级又含有块级，去创建两个匿名的块级盒子把他们包起来
  - 表格布局
    - FlexBox：
      - 可以控制子级盒子的：
        
        摆放的流向
        
        摆放顺序
        
        盒子高度和宽度
        
        水平和垂直方向的对齐
        
        是否允许拆行
        
        flex-gorw:数字弹性大小
  - Grid布局
    - Flex是一个单一方向的布局方式，但是Grid是二维的
    - display:grid;使元素生成一个块级的Grid容器
    - 使用grid-template相关属性将容器划分为网络，grid-template-columns，grid-template-rows
    - 设置每一个子项占哪些行/列
- 浮动（float）
- 绝对定位（position : absolute;)
padding的百分数是相对于容器宽度width
margin collapse：margin在垂直方向上会有一个合并，取二者中的最大值
```
*{
	box-sizing:border-box;
}
```
使用较多。

Flex布局：

在写项目的过程中，真的能够切实的感受到Flex布局的方便之处，因为它是已经成套的模板，我们不需要明白他是如何实现的，只需要使用就可以了。

Flex适合做小型的布局，但是要注意的是在设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。当布局涉及到不定宽度，分布对⻬的场景时，我们可以优先考虑弹性盒布局。我在做导航栏的时候就经常使用Flex布局，很方便。

深入css笔记 | 青训营

深入css笔记 |青训营

css中会用到的三种布局方式：

Flex布局：