第三天 深入css
初始值
CSS 中，每个属性都有一个初始值
·background-color 的初始值为 ·transparentmarginleft 的初始值为0
可以使用 initial 关键字显式重置为初始值
·background-color: initial
计算值是可以直接算出来的
什么是布局
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关的技术
长规流，浮动，绝对定位
width
·指定content box 宽度
·取值为长度、百分数、auto
·auto 由浏览器根据其它属性确定。
·百分数相对于容器的 content box 宽度
height
·指定content box 高度
·取值为长度、百分数、auto
·auto 取值由内容计算得来
·百分数相对于容器的 content box
·高度容器有指定的高度时，百分数才生效
padding
·指定元素四个方向的内边距
·百分数相对于容器宽度
border
指定容器边框样式、粗细和颜色
margin
指定元素四个方向的外边距
·取值可以是长度、百分数、auto
·百分数相对于容器宽度
代码
控制超出部分
css下
会独占一行,默认情况下,其宽度自动填满其父元素宽度
块级元素可以设置width,height属性.
块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin和padding属性.
块级元素对应于display:block.
不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行
行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
行级排版上下文
·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 是什么?
一种新的排版上下文
它可以控制子级盒子的:
·摆放的流向（上下左右)
·摆放顺序
·盒子宽度和高度
·水平和垂直方向的对齐
是否允许折行
