优先级与继承
优先级
优先级的计算： ID + 类 + 元素
继承
和文字相关的一般都可以继承，和盒模型相关的一般不能继承
显式继承
inherit(让原来不可继承的可继承)
初始值
每个属性都有
- background-color初始值是transparent
- margin-left是0
使用initial重置为初始值
CSS求值过程
resolving: 通过html和css能直接算出来的
formatting: 需要根据实际情况确定（如屏幕宽度的80%）
继承是继承父元素的计算值
布局
确定内容大小和位置的算法
相关技术
常规流：块级、行级、表格、flex、 grid
盒模型（content box）
border-box 的width,height是包括边框的
width
- 默认是content box的宽度
- 取值百分数是相对于容器的content box的宽度
height
- 同width
- 只是当容器有指定的高度时，百分数才生效
padding
- 两个值时是上下，四个值是上右下左，
- 取值百分数是相对于容器的content box的宽度
border
- 样式，粗细，颜色
- 当四个边颜色不同时，角部45度连接（当content和padding都为0时就是三角形）
margin
- margin:auto 是水平居中的效果
- margin collapse 两个外边距相接的元素，外边距将合并为最大的单个外边距的大小
overflow 当溢出时的显示方式：visible hidden scroll
块级盒子
- 不与其他盒子并列摆放
- 使用所有的盒模型属性
行级盒子
- 和其他行级盒子放在一行或拆开成多行
- 盒模型的width和height不适用（根据内容决定）
块级元素（html中的标签）
- 生成块级盒子
- body article div main section h1-6 p ul li
- display: block
行级元素
- 生成行级盒子，内容分散再多个行盒中
- span em strong cite code
- display: inline
display属性
- block
- inline
- inline-block 和其他行级元素可以放在一行，但是其中的内容作为一个整体不会被拆散成多行（可设置宽高）
- none
行级排版上下文（IFC，inline formatting context）
只包含行级盒子的容器会创建一个IFC
规则
单词、图片、inline-block是原子的，在换行时不会被分开
overflow-wrap：break-word；可以使它们分开
块级排版上下文（BFC，block formatting context）
创建BFC的情况
规则
当容器里面既有块级又有行级盒子，会将行级盒子放到匿名的块级盒子里
flex box上下文
可以控制子集盒子的排列方式
主轴与侧轴（交叉轴）
摆放的流向（主轴）： flex-direction: row/ row-reverse/ column/ column-reverse
对齐：
- 主轴上的对齐： justify-content
- 侧轴上的对齐： align-items (默认值是stretch)
- align-self 可以设置和容器不同的对齐方式
- order 元素摆放的排序：按主轴方向从小到大排列
flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸 展；容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力 (0就是刚性的，不会被压缩)
- flex-basis没有伸展或收缩时的基础长度
- 缩写
grid
划分网格
grid-template-columnsgrid-template-rows- 值：
px/ auto/ fr(fragment即剩余空间占据的份数)
网格线的确定
- 第一条线编号为1
grid-row-startgrid-column-startgrid-row-endgrid-column-end- 简写
grid-area : 1/1/3/3
浮动
文字环绕图片的效果
float : left
绝对定位
position属性
static默认值，非定位元素relative不脱离文档流，相对于自身原本位置偏移
absolute绝对定位，相对于非static祖先元素定位，不会对流内元素造成影响
fixed相对于视口绝对定位（应用：滚动时导航栏和返回顶部按钮始终保持原位）
