盒模型-深入理解盒模型及相關概念

安穩.發表於2019-03-15
模型

Created By JishuBao on 2019-03-15 12:38:22
Recently revised in 2019-03-15 12:38:22

 

  歡迎大家來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址     

文章簡介：

1、盒模型基本概念

2、何為border-box?

3、盒模型的其他屬性

4、JS獲取寬高

5、邊距重疊

6、BFC（邊距重疊解決方案）

一、盒模型基本概念

 盒模型的組成大家肯定都懂,由裡向外content->padding->border->margin。

 盒模型是有2鍾標準的,一個是標準模型,一個是IE模型。

盒模型-深入理解盒模型及相關概念

盒模型-深入理解盒模型及相關概念

 從倆圖不難看出在標準模型中,盒模型的寬高只是內容(content)的寬高。

 而在IE模型中盒模型寬高是內容content+填充padding+邊框border的總寬高。

二、何為border-box?

 背景：先宣告一下運用的場景，假如專案佈局使用的是自適應的佈局方式，div給出的寬度是百分比的形式，即框佔視窗寬度的50%，但邊界和內邊距是用畫素來表示的怎麼辦？為了避免這種問題，可以使用屬性box-sizing來調整框模型。使用border-box，來將框模型更改成這個新的模型(即IE模型)**。

 注意：回顧一下，框的總寬度是width,padding-right,padding-left,border-right以及border-left屬性之和，這就是造成上述背景下，樣式不好調整的原因。

 box-sizing屬性用於更改用於計算元素的寬度和高度預設的CSS盒子模型，可以使用此屬性來模擬不正確支援CSS盒子模型規範的遊覽器行為。

/* 標準模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
複製程式碼

三、盒模型的其他屬性

1.margin、padding設定為百分比形式：

 給div元素的內邊距和外邊距的各個邊設定為5%，意味著“包含元素寬度的5%”，因此，隨著示例輸出視窗的大小增加，內邊距和外邊距也增加了。

2.margin可以接受負數，可以用來引起元素框的重疊：

 注意:外邊距有一個特別的行為被稱作外邊距塌陷：當倆個框彼此接觸時,他們的間距將取倆個相鄰邊界的最大值,而非倆者的總和。

3.背景剪裁(Background clip)屬性:

  background-clip:border-box; 背景被剪裁到邊框盒。

盒模型-深入理解盒模型及相關概念

  background-clip:padding-box; 背景被剪裁到內邊距盒。

盒模型-深入理解盒模型及相關概念

  background-clip:content-box; 背景被剪裁到內容框。

盒模型-深入理解盒模型及相關概念

4.輪廓(outline)：

 一個框的outline是一個看起來像是邊界但又不屬於框模型的東西。它的行為和邊界差不多，但是並不改變框的尺寸（更準確的說，輪廓被勾畫於在框邊界之外，外邊距區域之內）。

 相關例項：在引入bootstrap框架時，input在360遊覽器（相容模式）下顯示，在獲得焦點時外邊框變藍，這就是outline造成的影響，去掉只需要新增一個CSS樣式即可，input:focus{outline:none;}。

5.CSS框型別，通過display屬性來設定元素的框型別：

 最常見的display型別是：block,inline,inline-block，即塊框（block box）,行內框（inline box）,行內塊狀框（inline-block box）。

 注意：預設狀態下display屬性值，塊級元素display:block，行內元素display:inline。

 不常見的型別display型別是：table,flex,grid。

 ①display:table--允許你像處理table佈局那樣處理非table元素，而不是濫用HTML的table標籤來達到同樣的目的；

 ②display:flex--允許你處理一些困擾CSS已久的一些傳統佈局問題，如佈置一系列彈性等寬容器或者垂直居中內容（目前，flex佈局在移動端使用較為廣泛）；

 ③display:grid--給出一種簡單實現CSS網路系統的方式，而在傳統上它依賴於一些棘手難以處理的CSS網路框架。

6.框的高度

  框的高度不遵守百分比的長度；框的高度總是採用框內容的高度，除非指定一個絕對的高度（如：px或者em）,它會比在頁面上預設是100%高度更實用。

7.盒的高階屬性--設定寬和高的約束

 ①通過min-width,max-width,min-height,max-height屬性，來設定大小約束，以更靈活的方式控制內容盒的大小：

 這類情況通常用於響應式網頁設計，將一個佈局的外層容器的寬度設定為百分比形式。

width:70%;
max-width:1280px;
min-width:480px;
複製程式碼

 然後，新增下句CSS使該容器在它的父容器內居中顯示：

margin:0 auto;
複製程式碼

 那麼最終呈現的效果是：當父容器在最小和最大寬度限制內時，它將填滿整個視口寬度；當父容器超過1280px寬度時，佈局將保持在1280px寬，並開始在可用空間內居中。當寬度低於480px時，視口將小於容器，您必須滾動才能看到完全的內容。

 ②max-width屬性的另一個好處是可以將容器內的媒體（如影象和視訊）控制在容器內（響應式圖片）：

 在上述例子中，影象會引起一個問題--起初它的顯示正常，但當容器變得比影象更窄時，影象開始溢流容器（因為它是一個固定的寬度）。解決這類問題，可以用以下CSS：

display:block;
margin:0 auto;
max-width:100%;
複製程式碼

 前兩條屬性display:block,margin:0auto，使它的展示行為像一個塊元素並且在父容器內居中。而max-width:100%限制了影象的寬度使它的最大寬度與父容器的寬度相等。因此，當父容器寬度縮小到小於影象的寬度時，影象會一起縮小。(這樣，可以讓圖片最大隻能是自己的寬度，成為響應式的圖片)

四、JS獲取高度

 為了方便書寫，以下用dom來表示獲取的HTML的節點。

1.dom.style.width/height

  這種方式只能取到dom元素內聯樣式所設定的寬高，也就是說如果該節點的樣式是在style標籤中或外聯的CSS檔案中設定的話，通過這種方法是獲取不到dom的寬高的。

2.dom.currentStyle.width/height

  這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設定的樣式，都能獲取到。

  但這種方式只有IE瀏覽器支援。   
3.window.getComputedStyle(dom).width/height

  這種方式的原理和2是一樣的，這個可以相容更多的瀏覽器，通用性好一些。  
4.dom.getBoundingClientRect().width/height

  這種方式是根據元素在視窗中的絕對位置來獲取寬高的。   
5.dom.offsetWidth/offsetHeight

  這個就沒什麼好說的了，最常用的，也是相容最好的。   

五、邊距重疊

 如下圖，父元素沒有設定margin-top，而子元素設定了margin-top:20px可以看出，父元素也一起有了邊距。

盒模型-深入理解盒模型及相關概念

六、邊距重疊解決方案(BFC)

 首先要明確BFC是什麼意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

BFC的原理

1.內部的box會在垂直方向，一個接一個的放置。

2.每個元素的margin box的左邊，與包含塊border。

3.box的左邊相接觸（對於從做往右的格式化，否則相反）。

4.box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊。

5.bfc的區域不會與浮動區域的box重疊。

6.bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裡的元素，反過來，裡面的也不會影響外面的。

7.計算bfc高度的時候，浮動元素也會參與計算。

怎麼去建立bfc

1.float屬性不為none（脫離文件流）

2.position為absolute或fixed

3.display為inline-block,table-cell,table-caption,flex,inine-flex

4.overflow不為visible

5.根元素

應用場景

1.自適應兩欄佈局

2.清除內部浮動

3.防止垂直margin重疊

看一個垂直margin重疊例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

</body>
</html> 
複製程式碼

盒模型-深入理解盒模型及相關概念

用bfc可以解決垂直margin重疊的問題

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
</section>

<!-- 給下面這個塊新增一個父元素，在父元素上建立bfc -->
<div style="overflow:hidden">
    <section class="bottom">
        <h1>下</h1>
            margin-top:50px;
    </section>
</div>
複製程式碼

盒模型-深入理解盒模型及相關概念

如果你覺得我的文章還不錯的話，可以給個star哦~，GitHub地址

相關文章