1. 程式人生 > >詳解CSS盒模型

詳解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