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

內聯盒模型(inline)
1. width 、height和。verflow在內嵌元素上不起作用，因為它們總是與內容的寬度和高度相一致。
2. margin-top, margin-bottom有效.
    margin-left, margin-right無效.
3. line-height: 設定行的高度
4. border-left: 自身元素右移
    border-right: 下一個元素右移
    border-top, border-bottom: 顯示於內邊距之外, 但不是沒有擴充行高或者改變元素在豎直方向上的位置. 可能會產生邊框覆蓋鄰近行的情況. 此時除非增加line-height
5. padding也border一致.
內聯塊狀盒模型(inline-block)
1. width, height, margin, border, padding的效果與塊狀元素一致.
2. Firefox2不支援display:inline-block, 要用-moz-inline-box;
3. 不用為替代元素(如: img, object)賦予display:inline-block, 因為瀏覽器會自動將它們認為內聯塊狀元素.
塊狀盒模型(block)
1. 塊元素可以大於父元素, 此時屬性overflow就是用來處理溢出的問題.
2. width:auto, 它使元素的寬度與父元素一致.
3. height:auto, 它使元素的高度包裹住它的所有子項目.
4. border的寬度是含在width的範圍內的.
表格盒模型(block)
1. 表格有外邊距, 但是沒有內邊距.
2. 儲存格沒有外邊距, 但是有內邊距.
3. width: 邊框外圍的寬度(包括border的寬度), 而不是內邊距裡面的寬度.
4. height: 邊框外圍的高度(包括border的高度), 而不是內邊距裡面的高度.
絕對位置盒模型
1. left, right, top, bottom是以容器的左側作為基準.
2. width, left, right: auto時, 盒模型是被包裹的.
3. width: auto, left, right:0或者其他值時, 盒模型是被展開.
4. width, left: 有一個值, right: auto時, 盒模型被固定了尺寸, 並從左側偏離
5. width, right: 有一個值, left: auto時: 盒模型被固定了尺寸, 並從右側偏離
浮動盒模型
1. 浮動元素脫離了正常的元素排列順序, 被置於鄰近塊狀元素的邊框和背景之上.