詳解CSS盒模型
一、盒模型的型別
分為兩種,標準盒模型和IE盒模型。
二、上述兩種盒模型的區別
計算寬高的方式不同。
標準盒模型寬高是content的寬高
IE盒模型寬高包含了content、padding和border。
三、如何轉換這兩種盒模型
就是將標準盒模型變為IE盒模型。或者換過來
使用box-sizing屬性:content-box為標準盒模型。border-box為IE盒模型。
四,如何在JS中獲取任意一個DOM的寬高
1.Element.style.width/height 該方法只能獲取內聯樣式設定的寬高。
2.window.getComputedStyle(dom).width/height 該方法相容IE和現代瀏覽器
3.dom.getBoundingClientRect().width/height/left/top
該方法會返回四個值,left和top是相對於視窗的偏移距離。
區別於offsetTop和left,offset方法是相對於父級元素有設定定位屬性的偏移距離,如果都沒有,就相對body元素。
五、什麼是BFC
概念,BFC是塊格式化上下文,是Web頁面中盒模型佈局的CSS渲染模式。
1.什麼時候CSS會建立一個BFC呢?
浮動,絕對定位元素,inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素,(除了這個值已經被傳到了視口的時候)將建立一個新的塊級格式化上下文。換句話說,只要一個元素滿足以下任意一種情況,就會新建一個BFC。
*float不為none。
*overflow不為visible。
*position不為relative或static
*display的值為inline-block,table-cell,table-caption,flex或inline-flex
2.BFC有什麼作用呢?
I,屬於同一個BFC的毗鄰塊元素,垂直外邊距會發生摺疊。新的外邊距取最大值。
II,如果不想外邊距發生摺疊,可以建立一個新的BFC來避免。
III,使用BFC來包含浮動元素。且還有一個作用,會使浮動的元素迴歸常規的文件流。
IV,解決文字的環繞問題
V.在區域性中使用BFC