本章將介紹CSS3中各種盒的知識點；主要包含以下內容：

CSS3中各種各樣盒的類型概念、瀏覽器支持情況；

當盒中內容超出容納范圍時，如何利用屬性來讓瀏覽器按照自己想要的方式對盒中內容進行顯示；

掌握給盒添加陰影的屬性；

掌握幾種“box-sizing”屬性值的不同含義，能夠正確的使用box-sizing屬性來定義樣式中給定的元素的寬度值和高度值中是否包含內部補白區域，以及邊框的高度和寬度；

盒的類型

inline-block

css中我們使用display來定義盒的類型，總體上分為block與inline類型。

css2.1追加了一個盒類型：inline-block，他屬于block類型之一，但在顯示上具有inline的特點，ie8以下不支持該屬性。

因為width和height用作block元素上，所以對inline元素使用width和height是沒用的。

曾經我們若是要實現分列顯示多個block元素是要借助于float屬性的，

但是float是魔鬼，他根本就不應該用于布局，他會吞噬元素/破壞元素，讓元素高度失效，最后讓元素脫離文檔流，

float還會引起父級元素的“塌方”，然后我們又需要清除浮動，而且浮動可能引起很多bug，所以應該盡量少用他布局。

比如一行多列布局，我們完全就可以用inline-block屬性替代之，bug也會少很多的。

inline-table

用于表格前后文字不換行，并可設置vertical-align 設置外部文字top對齊或者bottom對齊。

list-item

可以將div變為列表顯示，個人認為意義不大。

run-in/compact

將元素指定為以上兩個類型時，若果元素后面還有block類型的元素，run-in元素將會被包含在block元素的內部，而compact類型的元素將被放置在左邊。

對于盒模型容納不下的元素

如果塊級元素擁有高寬，設置overflow可以控制顯示....該屬性較熟悉變不研究了。

在css中有一個非常有用的屬性“text-overflow”，若是文字超出寬度，便會顯示“...”省去了我們js操作的過程。

這節基本沒什么東西。。。。

對盒使用陰影

好東西來了，這章夢游到現在，其實就是為了它，這是個相當有用的屬性，和為文本設置陰影聯合起來，會讓你的網站增色不少。

真是漂亮啊，各位就是簡單的操作下自己博客的h1元素，為其加上背景為其文字加上陰影，你會發現，你寫的博客好看多了。

box-sizing屬性

box-sizing屬性的解析我前前后后讀了幾次都沒能理解，“使用width屬性與height屬性來指定元素的高度和高度”。。。

這是干什么的呢？我們繼續看下去，發現好像就是IE6對box的相關解釋哇。。。。

結語

莫名其妙的一章又完了，css確實難學。。。