CSS基礎深刻之細說盒子模型

時間 2019-11-09

標籤 css 基礎深刻細說盒子模型欄目 CSS 简体版

原文原文鏈接

Html任何一個元素(element)均可以當成一個盒子(box)來看待，能夠結合現實中的盒子來理解下文，下文其中一些單詞應該是通俗易懂的須要記錄的單詞。css

基本狀況node

每個盒子都有一個內容區域（content area）,例如盒子裏的一堆文字或者一張圖片的邊界，其周圍是具備必定寬度的padding area,border area,和margin area，還有cotent area（相似於下圖中線條的中間跑道部分）。ide

每一個area都是具備必定寬度或高度的，譬如在上下方的就是佔用高度，在兩側的就是佔用寬度。其邊緣咱們稱之爲edge（相似於下圖中的線條部分，實際上是沒有佔空間的，相似於area的最外層意思）。content area的邊緣稱之爲content edge 或者 inner edge,padding area的邊緣稱之爲padding edge，Border area的邊緣稱之爲border edge，Margin area的邊緣稱之爲margin edge or outer edge。佈局

每一個盒子標配margin-中文稱之爲外邊距或外補白,padding內邊距內補白,border邊框三道，最裏頭纔是咱們的內容區域啦，比較形象的說明可見下圖：spa

盒子的margin,padding,border能夠分紅四個方向，上，下，左，右，如上圖，LM表明Left Margin,LB表明Left Border,LP表明Left Padding.code

以上就是一個盒子模型的基本常識，也是頁面CSS佈局的基本單元，Margin,Padding,Border默認不佔空間，其值由用戶設定，比較簡單，最重要的莫過於Content Area內容區域寬高的計算，Content Area的高度Content Area Height稱之Content Height，響應寬度稱之Content Wdith，不只關乎本身佔多大地盤，也關乎子孫後代是否有足夠的地盤去發揮展現，影響其最終結果的主要有如下幾因素：blog

自身Width 和 Height屬性，咱們所說的通常的Width和Height就是Content Width,Content Height，注意一點的是即便用戶Css沒指定其值，它也有本身的初始值auto，這是最基本的一點。圖片

是否包含子元素內容，如文本或者仍是一個box（無論是inline仍是block），也就是子元素的可能寬高計算會影響到父元素；ip

自身display屬性值類型，譬如table類型，若是inline類型的計算規則跟block的也不同；element

等等，關於這塊的計算不在本文的範圍內，這塊也比較複雜，後期會進行專門講解，名字暫定，any box之其寬高計算。

另外須要注意一點的是，Background的設置只會影響到Border area,Padding Area,Content Area，至於Margin Area的背景老是透明的。

舉個栗子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
      }
      LI { 
        color: white;                
        background: blue;            
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; 
        list-style: none            
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;      
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>我沒有border
      <LI class="withborder">S我有border
    </UL>
  </BODY>
</HTML>

View Code

Chrome下會是這個樣子：

解讀這個結果：

每個li box（Html學科稱element/node，css學科稱box）的content area
第一個li box的margin-bottom和第二個的margin-top的margin發生了margin合併現象，只有在同一個BFC環境下並且是上下margin纔會發生margin合併。
能夠看到margin的背景色是透明的，若是其在另外一個content area下且此area有背景色的話，那看到的它就是這個顏色。
實際一個盒子的寬高，不單單只是Content Height，還包括其它，Box Height=Content Height+Top Padding Height+Top Margin Height+Top Border Height，寬度同理。譬如一條Css{width:100px;margin:1px;border:1px,padding:1px;},box其實際佔用的寬度是103px而不是100.這是一個容易引發誤解的地方，這點必定須要注意。

CSS如何使用

　　Margin

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

View Code

　　說明：一個是簡寫表明的含義還有就是CSS具備優先級，最終上面的與下面效果等效：

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

View Code

　　須要注意的一點是，同width,height屬性同樣，margin-top和margin-bottom不能應用於span類非可替換行內塊級別的box上，即應用不起做用，

　　其它屬性如margin-right，padding,border不受限制。

　　Padding

　　　　簡寫順序與margin同，其它沒啥可說的

　　Border

　　　　沒啥可說的

神奇的Margin合併效果

Margin或Padding，如何選擇？

若是有border插一腳，包含Border的話，其實仍是很好選擇的，不一樣的選擇，渲染出來的模樣也會不同。

Margin能夠負值，能夠實現相似於position定位的功能，能帶着內容一塊兒去旅遊，Padding只能是不小於0。

Margin沒背景，而Padding有，受盒子的Background屬性影響。

Margin會發生合併現象，Padding不會。

這倆有時候的確能達到同樣的效果，有一條原則是若是是涉及到跟其它box打架爭地盤，還得靠Margin，若是想讓本身的孩子過得好，顯得不那麼擠得慌，那就用Padding。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。