本文寫作的目標是對css的盒模型進行科普性闡述，也是自己學習css這麼長時間的關於盒模型的一個積累。當然，這篇文章還會涉及到討論盒模型時最經常遇到的兩個問題。最後將會給出一些關於css3中的box-sizing屬性的說明和用法。
重要的事情說三遍：
developer.mozilla.org是一個學習的好網站，一定要重視最基礎的東西
developer.mozilla.org是一個學習的好網站，一定要重視最基礎的東西
developer.mozilla.org是一個學習的好網站，一定要重視最基礎的東西
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<style>
body{
width: 500px;
height: 500px;
/*background: #cccccc;*/
border: 5px solid black;
}
.box {
border: 5px solid rebeccapurple;
background-color: lightgray;
padding: 40px;
margin: 40px;
width: 300px;
height: 150px;
}
.alternate {
box-sizing: border-box;
}
.container{
border:5px solid blue;
/*height: 100%;*/
}
.box {
margin-top: -40px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 4em;
}
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
.inline-block{
display: inline-block;
}
.links-list {
display: flex;
list-style: none;
border: 1px solid black;
}
.links-list a {
background-color: rgb(179,57,81);
color: #fff;
text-decoration: none;
padding: 1em 2em;
display: inline-block;
}
.links-list a:hover {
background-color: rgb(66, 28, 40);
color: #fff;
}
</style>
<body>
<!--1.盒子模型 標準盒模型，和IE盒子模型，出現兼容差異，體現在padding和border,
解決這個問題，出現替代盒子模型，ie8以上，可以解決這個差異問題，box-sizing:border-box;
統一成替代盒子模型，-->
<!--<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>-->
<!--2.這裏外邊距，始終是額外空間，至於他改變父元素的屬性，是擴展還是縮小
如果父元素佔地大小未確定，那麼負值縮小父，正值擴大，如果確定則不會影響，表現像是x,y軸上的位移
同時無論怎麼給margin-right和margin-bottom都不會影響自身位置，只有left和top影響
-->
<!--<div class="container">
<div class="box">Change my margin.</div>
</div>
-->
<!--3.理解外邊距的一個關鍵是外邊距摺疊的概念。如果你有兩個外邊距相接的元素，這些外邊距將合併爲一個外邊距，即最大的單個外邊距的大小。-->
<!--<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>-->
<!--4任何元素的內邊距都可以改變-->
<!--5以上外邊距，邊框，內邊距在塊狀盒子裏，都是起到作用的，其中一些在內聯盒子，同樣起作用
重中之重，是完全不會改變外界空間，像是重新生出一些空間，因而出現重疊，總之
完全不會壓縮，擴大父元素 ，還有一點是他的寬度，高度始終是自動auto
行內元素，主要是padding一直起到作用，將周圍元素，特點生出空間，不會擠佔周圍空間，
（尤其是垂直方向沒什麼影響，水平方向，影響文檔流之中的同行元素，僅僅影響一行
margin同樣如此，影響水平一行外圍空間）
甚至達到一個，絕對定位的效果
-->
<!--6由5可以看到，高度寬度，沒有改變，尤其是垂直高度，完全沒有擠開上下元素，
如果希望高度寬度起作用，同時又不會佔據整行，自身換行，由此出現行內塊元素，
這樣以來完全起到作用-->
<!--<p>
I am a paragraph and this is a <span class="inline-block">span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p> -->
<!--7常見引用中，導航欄，一般給與padding填充，同時覆蓋在父ul上，爲了解決這個問題，
正好用inline-block ，擠開空間，從而讓ul均勻覆蓋-->
<nav>
<ul class="links-list">
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
</ul>
</nav>
</body>
</html>
以上內容，來自推薦網站
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model