那些被忽略的盒子模型小知識

本文是筆者在學習CSS時的一些小白總結

咱們知道的盒子模型主要由4個區域組成，分別是內容區域（content），內邊距區域（padding），邊框區域（border）和外邊距區域（margin）。 對於不瞭解盒子模型的朋友能夠移步到這裏瞭解一下。

Content（內容）

1. 替換元素

替換元素（replaced element），顧名思義就是內容能夠被替換的元素。

咱們一般會把一些特殊意義的文本替換成圖片，好比一個網站的logo。

咱們會在頁面上看到的不是h1標籤顯示的」Google「文字，而是谷歌logo的圖片。使用了content的元素的內容在html標籤中是不存在的。這樣作就有個好處，當爬蟲來訪問咱們的網站，爬蟲能夠知道咱們這個主站的h1標題是」Google「而不是一個img標籤，且在視覺上給用戶更好的體驗。

2. 僞元素::before和::after

爲了實現上面顯示價格，以前寫react代碼時候會常常這麼寫，感受在邏輯上寫了好多關聯性不大的文本。其實能夠利用 ::before和 ::after兩個僞元素，把這些與邏輯不相關的寫在css裏，react dom則專一於數據的表現。

<div className="price-panel">
  <span className="price-panel__price">
    ￥
    {(totalPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount-price">
    已省￥
    {(totalDiscountPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount">
    （
    {(discount / 10).toFixed(1)}
    折）
  </span>
</div>
複製代碼

使用了僞元素後的react代碼顯然更加清晰表示數據。 HTML:

<div className="price-panel">
  <span className="price-panel__price">
    {(totalPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount-price">
    {(totalDiscountPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount">
    {(discount / 10).toFixed(1)}
  </span>
</div>
複製代碼

SCSS:

.price-panel {
  &__price {
    &::before {
      content: '￥';
    }
  }
  &__discount-price {
    &::before {
      content: '已省￥';
    }
  }
  &__discount {
    &::before {
      content: '(';
    }
    &::after {
      content: '折）';
    }
  }
}
複製代碼

咱們還能使用僞元素幫助實現一些原本須要多個div實現的樣式，好比下面這個對話框。

HTML:

<div class="dialog">Hi，I’m a bubble dialog. Can you see me?</div>
複製代碼

CSS:

.dialog {
  background: #f0f;
  padding: 10px;
  border-radius: 10px;
  color: white;
  max-width: 250px;
  position: relative;
  overflow: visible;
}

.dialog::after {
  position: absolute;
  content: '';
  display: inline-block;
  border-width: 5px 10px;
  border-style: solid;
  border-color: transparent transparent #f0f #f0f;
  width: 0;
  height: 0;
  right: -20px;
}
複製代碼

Padding（內邊距）

padding的百分比值是很是有用的。須要注意的padding的百分比值，不管是水平方向仍是垂直方向都是相對於寬度進行計算的不管是水平方向仍是垂直方向都是相對於包含塊（即父元素）寬度進行計算的。（謝謝@熊謝謝 指點）

若是須要弄一張16:9的等比縮放圖片，能夠利用padding的這個特性，設置一個padding-top或者padding-bottom爲56.25%便可(100\16*9)

Margin（外邊距）

1. margin合併

塊級元素的margin-top和margin-bottom有時候會合併爲單個margin，這種現象叫margin合併。 margin合併發生兩個重要元素

1. 必須是塊級元素
2. 只發生在垂直方向。

margin合併的場景

1.1 相鄰兄弟元素

1.2 父級和第一個/最後一個子元素

在實際開發中，父子margin合併頗有可能會帶給咱們麻煩。 以下圖所示，div表現出和咱們預想不一致的結果。

那麼怎麼才能防止這種父子margin合併致使的和預想不一致問題呢？ 解決方法以下（這裏直接複製了張鑫旭老師書籍《CSS世界》的原話。）： （1）對於margin-top合併（知足一個便可）：

• 父元素設置爲BFC
• 設置border-top的值（親測transparent也能夠的）
• 設置padding-top的值
• 父元素和第一個子元素之間添加內聯元素

（2）對於margin-bottom合併（知足一個便可）：

• 父元素設置爲BFC
• 設置border-bottom（transparent也能夠的）
• 設置padding-bottom
• 父元素和最後一個子元素之間添加一個內聯元素
• 父元素設置height、min-height或者max-height

1.3 空塊級元素的margin合併

2. margin auto

每當說到margin:auto，個人第一反應是居中。但這個只是一個淺層應用的表象。 接下來咱們去一塊兒看看這個margin:auto到底是‘何方神聖’。

margin:auto的填充規則以下：

• 若是一側定值，一側auto，則auto爲剩餘空間大小。注意auto並非0的意思。
• 若是兩側都是auto，則平分剩餘的空間

我會疑惑爲何我設置了margin: auto，卻在垂直方向上沒有居中。

這裏《css世界》中給出的答案讓人很是容易理解。假如把.son元素的height去掉，.son的高度會自動變成父元素的200px，顯然不會，因此沒法觸發margin: auto。同理，若是把width爲200px去掉，確實是會和父元素同樣寬。

那麼如何讓垂直居中呢? 子元素使用絕對定位後設置margin: auto便可

Border（邊框）

用border繪製三角形

咱們能夠利用border color爲透明來繪製一些圖形，好比三角形

注意border-color這個屬性。

/* border-color: color; 單值語法 */ 
border-color: red;

/* border-color: vertical horizontal; 雙值語法*/
border-color: red #f015ca;

/* border-color: top horizontal bottom; 三值語法 */
border-color: red yellow green;

/* border-color: top right bottom left; 四值語法 */
border-color: red yellow green blue;
複製代碼

固然，咱們繪製三角形不限於這種等腰三角。

這裏繪製了一個底邊分別是60px和160px的直角三角形。

參考

文章主要參考了張鑫旭老師的《css世界》並根據本身的業務作出的一些實踐總結。