學習CSS盒模型和佈局

/* 畫外音：有時間還是應該多看Working Draft，隨便寫好像很簡單，系統學習起來覺得CSS真是深坑。

文檔有些說得有些個晦澀，按自己的理解稍微整理了一下，如有不對歡迎指正！(ง •_•)ง */

/* 好啦敲黑板：*/

block-level boxes: 塊級盒，會引起換行。'display' 使用值爲'block', 'list-item', 'table', 'table-*';

line boxes: 文檔把出現在一行的內容視爲一個line box；

inline-level boxes: 行級盒，'display'使用值爲'inline', 'inline-block', 'inline-table', 'ruby';

anonymous boxes: 不能被CSS選擇器定位的盒子；

/* 舉個栗子：*/

常見HTML元素display的指定值

block	<div><p><ul><ol><option><h1>~<h6><hr><body><form> <aside><footer><header><nav><section>
inline	<a><span><strong><em><i><br><label><img><iframe>
inline-block	<textarea><button><input><select>
list-item	<li>
table	<table>
…	…
none	不顯示 /* display:none不會創建盒子； visibility: hidden隱形的盒子，會佔位 */

'display', 'position', 'float'共同決定是哪種box（轉換！轉換！）

塊元素和行元素的轉換方法：

1. ‘display’設置爲‘block’,‘inline’,‘inline-block’, 分別轉換爲塊元素、行元素、行內塊元素；

2. 將行內元素的‘float’設置爲‘left’或‘right’，其display會被算成block；

3. 將行內元素的‘position’設置爲‘absolute’或‘fixed’，會使之成爲塊元素；

區別：

IE兼容性寫法：
{
    display:inline-block;
    *display:inline;
    *zoom:1; /*觸發IE的hasLayout*/
}

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.