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

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

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

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

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

盒的類型

inline-block

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

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

因?yàn)閣idth和height用作block元素上，所以對(duì)inline元素使用width和height是沒(méi)用的。

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

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

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

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

inline-table

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

list-item

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

run-in/compact

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

對(duì)于盒模型容納不下的元素

如果塊級(jí)元素?fù)碛懈邔挘O(shè)置overflow可以控制顯示....該屬性較熟悉變不研究了。

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

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

對(duì)盒使用陰影

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

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

box-sizing屬性

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

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

結(jié)語(yǔ)

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

最新評(píng)論