《精通CSS與HTML設計模式》讀書筆記3——盒模型位置

width
1. auto: a) 沒有設定left, right, 實現水平包裹
         b) 設定left, right, 實現水平展開
2. value: 用具體的值做為元素的尺寸. 當可視畫面比預想的大或小的時候, 固定寬度的元素可能對使用者就不那麼友好了.
3. auto: 設定成其父元素的寬度.
height
1. auto: a) 沒有設定top, bottom, 實現垂直包裹
         b) 設定left, right, 實現水平展開
2. value: 用具體的值做為元素的尺寸. 當可視畫面比預想的大或小的時候, 固定高度的元素可能對使用者就不那麼友好了.
3. auto: 設定成其父元素的寬度.
設定尺寸
height和width是針對內邊距.
1. 表格: 是個例外, 表格是外邊距.
2. 浮動元素：影響文檔流
3. 靜態狀態元素：影響文檔流
4. 絕對位置元素: 不影響文檔流, 寬度與高度的百分比是相對父元素的.
包裹
1. 被包裹的元素需要把width和height設定成auto.
2. 不能水平包裹靜態狀塊元素.
展開
以水平展開為例:
1. width:auto把塊狀元素的寬度拉到與其父元素相同
2. width:auto, left:0, right:0把絕對位置元素的左右兩邊拉至與其定位最近的父元素對齊.
3. 用width:100%能對錶格, 浮動元素或者內聯塊狀元素進行展開. 注意不能有外邊距(就是margin), 否則會出現溢出父元素的現象.
4. 可應用於內嵌元素之外的所有元素.