頁面佈局

頁面佈局

css注意點：

有些CSS屬性，後代元素會繼承祖先元素的設置。font類型、color、文本屬性

有些CSS屬性，不會繼承祖先元素。佈局相關、border、背景

1 盒子模型

1.1 定義

• 任意一個元素均可以當作盒子模型
• 盒子的大小 內容寬高(width/height) + 邊距(padding)+邊框(border)
• 盒子有外邊距，影響盒子的位置

1.2 塊狀元素和內聯元素

塊狀（塊級）

• 可以獨佔一行
• 默認寬度是父元素的寬，高度是自動（被內容撐開）

內聯（行內）

• 不能獨佔一行
• 默認寬度是自動(被內容撐開)，高度也是自動
• 大部份內聯元素設置寬高無效，設置內邊距有效可是影響其餘元素
• margin能夠設置左右，不能設置 上下的
• CSS的文本屬性 會對內聯元素生效

1.3 盒子模型和盒子模型之間的關係

document樹

父元素 子元素 後代元素 祖先元素 兄弟元素 

標準文檔流

• 塊狀元素 獨佔一行
• 內聯共享一行

盒子在文檔模型的位置

• 給盒子設置邊距， 前面有兄弟元素，距離兄弟元素的距離。 沒有距離父元素的內容的距離
• 垂直方向的margin會塌陷。 上（margin-bottom）下（margin-top）兩個元素之間的距離，取最大。 水平方向沒有這個問題
• 父子元素，給子元素設置垂直方向的margin，一樣會產生塌陷。 解決： 給父元素設置邊框 或者 overflow:hidden
• margin能夠設置爲負值

1.4 佈局相關屬性

display

• block 內聯-->塊
• inline 塊-->內聯
• inline-block 兼具二者默認就是inline-block的有img，input，textarea，td，th
• none 隱藏

佈局相關

• visibility:visible/hidden
• overflow:hidden/auto/scroll/visible
• overflow-x
• overflow-y

尺寸

• width/max-width/min-width
• height/max-height/min-height