css盒模型理解

時間 2019-12-10

標籤 css 模型理解欄目 CSS 简体版

原文原文鏈接

css盒模型概念

css盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。
css

圖中element元素是實際內容，也就是元素框，緊挨着元素框外部的是內邊距padding，其次是邊框（border），而後最外層是外邊距（margin），整個構成了盒子模型。一般咱們設置的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其餘元素。那麼：html

總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + border的左右寬度 + margin的左邊距和右邊距的值；
總高度 = 元素（element）的height + padding的上下邊距的值＋ border的上下寬度 + margin的上下邊距的值。

css外邊距合併(疊加)

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值。佈局

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

須要注意的是：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。flex

邊距合併解決方案(BFC)

BFC其英文拼寫爲 Block Formatting Context 直譯爲「塊級格式化上下文」spa

元素產生BFC的條件

float屬性不爲none（脫離文檔流）
position爲absolute或fixed
display爲inline-block,table-cell,table-caption,flex,inine-flex
overflow不爲visible

BFC元素所具備的特性

在BFC中，盒子從頂端開始垂直地一個接一個地排列。
盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子垂直方向的margin會發生重疊。
在BFC中，每個盒子的左外邊距（margin-left）會觸碰到容器的左外邊緣（border-left），對於從右往左的格式來講，會觸碰到右邊緣。
BFC不會與浮動盒子產生交集，而是緊貼浮動元素邊緣。
計算BFC高度BFC時，天然也會檢測浮動的子盒子高度。

應用場景

自適應兩欄佈局
清除內部浮動
防止垂直margin重疊

上面邊距合併例子調整：code

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

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

關於bfc的應用的案例這裏就不在一一舉出了，你們去網上找一些其餘的文章看一下。orm

box-sizing屬性介紹

box-sizing : content-box|border-box|inherit

content-box(標準盒子),默認值,能夠使設置的寬度和高度值應用到元素的內容框。盒子的寬高只包含內容。總寬度=margin+border+padding+width;總高度=margin+border+padding+height
border-box(IE盒子),設置的width值實際上是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容。總寬度=margin+width; 總高度=margin+height
inherit , 規定應從父元素繼承 box-sizing 屬性的值

偷兩張圖貼起來~htm