1.什么是css盒子模型
1.1盒子模型介紹
轉(zhuǎn)自菜鳥(niǎo)教程
所有HTML元素可以看作盒子，在CSS中丢间，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用探熔。
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素烘挫，它包括：邊距（外邊距）诀艰，邊框，填充（內(nèi)邊距）饮六，和實(shí)際內(nèi)容其垄。
盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。
下面的圖片說(shuō)明了盒子模型(Box Model)：
1.2代碼釋例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: pink;
width: 300px;
border: 25px solid red;
<!--只有一個(gè)參數(shù)卤橄，四邊都是25px-->
padding: 25px;
<!--有兩個(gè)參數(shù)绿满，上下是25px，左右是50px-->
padding: 25px 50px;
<!--有三個(gè)參數(shù)窟扑，上是25px喇颁，左右是50px漏健，下是100px-->
padding: 25px 50px 100px;
<!--有四個(gè)參數(shù)，順序依次是上右下左-->
padding: 25px 50px 100px 200px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型</h2>
<p>CSS盒模型本質(zhì)上是一個(gè)盒子橘霎，封裝周?chē)腍TML元素蔫浆，它包括：邊距，邊框茎毁，填充克懊，和實(shí)際內(nèi)容忱辅。</p>
<div>這里是盒子的內(nèi)容七蜘。</div>
</body>
</html>
2.css盒子模型的類(lèi)型
轉(zhuǎn)自鏈接
盒子模型有兩種，分別是W3C盒子模型(標(biāo)準(zhǔn)盒模型)和IE盒子模型(怪異盒模型)
2.1 W3C盒子模型(標(biāo)準(zhǔn)盒模型)
1.標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度墙懂；height指的是內(nèi)容區(qū)域content的高度橡卤。
2.標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin
2.2 IE盒子模型(怪異盒模型)
1.怪異盒模型中的width指的是內(nèi)容、邊框损搬、內(nèi)邊距總的寬度（content + border + padding）碧库；height指的是內(nèi)容、邊框巧勤、內(nèi)邊距總的高度
2.怪異盒模型下盒子的大小=width（content + border + padding） + margin
2.3 兩種模式下如何解決樣式的兼容性問(wèn)題
建議不要給元素添加具有指定寬度的內(nèi)邊距嵌灰，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。
2.4 設(shè)置盒子模型（CSS3指定盒子模型種類(lèi)）
即box-sizing屬性可以指定盒子模型種類(lèi)颅悉，content-box指定盒子模型為W3C（標(biāo)準(zhǔn)盒模型），border-box為IE盒子模型（怪異盒模型）。
box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
