《精通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. 浮动元素脱离了正常的元素排列顺序, 被置于邻近块状元素的边框和背景之上.