css设置样式后哪个生效的？？？
哪条规则生效-选择器优先级问题？
选择器的特异度（specificity）
继承（父元素的计算值），除非指定（和文字相关可以继承，和模型相关不能继承）
-
显示继承（inherit）
-
box-sizing（不可继承）
- *box-sizing:inherit
初始值（一个不可继承 && 没有设置属性）
-
background-color:transparent(透明的)
-
margin-left:0
-
可以使用initial重置为初始值
- background-color：initial
html-解析>DOM树-->找到每个元素的属性
布局layout？
header，nav，content，footer
依据元素、容器、内容、兄弟节点的关系去确定
技术：
常规流flow（块级、行级的规则、表格布局、flexbox、grid布局）
盒模型:- margin，border，padding，height，width属性
- width设置的是内容的宽度，取值px,%,auto(容器有高度时，%才生效，%相对于content box确定）
- padding-top,right,left,bottom，padding指定四个值为四个方向的内边距
- border---边框样式（border-style）、粗细（border-width）、颜色（border-color）
- margin（外边距）
- margin collapse垂直方向边距的重叠取两个相邻盒子的最大值
- content-box和border-box的区别
- overflow(溢出）
- 默认展示（visible）
- hidden(隐藏）
- auto(超出滚动条）
-
块级vs行级盒子
-
Block level box -不和其他盒子并列摆放（不会放在同一行）-适用所有盒模型
- 块级元素：body\article\div\main\section\h1~h6\p\ul\li
- display:block转化为块级盒子
-
Inline level box -可以同行摆放-width、height不适用（由内容决定）
- 行级元素：span/em/strong/cite/code
- display:inline转化为行级盒
-
-
display属性
- Inline 行级盒子
- block 块级盒子
- inline-block:本身是行级，可以放在行盒中，整体只能放在一行，可以设置宽高
- none排版时完全忽略
Flex box（display:flex）默认从左到右（一维）
-
主轴（横向）和侧轴（纵向）
-
主轴（justify-content）：
- flex-strat
- flex-end
- center
- space-around
- space-evenly
- space-between
-
侧轴（align-items）:
- flex-start
- flex-end
- center
- stretch
- baseline
-
-
Flexibility
- 设置子项的弹性，容器有剩余空间会伸展，空间不够会收缩。
- flex-grow:有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
grid布局（二维）
- dispaly:grid（使元素生成一个块级的grid容器）
- 使用grid-template相关属性将容器划分为网络（colums列，rows行）
-
设置每一个子项占哪些行列
-
grid line网格线
-
grid-row-start:1;
-
grid-column-start:1;
-
grid-row-end:3;
-
grid-column-end:3;
-
或者grid-area:1/1/3/3;
-
-
float浮动
实现文字环绕效果
- float:left;
绝对定位
-
position属性
-
static 默认值，非定位元素
-
relative 相对于原本位置偏移，不脱离文档流
- 使用top,left,bottom,right设置偏移长度
- 其他元素当他没有偏移
-
absolute 绝对定位，相对于static祖先元素定位
- 当绝对定位不存在，脱离常规流
-
fixed相对于窗口绝对定位
-
这都是css中比较重要的部分，代码部分可以自己练习。
