2 max-width的作用：
p元素只有width：300px時候。不管浏覽器怎麼改變他都不會變。哪怕被浏覽器遮擋。
當設置 max-width：300px的時候：當浏覽器小於300px，他會根據浏覽器改變狀態。
3 box-sizing:border-box的使用。：為了讓border和padding不增加寬度
或者在 *下面加上box-sizing屬性，使所有頁面都是於此。
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;4 利用display：inline-block; 內聯元素的性質，但是有寬高！所以這樣就不用清除浮動了。 但是：
5 columns的使用
<html>
<head>
<title></title>
<style type="text/css">
.col{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<div class="col">
Internet Explorer 10 和 Opera 支持 column 屬性。
Firefox 支持替代的 -moz-column 屬性。
Safari 和 Chrome 支持替代的 -webkit-column 屬性。
注釋：Internet Explorer 9 以及更早版本的浏覽器不支持 column 屬性。
</div>
</body>
</html>
和就是在div裡面加了一個p就會導致高低不平！！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.col{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>
<div class="col">
<p>
Internet Explorer 10 和 Opera 支持 column 屬性。
Firefox 支持替代的 -moz-column 屬性。
Safari 和 Chrome 支持替代的 -webkit-column 屬性。
注釋：Internet Explorer 9 以及更早版本的浏覽器不支持 column 屬性。
</p>
</div>
</body>
</html>為什麼會導致加了一個P就不行呢，因為你的CSS 是針對.col 也就是div的設置，而沒有針對p。 如果你寫成 p的column之CSS 。 那麼加上p就OK了。
盒子模型的深入了解。