这是我参与「第五届青训营 」伴学笔记创作活动的第 N 天
深入CSS
在多个选择器同时进行时选择哪个选择器的值
特异度：选择器的特殊程度，越特殊的优先级越高
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值，一般来说和文字相关的都可以继承，比如color，跟核相关的都不能继承
显式继承
*{ box-sizing:inherit; }
初始值
CSS中，每个属性都有一个初始值 background-color的初始值为transparent margin-left的初始值为0 可以使用initial关键字显式重置为初始值 background-color:initial
CSS求值过程 DOM树和样式规则组成filtering对应用到该页面的规则用以下条件进行筛选：选择器匹配、属性有效、符合当前media等
得到声明值：Declared Values，一个元素的某属性可能有0到多个声明值。比如：p{font-size:16px}和p.text{font-size:1.2em}
cascading：按照来源、limportant、选择器特异性、书写顺序等选出优先级最高的一个属性值
得到层叠值：Cascaded Value，在层叠过程中，赢得优先级比赛的那个纸。比如1.2em
defaulting：当层叠值为空的时候，使用继承或初始值
得到指定值：Specified Value，经过cascading和defaulting之后，保证指定值一定不为空
resolving：将一些相对值或者关键字转化成绝对值，比如em转为px，相对路径转为绝对路径
得到计算值：Computed Value，一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值。比如60%
formatting：将计算值进一步转换，比如关键字、百分比等都转为绝对值
得到使用值：Used Value，进行实际布局时使用的值，不会再有相对值或关键字。比如400.2px
constraining：将小数像素值转为整数
得到实际值：渲染时实际生效的值，比如400px
继承是继承父级的计算值
布局（Layout）是什么？
确定内容的大小和位置的算法 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术 常规流；浮动；绝对定位
常规流 行级；块级；表格布局；FlexBox；Grid布局
盒模型 带有内边距和外边距
width 指定content box宽度；取值为长度、百分数、auto；auto由浏览器根据其他属性确定；百分数相对于容器的content box宽度；容器有制定的高度时，百分数才生效
padding top、left、right、bottom 制定元素四个方向的内边距；百分数相对于容器宽度
border 制定容器边框样式、粗细和颜色 三种属性：border-width;border-style;border-color 四个方向：border-top;border-right;border-bottom;border-left
margin 指定元素四个方向的外边距；取值可以是长度、百分数、auto；百分数相对于容器宽度 使用margin:auto水平居中 margin collapse有相邻的外边距时选取边距中比较大的那个值
box-sizing:border-box 指定了宽和高是制定了border喝padding在内的宽和高
overflow visible：默认值，内容会超出容器边界。 hidden：内容会被隐藏，不会显示出来。 scroll：内容会被保留，并在容器边界内添加滚动条。 auto：当内容超出容器边界时，会自动添加滚动条。 overflow属性不仅仅可以控制在水平方向上的溢出，还可以控制垂直方向上的溢出，这样可以使用overflow-x 和 overflow-y分别控制。
需要注意的是当一个元素使用了 overflow:scroll 或 overflow:auto，子元素设置的 position:absolute 就会相对于该元素来定位，而不是相对于最近的非static祖先元素。
还有，如果容器的高度和宽度是由内容来决定的，那么这时候溢出会被隐藏。
总结，overflow 是用来处理元素内容溢出的问题，通过设置不同的值可以实现不同的效果，来保证页面的美观性
块级&行级
块级（Block Level Box）不和其他盒子并列排放，适用所有的盒模型属性
生成块级盒子
行级（Inline Level Box）和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
生成行级盒子，内容分散在多个行盒（line box）中
display属性
block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none排版时完全被忽略
常规流Normal Flow
根元素、浮动和据对定位的元素会脱离常规流
其他元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
Inline Formatting Context(IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则： 盒子在一行内水平摆放；一行放不下时，换行显示；text-align决定一行内盒子的水平对齐；vertical-align决定一个盒子在行内的垂直对齐；避开浮动(float)元素*
块级排版上下文
Block Formatting Context(BFC)
某些容器会创建一个BFC： 根元素；浮动、绝对定位、inline-block；Flex子项和Grid子项；overflow值不是visible的块盒；display,flow-root
BFC内的排版规则
盒子从上到下摆放；垂直margin合并；BFC内盒子的margin不会与外面的合并；BFC不会和浮动元素重叠
行级和块级只能从上到下进行排版
Flex Box
可以控制子级盒子的： 摆放的流向（➡⬅⬆⬇）；摆放顺序；盒子宽度和高度；水平和垂直方向的对齐；是否允许折行
在对齐上有主轴与侧轴
主轴（横向
justify-content flex-start左对齐；flex-end右对齐；center居中；space-between贴左右侧边分布；space-around左右留白分布；space-evenly左右留更多白分布
侧轴（纵向
align-items flex-start上对齐；flex-end下对齐；center居中对齐；stretch拉伸对齐；baseline首行文字对齐
Flexibility
可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。 flex-grow有剩余空间时的伸展能力 flex-shrink容器空间不足时收缩的能力 flex-basis没有伸展或收缩时的基础长度
Grid布局
display:grid display:grid使元素生成一个块级的Grid容器 使用grid-template相关属性将容器划分为网格 设置每一个子项占哪些行/列
划分网格
grid-template-columns列宽度 grid-template-rows行高度
grid line网格线
grid-area：1/1/3/3；
float浮动
放上图片后，原本的p标签内容就会围绕在图片周围
绝对定位
position属性 static默认值，非定位元素；relative相对自身原本位置偏移，不脱离文档流；absolute绝对定位，相对非static祖先元素定位；fixed相对于视口绝对定位
position:relative
在常规流里面布局；相对于自己本应该在的位置进行偏移；使用top、left、bottom、right设置偏移长度；流内其他元素当他没有偏移一样布局
position:absolute
脱离常规流；相对于最近的非static祖先定位；不会对流内元素布局造成影响
fixed
固定在top（类似导航栏
在前端中要充分利用MDN和W3C CSS规范
