【CSS3初探之盒相關樣式】我們一人一個框。。。

範大腳腳發表於2017-12-12
CSSS3
前言
本章將介紹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確實難學。。。
 
本文轉自葉小釵部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/04/23/3038719.html，如需轉載請自行聯絡原作者


相關文章