一天搞定CSS：盒模型content、padding、border、margin--06
阿新 • • 發佈：2019-02-08
1.盒模型
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。
2.盒模型分為：標準盒模型和非標準盒模型
當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標籤，例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 以上幾種DOCTYPE都是標準的文件型別，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）。
兩者區別：計算寬高的方式不一樣
1）標準盒模型：除IE以外的所有瀏覽器都是標準盒模型
width=content的寬；
height=content的高；
2）非標準盒模型：又稱怪異盒模型，只有IE是使用該模型
width=content的寬+padding*2+border*2；
height=content的高+padding*2+border*2；
3.盒模型體系
4.盒模型詳細說明
5.熟練盒模型：做一個如下效果圖
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
border:dotted;margin:0px auto;padding:25px;width:350px;
}
.box2{
border:5px solid blue;padding:20px
}
.box3{
background:#ffa0df;padding:48px;
}
.box4{
border:1px dotted white;padding:5px;
}
.box5{
border:1px dotted white;padding:40px;
}
.box6{
width:100px;height:100px;border:5px solid yellow;background:greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6">
</div>
</div>
</div>
</div>
</div>
</body>
</html>