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

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

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

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

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

盒的類型

inline-block

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

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

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

曾經(jīng)我們?nèi)羰且獙崿F(xiàn)分列顯示多個block元素是要借助于float屬性的，

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

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

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

inline-table

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

list-item

可以將div變?yōu)榱斜盹@示，個人認為意義不大。

run-in/compact

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

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

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

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

這節(jié)基本沒什么東西。。。。

對盒使用陰影

好東西來了，這章夢游到現(xiàn)在，其實就是為了它，這是個相當有用的屬性，和為文本設(shè)置陰影聯(lián)合起來，會讓你的網(wǎng)站增色不少。

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

box-sizing屬性

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

這是干什么的呢？我們繼續(xù)看下去，發(fā)現(xiàn)好像就是IE6對box的相關(guān)解釋哇。。。。

結(jié)語

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

最新評論