原文地址：https://blog.csdn.net/qq_26780317/article/details/80736514
從最開始學習CSS的時候，就了解了盒模型的概念，今天，我們從其中的box-sizing:border-box;的屬性入手，來重新認識一下盒模型在實際項目中的運用。
背景：先聲明一下運用的場景，假如項目布局使用的是自適應的布局方式，div給出的寬度是百分比的形式，即框占窗口寬度的50%，但邊界和內邊距是用像素來表示的怎么辦？為了避免這種問題，可以使用屬性box-sizing來調整框模型。使用border-box，來將框模型更改成這個新的模型。
注意：回顧一下，框的總寬度是width,padding-right,padding-left,border-right以及border-left屬性之和，這就是造成上述背景下，樣式不好調整的原因。
box-sizing屬性用於更改用於計算元素的寬度和高度默認的CSS盒子模型，可以使用此屬性來模擬不正確支持CSS盒子模型規范的游覽器行為。
一、回顧基礎
（1）框屬性的基本規范：
文檔的每個元素被構造成文檔布局內的一個矩形框，框每層的大小都可以使用一些特定的CSS屬性調整。相關屬性如下：
即width=content
①width和height設置內容框（content box）的寬度和高度。內容框是框內容顯示的區域--包括框內的文本內容，以及表示鑲嵌子元素的其他框；
②padding表示一個CSS框內邊距--這一層位於內容框的外邊緣與邊界的內邊緣之間；
③border即CSS框的邊界是一個分割層，位於內邊距的外邊緣以及外邊距的內邊緣之間；
④margin即外邊距代表CSS框周圍的外部區域。
（2）運用box-sizing:border-box屬性下，框模型的變化
即width=content+padding+border(此時，當div的寬度為50%時，而border和padding為px時，那么content會隨着實際的寬度進行自動縮放；)
（3）來看看實際的例子：
①設計稿如下所示：
②實際代碼：
本例子中，采用的是flex布局的方式，為了自適應，寬度width采用的是百分比%的形式，border，padding，margin采用的是px尺寸，所有外層的盒子運用了box-sizing:border-box;屬性來改變盒子的結構，從而實現需求。
<body>
<div class="clear_float">
<div class="goods_cell">
<div>
<img class="img_goods" src="../images/img_goods.png" alt="">
</div>
<div class="text_goods">
雙宮繭桑蠶絲被
</div>
<div class="goods_price">
<div class="price_span">活動秒殺價：</div>
<div class="price_num">¥ 499.00</div>
</div>
<div class="goods_seckill">
<div class="seckill_left">僅剩<span>23:59:00</span></div>
<div class="seckill_right">秒殺</div>
</div>
</div>
<div class="goods_cell">
<div>
<img class="img_goods" src="../images/img_goods.png" alt="">
</div>
<div class="text_goods">
雙宮繭桑蠶絲被
</div>
<div class="goods_price">
<div class="price_span">活動秒殺價：</div>
<div class="price_num">¥ 499.00</div>
</div>
<div class="goods_seckill">
<div class="seckill_left">僅剩<span>23:59:00</span></div>
<div class="seckill_right">秒殺</div>
</div>
</div>
<div class="goods_cell">
<div>
<img class="img_goods" src="../images/img_goods.png" alt="">
</div>
<div class="text_goods">
雙宮繭桑蠶絲被
</div>
<div class="goods_price">
<div class="price_span">活動秒殺價：</div>
<div class="price_num">¥ 499.00</div>
</div>
<div class="goods_seckill">
<div class="seckill_left">僅剩<span>23:59:00</span></div>
<div class="seckill_right">秒殺</div>
</div>
</div>
<div class="goods_cell">
<div>
<img class="img_goods" src="../images/img_goods.png" alt="">
</div>
<div class="text_goods">
雙宮繭桑蠶絲被
</div>
<div class="goods_price">
<div class="price_span">活動秒殺價：</div>
<div class="price_num">¥ 499.00</div>
</div>
<div class="goods_seckill">
<div class="seckill_left">僅剩<span>23:59:00</span></div>
<div class="seckill_right">秒殺</div>
</div>
</div>
</div>
</body>
<style> .clear_float{ margin-bottom:20px; } .goods_cell{ width: 47%; box-sizing: border-box; padding: 10px; float: left; box-shadow: 0 0 6px 0 rgba(0,0,0,0.20); border-radius: 10px; font-size:13px; color: #333333; margin-left:15px; margin-bottom:20px; } .clear_float>.goods_cell:nth-of-type(2n+1){ margin-left: 0; } .img_goods{ width:78.5px; height:96px; display: block; margin: 0 auto; } .text_goods{ margin:10px 0; color:#333333; font-size:13px; } .goods_price{ font-size:18px; color: #FF0845; display: flex; align-items: center; justify-content: space-between; margin-bottom:1px; } .goods_price .price_span{ font-size:8px; color:#fa5754; line-height:8px; } .goods_price .price_num{ font-size:16px; color:#fa5754; line-height:18px; } .goods_seckill{ display: flex; align-items: center; justify-content: space-between; box-sizing:border-box; line-height:15px; width:100%; height:15px; } .goods_seckill .seckill_left{ width:70%; padding:2.5px 0px; font-size:10px; color:#2d2d2d; line-height:10px; border:1px solid #999999; border-right:1px solid #ff0845; text-align:center; } .goods_seckill .seckill_right{ width:30%; color:#ffffff; background-color:#ff0845; border:1px solid #ff0845; font-size:10px; line-height:10px; padding:2.5px 8px; text-align:center; } </style>
③在游覽器上模擬的320px,375px和414px尺寸下，顯示的效果圖：
二、盒模型的其他屬性
（1）margin，padding設置為百分比形式：
給<main>元素的內邊距和外邊距的各個邊設置為5%，意味着“包含元素寬度的5%”，因此，隨着示例輸出窗口的大小增加，內邊距和外邊距也增加了。
（2）margin可以接受負數，可以用來引起元素框的重疊：
（3）背景裁剪（Background clip）屬性：
background-clip:border-box;背景被裁剪到邊框盒；
background-cilp:padding-box;背景被裁剪到內邊距框；
background-clip:content-box;背景被裁剪到內容框。
可以看看以下效果圖比較一下：
（4）輪廓（Outline）：
一個框的outline是一個看起來像是邊界但又不屬於框模型的東西。它的行為和邊界差不多，但是並不改變框的尺寸（更准確的說，輪廓被勾畫於在框邊界之外，外邊距區域之內）。
相關實例：在引入bootstrap框架時，input在360游覽器（兼容模式）下顯示，在獲得焦點時外邊框變藍，這就是outline造成的影響，去掉只需要添加一個CSS樣式即可，input:focus{outline:none;}。
詳情介紹可以查看之前的文章：實現輸入框input在獲得焦點時外邊框不變藍 點擊打開鏈接
（5）CSS框類型，通過display屬性來設定元素的框類型：
最常見的display類型是：block，inline,inline-block，即塊框（block box）,行內框（inline box）,行內塊狀框（inline-block box）.
注意：默認狀態下display屬性值，塊級元素display:block，行內元素display:inline。
不常見的類型display類型是：table,flex,grid.
①display:table--允許你像處理table布局那樣處理非table元素，而不是濫用HTML的<table>標簽來達到同樣的目的；
②display:flex--允許你處理一些困擾CSS已久的一些傳統布局問題，如布置一系列彈性等寬容器或者垂直居中內容（目前，flex布局在移動端使用較為廣泛）；
③display:grid--給出一種簡單實現CSS網絡系統的方式，而在傳統上它依賴於一些棘手難以處理的CSS網絡框架。
（6）框的高度
框的高度不遵守百分比的長度；框的高度總是采用框內容的高度，除非指定一個絕對的高度（如：px或者em）,它會比在頁面上默認是100%高度更實用。
（7）盒的高級屬性--設置寬和高的約束
①通過min-width,max-width,min-height,max-height 屬性，來設置大小約束，以更靈活的方式控制內容盒的大小：
這類情況通常用於響應式網頁設計，將一個布局的外層容器的寬度設置為百分比形式。
width:70%;
max-width:1280px;
min-width:480px;
然后，添加下句CSS使該容器在它的父容器內居中顯示：
margin:0 auto;
那么最終呈現的效果是：當父容器在最小和最大寬度限制內時，它將填滿整個視口寬度；當父容器超過1280px寬度時，布局將保持在1280px寬，並開始在可用空間內居中。當寬度低於480px時，視口將小於容器，您必須滾動才能看到完全的內容。
②max-width屬性的另一個好處是可以將容器內的媒體（如圖像和視頻）控制在容器內（響應式圖片）：
在上述例子中，圖像會引起一個問題--起初它的顯示正常，但當容器變得比圖像更窄時，圖像開始溢流容器（因為它是一個固定的寬度）。解決這類問題，可以用以下CSS：
display:block;
margin:0 auto;
max-width:100%;
前兩條屬性display:block,margin:0 auto，使它的展示行為像一個塊元素並且在父容器內居中。而max-width:100%限制了圖像的寬度使它的最大寬度與父容器的寬度相等。因此，當父容器寬度縮小到小於圖像的寬度時，圖像會一起縮小。(這樣，可以讓圖片最大只能是自己的寬度，成為響應式的圖片)
而這類運用最好的實例就是bootstrap框架中，圖像的img-responsive類名的屬性，在框架下，圖像添加了img-responsive類名，就能達到在視口寬度不斷變化的情況下，圖像都可以達到響應式的縮放形式，這也是圖像響應式的秘訣所在。
三、總結
關於盒模型的總結，是從運用實例的角度來引入的，並未按照常規的順序來進行梳理，如果大家想了解盒模型的完整知識，推薦查看MDN的盒模型講解完整篇，點擊打開鏈接，以及MDN再述盒模型篇，點擊打開鏈接。
如文章哪里有問題，歡迎大家留言進行指正，謝謝！