#前端学习之CSS|青训营笔记
青训营第二天
深入理解CSS
选择器的特异度
当多个选择器同时选中一个元素时，特异度最高的选择器起效
方法：
选择器特异度高低按照选择器中id>（伪）类>标签的等级次序从高到低排，先对比id个数，个数相同对比伪）类个数，以此类推。
继承
某些属性会自动继承其父元素的值，除非显示指定一个值
显示继承，给属性添加inherit的值
初始值：CSS中每个属性都有一个初始值；可以用initial显示将属性值初始化
CSS求值过程
布局
确定大小和位置的算法
盒模型
- content box 指定width height，取值为长度(xx px)；百分数(60%)；auto(根据其他属性）
- padding 指定四个方向内边距，padding-top;left;hight;bottom
- border 指定边框样式style，粗细width，颜色color,四个方向和padding一样
- （插入，当四个边框颜色不一，更改宽度大小和透明度可以画出三角形）
- margin 指定外边距同padding
box-sizing:border-box属性
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）添加上box-sizing:border-box属性，则padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里
分类
- 常规流：行级，块级，表格布局，FlexBox,Grid布局
- 浮动
- 绝对定位
行级，块级
| 行级 | 块级 |
|---|---|
| 和其他行级盒子可并行 | 不可 |
| 盒模型中width和height不适用 | 所有 |
| 行级盒子；内容多行 | 块级盒子 |
display属性：
- block 块级
- inline 行级
- inline-block 本身行级，但可设宽高；整体不拆
- none 排版时忽略
FlexBox布局
可控制子级盒子
- 摆放流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
