第三节课笔记   

深入css 上

css中的选择器

多个选择器选到同一个元素的相同样式 根据特异度来选中 选择器越特殊他的优先级就越高

继承

某些属性会自动继承其父元素的计算值，除非指定一个值，一般来说css里面和文字相关的都是可以继承的，盒模型是不可以继承的

显示继承

*{
    box-sizing:inherit // 让原本不可继承的 变成可以继承
}

所有的元素都从父元素继承 如果一直没有找到父级，就会用到初始值

初始值

css中，每个属性都有一个初始值
    background-color的初始值为transparent
    margin-left的初始值为0
可以使用initial关键字显示重置为初始值
    background-color：initial
    

css求值过程

布局（layout）是什么？

确定内容的大小和位置的算法

依据元素，容器，兄弟节点和内容等信息来计算

布局相关技术

1.常规流

行级 块级 表格布局 Flexbox布局 Gridbuju

2.浮动

3.绝对定位

css盒模型

深入css 下

块级

Block Level Box

不和其他盒子并列摆放，适用于所有的盒模型属性

块级排版 BFC（Vlock Formatting Context）

• 盒子从上到下摆放
• 垂直margin合并
• BFC内盒子的margin不会与外面的合并
• BFC不会和浮动元素重叠

行级

Inline Level Box

和其它行级盒子一起放在一行或拆开成行 盒模型中的width height不适用

行级排版 IFC（Inline Formatting Context）

• 盒子在一行内水平摆放
• 一行放不下时，换行显示
• textalign决定一行盒子的水平对齐
• 避开浮动（float）元素

inline-block

本身是行级，可以放在行盒子中；可以设置宽高；作为一个和整体不会被拆成散成多行

Flex Box是什么？

• 一种新的排版上下文
• 他可以控制子级盒子的：
• • 摆放方向
• • 摆放顺序
• • 盒子的宽度和高度
• • 水平和垂直方向的对齐
• • 是否允许折行