前言
本章將介紹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確實難學。。。
CSS3初探之盒相關樣式 我們一人乙個框。。。
本章將介紹css3中各種盒的知識點 主要包含以下內容 css3中各種各樣盒的型別概念 瀏覽器支援情況 當盒中內容超出容納範圍時,如何利用屬性來讓瀏覽器按照自己想要的方式對盒中內容進行顯示 掌握給盒新增陰影的屬性 掌握幾種 box sizing 屬性值的不同含義,能夠正確的使用box sizing屬性...
css3盒子相關樣式
1 css3的display屬性 inline 內聯 inline block 可以設定寬高的內聯 block 設定為塊 doctype html html lang en head meta charset utf 8 title css3盒子型別 title style inline 內聯,in...
css3之布局相關的樣式
本篇主要講布局相關的樣式。1 多欄布局。在css3之前,若要實現分欄的效果,可以使用浮動 float 來實現。但是這樣會有乙個缺點就是,分欄時造成分欄的幾個欄不能對齊。而在css3中,可以通過column count屬性來進行多欄布局,這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。使用方法 c...