-
margin疊加
- 盒子模型的相鄰元素殿漠、父子元素的垂直方向上的margin會(huì)產(chǎn)生margin塌陷，具體的margin值為一大一小取大，一正一負(fù)取和饮怯。
- 相鄰的盒子模型中蝌衔，如果有一個(gè)是浮動(dòng)的榛泛，則不會(huì)產(chǎn)生margin重疊,水平方向的margin永遠(yuǎn)不會(huì)發(fā)生重疊。
- BFC不會(huì)發(fā)生margin重疊胚委，而且和它的子元素也不會(huì)發(fā)生重疊,但相鄰子元素之間會(huì)發(fā)生重疊挟鸠。
- 兩欄布局的兩個(gè)BFC，float的BFC垂直方向的margin會(huì)和固定的BFC發(fā)生疊加亩冬，float的BFC和固定的BFC頂部對(duì)齊艘希。
- 當(dāng)其父元素設(shè)置了border屬性的時(shí)候，與子元素垂直方向上的margin不會(huì)發(fā)生塌陷硅急。
- 在一個(gè)BFC中的兄弟元素覆享，只要不脫離文檔流，無論如何都會(huì)發(fā)生margin塌陷的問題营袜。
-
tips：margin疊加解決方法
- 在父元素或者兄弟元素之間設(shè)置合適的margin撒顿。
- 使用BFC可以消除父子之間的margin塌陷。
- 可以通過嵌套BFC的方法去消除相鄰元素的margin疊加荚板。
-
BFC
- BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"凤壁。它是一個(gè)獨(dú)立的渲染區(qū)域吩屹，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局拧抖，并且與這個(gè)區(qū)域外部毫不相干煤搜。
- 形成BFC的條件：
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
- BFC規(guī)則：
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置唧席。
- Box垂直方向的距離由margin決定擦盾。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
- 每個(gè)元素的margin box的左邊淌哟， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化迹卢，否 則相反)。即使存在浮動(dòng)也是如此徒仓。
- BFC的區(qū)域不會(huì)與float box重疊腐碱。
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素蓬衡。反之也如此喻杈。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算狰晚。
-
IFC
- 布局規(guī)則：
- 在一個(gè)行內(nèi)格式化上下文中筒饰，盒是一個(gè)接一個(gè)水平放置的，從包含塊的頂部開始
- 這些盒之間的水平margin壁晒，border和padding都有效
- 盒可能以不同的方式豎直對(duì)齊：以它們的底部或者頂部對(duì)齊瓷们，或者以它們里面的文本的基線對(duì)齊
- 行盒：
包含來自同一行的盒的矩形區(qū)域叫做行盒(line box)
line box的寬度由包含塊和float情況決定,一般來說,line box的寬度等于包含塊兩邊之間的寬度,然而float可以插入到包含塊和行盒邊之間,如果有float,那么line box的寬度會(huì)比沒有float時(shí)小
line box的高度由line-height決定,而line box之間的高度各不相同(比如只含文本的line box高度與包含圖片的line box高度之間)
line box的高度能夠容納它包含的所有盒,當(dāng)盒的高度小于行盒的高度(例如,如果盒是baseline對(duì)齊)時(shí),盒的豎直對(duì)齊方式由vertical-align屬性決定
當(dāng)一行的行內(nèi)級(jí)盒的總寬度小于它們所在的line box的寬度時(shí)，它們?cè)谛泻欣锏乃椒植加蓆ext-align屬性決定秒咐。如果該屬性值為justify谬晕，用戶代理可能會(huì)拉伸行內(nèi)盒（不包括inline-table和inline-block盒）里的空白和字（間距）
-
GFC
-
FFC
-
CSS響應(yīng)式格柵系統(tǒng)
- 之前用的float,現(xiàn)在用的flex
-
flex布局
-
布局方法
負(fù)邊距原理：
給一個(gè)不定寬的塊級(jí)框設(shè)置正邊距會(huì)讓他的寬度減小，設(shè)置負(fù)邊距會(huì)讓他的寬度增加携取。float：
浮動(dòng)框的上邊緣會(huì)去貼當(dāng)前行盒的上邊緣或是之前浮動(dòng)框的下邊緣攒钳，左浮動(dòng)框的左邊緣會(huì)去貼包含框的左邊緣，或者他之前的左浮動(dòng)框的右邊緣雷滋。如果當(dāng)前行剩余的空間容不下一個(gè)浮動(dòng)框不撑，他就會(huì)換行。（左浮動(dòng)）晤斩。絕對(duì)定位：
絕對(duì)定位的框完全脫離普通流焕檬。-
常用的布局：
- 彈性布局（flex布局）
- 流式布局（設(shè)置百分比）
- 瀑布流布局（多欄布局，響應(yīng)加載）
- 響應(yīng)式布局（通過媒介查詢加載不同樣式）
- 響應(yīng)式格柵系統(tǒng)（bootstrap）
-
viewport
- layout viewport：瀏覽器默認(rèn)區(qū)域
- visual viewport：可視區(qū)域大小
- ideal viewport：完美適配移動(dòng)設(shè)備的viewport
-
csshack
