CSS樣式--盒模型（四）

CSS樣式–盒模型（四）

---

前言

css盒模型是創建css佈局基礎，其中最主要的就是padding和margin了，盒模型圖解如下：

可通過谷歌瀏覽器的調試工具查看元素的盒模型，鼠標懸浮上去可查看對應的padding、border等值。

框屬性

1.白色框（padding + 虛線–content）表示元素大小
2.padding表示元素內部邊距
3.border表示元素邊框
4.margin表示元素外邊距

MDN的描述如下：

width 和 height

width 和 height 設置內容框（content box）的寬度和高度。內容框是框內容顯示的區域——包括框內的文本內容，以及表示嵌套子元素的其它框（我們默認設置的width和height就是指內容的寬和高）。

注意: 還有其他屬性可以更巧妙地處理內容的大小——設置大小約束而不是絕對的大小。這些屬性包括min-width、max-width、min-height 和 max-height–（很有用：項目中有人把Button寬高寫死了，但是更換按鈕語言的時候字符邊長，導致樣式亂七八糟的）。

padding

padding 表示一個 CSS 框的內邊距 ——這一層位於內容框的外邊緣與邊界的內邊緣之間。該層的大小可以通過簡寫屬性padding 一次設置所有四個邊，或用 padding-top、padding-right、padding-bottom 和 padding-left 屬性一次設置一個邊。

border

CSS 框的邊界（border）是一個分隔層，位於內邊距的外邊緣以及外邊距的內邊緣之間。邊界的默認大小爲0——從而讓它不可見——不過我們可以設置邊界的厚度、風格和顏色讓它出現。 border 簡寫屬性可以讓我們一次設置所有四個邊，例如 border: 1px solid black; 但這個簡寫可以被各種普通書寫的更詳細的屬性所覆蓋：

1. border-top, border-right, border-bottom, border-left: 分別設置某一邊的邊界厚度／風格／顏色。
2. border-width, border-style, border-color: 分別僅設置邊界的厚度／風格／顏色，並應用到全部四邊邊界。
3. 你也可以單獨設置某一個邊的三個不同屬性，如 border-top-width, border-top-style, border-top-color，等。

margin

外邊距（margin）代表 CSS 框周圍的外部區域，稱爲外邊距，它在佈局中推開其它 CSS 框。其表現與 padding 很相似；簡寫屬性爲 margin，單個屬性分別爲 margin-top、margin-right、margin-bottom 和 margin-left。

注意: 外邊距有一個特別的行爲被稱作外邊距塌陷（margin collapsing）：當兩個框彼此接觸時，它們的間距將取兩個相鄰外邊界的最大值，而非兩者的總和。
Html代碼

/*Html代碼*/
<div id="wrapper">
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</div>

CSS代碼

/*CSS代碼*/
/* General styles */
body {
  margin: 0;
}

#wrapper * {
  padding: 20px;
  font-size: 20px;
  border: 20px solid rgba(0,0,0,0.5);
}

/* specific boxes */

#wrapper header, #wrapper footer {
  background-color: blue;
  color: white;
}

#wrapper main {
  background-color: yellow;
}

#wrapper header {

}

#wrapper footer {

}

效果：

box-sizing屬性

box-sizing 屬性用於更改用於計算元素寬度和高度的默認的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行爲。box-sizing默認值爲content-box：也就是設置元素的width屬性時其實是設置內存區域，如果元素有內邊距或者border，那個元素的寬度 = width + padding + border。這很容易出現元素溢出的情況：

box-sizing 屬性可以被用來調整這些表現:

• content-box 是默認值。如果你設置一個元素的寬爲100px，那麼這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。
• border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設爲100px,那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高。

高級的框操作

溢流

當絕對的值設置了框的大小，如果大小不合適，盒內存區域會溢流。這時可以使用overflow屬性控制這種情況：

• auto: 當內容過多，溢流的內容被隱藏，然後出現滾動條來讓我們滾動查看所有的內容。
• hidden: 當內容過多，溢流的內容被隱藏。
• visible: 當內容過多，溢流的內容被顯示在盒子的外邊（這個是默認的行爲）
  

背景剪裁

一個元素設置了background-color, background-image屬性後如何，背景色是如何處理的，處理方式是怎麼樣的，這些都由background-clip屬性來控制。（TODO）

CSS框類型（display屬性）

元素的框類型有很多種，通常我們說的塊級元素和行內元素都是由display屬性設定的。display最常見的屬性值有：block, inline, and inline-block。

1. 塊框（ block box）是定義爲堆放在其他框上的框（例如：其內容會獨佔一行），而且可以設置它的寬高，之前所有對於框模型的應用適用於塊框 （ block box）（body from select textarea h1-h6 html table button hr p ol ul dl cnter div默認是塊級元素）
2. 行內框（ inline box）與塊框是相反的，它隨着文檔的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨着文字部分的流動而打亂），對行內盒設置寬高無效，設置padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。（eg：heda meat title lable span br a style em b i strong默認是行內元素）
3. 行內塊狀框（inline-block box） 像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨着周圍文字而流動，而且他能夠設置寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。（在下面的示例中，行內塊狀框會放在第二行文本上，因爲第一行沒有足夠的空間，並且不會突破兩行。然而，如果沒有足夠的空間，行內框會在多條線上斷裂，而它會失去一個框的形狀。）
   eg：
   HTML代碼

/*HTML代碼*/
<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

CSS代碼

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

效果：