深入css 在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。课程重点

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术
CSS 盒模型 - 行级
CSS 盒模型 - 块级

article与.title，哪条规则生效？————特异度（选择器特殊程度） 1.

拉森火山国家公园

2. .title{ color:blue; }

article h1{
color:red;
}
</style>

选择器的特异度： # . E id （伪）类标签 #nav.list li a:link 1 2 2 .hd ul.links a 0 2 2

继承：
某些元素会自动继承父元素的计算值，除非显式指定一个值（一般文字相关属性可继承，和盒魔性相关属性不可继承）

显示继承：使用关键字inherit，显示从父元素继承

初始值：
css中每个元素都有一个初始值：
background-color 初始值为transparent
margin-left初始值为0

可以使用initial关键字显示重置为初始值： background0-color：initial

declared values：一个元素的某属性可能有0到多个声明值。比如： p{font-size：16px}和p.text{font-size：1.2em}

布局（layout）：
1.确定内容的大小和位置算法
2.依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术：
常规流（文档流）： 行级 块级 表格布局 flexbox grid布局
  盒模型：margin border padding width height——> content

  width：
1.指定content box宽度
2.取值为长度、百分数、auto
3.auto取值由内容计算得来
4.百分数相对于容器的content box 高度
5.容器有指定高度时，百分数才生效

padding：
1.指定元素四个方向的内边距
2。百分数相对于容器的宽度

border：
指定容器边框样式、粗细和颜色
三种属性
border——width
border——style
border-color
四个方向
border-top
border-right
border-bottom
border-left

margin
指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度
 
margin collapse
容器内容超出时——overflow： visible hidden scroll 

块级vs。行级
block level box     inline level box
不和其他盒子并列摆放    和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性     盒模型中的width/height不适用

块级元素                  行级元素
生成块级盒子              生成行级盒子
                         内容分散在多个行盒（line box）中
body、article、div、main    span、em、strong、cite、code等
section、h1-6、p、ul、li等

display：block                    display：inline

display属性：
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none     排版时完全被忽略

常规流 normal flow
1.根元素、浮动和绝对定位会脱离常规流
2.其他元素都在常规流之内（in-flow）
3，常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文：
inlineformatting context（ifc）
只包含行级盒子的容器会创建一个ifc

ifc内的排版规则：
1.盒子在一行内水平拜访
2.一行放不下时，换行显示
3，text-align决定一行内盒子的水平对齐
4.vertical-align决定一个盒子在行内的垂直对齐
5.避开浮动（float）元素

块级排版上下文：
block formatting context（bfc）
某些容器会创建一个bfc：

1，根元素 2，浮动、绝对定位、inline-block 3.flex子项和grid子项 4.overflow值不是visible的块盒 5.display：flow-root

bfc内排版规则：
1.盒子从上到下摆放
2.垂直margin合并
3.bfc内盒子的margin不会与外面的合并
4.bfc不会和浮动元素重叠

Flex Box：
1.一种新的排版上下文
2.它可以控制子级盒子的：
1.摆放的流向（→←↑↓）
2，摆放顺序
3.盒子的宽度和高度
4.水平和垂直方向的对齐
5.是否允许拆行

对齐方式：
justify-content
align——items

Flexibility布局：
1.可以设置子项的弹性：当容器有剩余空间时，会伸展，容器空间不够时，会收缩
2.flex-grow有剩余空间时的伸展能力
3.flew-shrink容器空间不足时收缩的能力
4.flex-basis没有伸展或收缩时的基础长度

grid布局
display：grid
1.display：grid使元素生成一个块级的grid容器
2.使用rid-template相关属性将容器划分为网格
3.设置每一个子项占哪些行列
a。划分网络
b。grid line 网格线
grid area

float浮动


绝对定位
position：
1.static 默认值，非定位元素
2.relative 相对自身原本位置的偏移，不脱离文档流：
   a。在常规流里面布局
   b。相对于自己本应该在的位置进行偏移
   c。使用top、left、bottom、right设置偏移长度
   d。流内其他元素当它没有偏移一样布局

3.absolute 绝对定位，相对非static祖先元素定位：
a。脱离常规流
b。相对于最近的非static祖先定位
c。不会对流内元素布局造成影响
4.fixed 相对于视口绝对定位

学习css的几点建议：
1.充分利用MDN和W3C CSS规范
2.保持好奇心，善用浏览器的开发者工具
3，持续学习