我理解的css盒模型以及使用場景

時間 2019-11-08

標籤理解 css 模型以及使用場景欄目 CSS 简体版

原文原文鏈接

- css盒模型是什麼
網頁設計中css技術所使用的一種思惟模型css

- 盒模型的組成html

- 盒模型的兩種標準（在不考慮css3的狀況下）css3

兩種模型惟一的差別就在元素寬高度的定義
w3c標準模型的元素寬高＝內容（content）的寬高
IE模型的元素寬高＝內容（content）＋填充（padding）＋邊框（border）的總寬高瀏覽器

在html頭部有一個<!Doctype html>聲明，瀏覽器會根據這個聲明來判斷文件是什麼類型的，也會根據這個聲明來解析文件框架

當咱們寫了doc聲明的時候，不管哪一種內核的瀏覽器都會解析爲標準模型，元素寬度＝content的寬度，即當咱們設置width：100px的時候，這個寬度指的就只是content的寬度
總寬度＝咱們設置的width＋padding＋border
當頭部的doc聲明缺失的時候，部分ie內核的瀏覽器則會觸發ie模式即怪異模式（ie6，7，8）width＝content＋padding＋border
總寬度＝width

- 爲何會出現不一樣模型網站

當年微軟的IE瀏覽器佔據超過80%市場份額的時候，想本身獨立制定一套瀏覽器標準，其中就包括IE的盒模型，可是有不少公司不一樣意IE的作法，他們遵循的是W3C的標準來定製瀏覽器，也就形成了如今瀏覽器不一樣的CSS盒模型，可是仍有不少老網站採用的是老IE的標準(怪異模式)，所以不少瀏覽器保留了IE的怪異模式。

- box-sizing
在CSS3中咱們能夠經過設置 box-sizing的屬性來完成標準或者怪異模式之間的切換。spa

（1）box-sizing ： content-box 採用標準模式也是默認樣式.net

（2）box-sizing： border-box 採用ie怪異模式設計

- content-box的缺點
目前任何瀏覽器默認使用的都是content-box，可是這個內容盒子有一個缺點，舉個栗子
假設咱們想要兩個子容器float:left，寬度各50%，而後給一點padding，最後讓子容器並排充滿父容器，代碼以下code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .father-box{
      width: 500px;
      background: #0ba1b5;
    }
    .left-box{
      width: 50%;
      padding: 10px;
      height: 100px;
      float: left;
      background: #b23e35;
    }
    .right-box{
      width: 50%;
      padding: 10px;
      float: left;
      height: 100px;
      background:#77b55a;
    }

  </style>
</head>
<body>
<div class="father-box">
  <div class="left-box">left-box</div>
  <div class="right-box">right-box</div>
</div>
</body>
</html>

咱們在瀏覽器中運行以後發現，想象的很美好結果卻並不美好，由於兩個子元素寬度超過了50%，致使了折行，因而寬度就不能設置爲50%了，只能將寬度減去padding的值，在這種時候，border-sizing就派上用場了

瞭解border-sizing
border-sizing是css3新增的聲明，不少開發者可能都未曾用過，既然標準模型誕生的早，又叫標準模型，爲何還要出現border-sizing呢

border-sizing的優勢
border-sizing的誕生就是爲了解決content-sizing的缺點，border－sizing意味着子容器的padding和border厚度都算在50%內，這樣你就能夠隨意修改padding和border的值，而不用擔憂父容易被撐爆

border-sizing的兼容性
ie8也支持該屬性，因此不用擔憂兼容性問題

border-box的使用場合
目前最流行的css框架幾乎都採用了border－sizing，框架想要具有柵格系統，確定要用border－sizing
一般狀況下你只須要在必須使用border－sizing元素的身上使用這個屬性，其餘元素都保持content－sizing就行了

子元素有padding和border，或者至少有其一，而且須要給子元素設定100%寬度（或者50%寬度等等），這時候顯然須要border-box。設爲border-box以後，padding和border的厚度能夠隨意調，並不會溢出父元素。若是是content-box，那麼，寬度必然會溢出，並且，爲了避免溢出，你設定子元素的寬度就只能是一個定值，或者是一個計算值（好比calc(100%- 20px)）。

因爲以前一直對於css盒模型的理解模棱兩可，因此最近趁有時間查了不少相關文章，概括了以上內容終於搞懂了這個難啃的骨頭，參考的資料有如下幾篇文章，感興趣的能夠本身查閱，因爲本身也是邊理解邊總結的內容，若是文章中有什麼不對的地方還請你們指正。
https://blog.csdn.net/qq_3190...
https://www.cnblogs.com/cheng...
https://www.jianshu.com/p/006...