html布局知識點總結

justify-content：屬性用於定義如何沿著主軸方向排列子容器（水平）

align-items：屬性定義如何沿交叉軸排列（垂直)，定義單行排列items

align-content：定義整個容器items在交叉軸的排列方式，對只有單行排列的items不起作用

子元素的flex屬性的屬性值可以是無單位的數字，也可以是有單位的數字還可以是none，子容器會按照flex定義的尺寸比例自動伸縮，如果取值為none則不伸縮

flex-dedication：決定主軸的方向，交叉軸的方向由主軸確定

flex-flow：設定子容器沿著那個方向流動，流動到終點是否換行，是乙個復合屬性，相當於flex-depiction和flex-wrap的組合

flex-basis：表示在不伸縮的情況下子容器的原始尺寸。主軸為橫向代表寬度，主軸為縱向代表高度

flex-grow：子容器彈性伸展的比例

flex-shrink：子容器收縮的比例

order： order是子容器的屬性，它可以更改子元素出現的順序，數值越小，布局越排在前面

可以認為每個html標籤都是乙個方塊，然後這個方塊又包著幾個小方塊，如同盒子一層層的包裹著，這就是所謂的盒模型

盒模型分為w3c標準盒模型和ie盒模型，可以通過box-sizing設定

w3c盒模型：屬性width、height不包含border和padding，只包含content

ie盒模型：屬性width、height包含border和padding，指的是content+padding+border

content-box：標準盒模型，width=content height= content

border-box：ie盒模型，width = border + padding + content ; height = border + padding + content

css的盒子模型由content、padding、border、margin組成。但盒子的大小由content+padding+border這幾部分決定，把margin算進去的是盒子佔據的位置，而不是盒子的大小

外邊距重疊：當兩個垂直外邊距相遇時，它們將形成乙個外邊距，合併後的外邊距高度等於兩個發生合併的外邊距的高度中的較大者。注意：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併，行內框、浮動框或絕對定位之間的外邊距不會合併

bfc（塊級格式化上下文）渲染規則：

10. 如何建立bfc：

單行的行內元素使用：line-height=height、margin：0 auto；

多行元素可以使用table、flex等

水平居中固定寬度：

4. 水平居中寬度未知：

5. 垂直居中

line-height是可以繼承的

normal：同number一樣，會在每個後代元素中計算出實際值：後代元素的font-size*1.2

inherit：繼承父元素和line-height

number：當line-height為純數字無單位的時候，子元素的line-height的值會從父元素繼承line-height值與自己本身的font-size值計算後成為自己的line-height值

line-height:2---->2*16=32px
line-height:2---->2*17=34px
line-height:2---->2*18=36px
line-height:3---->3*18=54px

5.number+em/px/rem：當line-height為純數字帶單位時，子元素的line-height的值會直接繼承父元素的line-height值

line-height:16px---->16px
line-height:20px---->20px
line-height:24px---->24px
line-heithg:2em ---->2*16=32px

有單位數字line-height，如果子元素又跟父元素不一樣子號大小的情況，會有意想不到的效果，例如文字間的遮擋問題

備註：