HTML5权威指南——使用盒模型

看了书发现自己对盒模型的理解是零碎的不成体系的。

为元素应用内边距

• 内边距就是padding，内边距的设置也是四个方向padding-top/padding-right/padding-left/padding-bottom，以及他们的简写属性padding
• 如果使用百分数指定内边距的话，百分数跟包含块的宽度有关，高度不在考虑范围。
• 内边距可以有效防止边框绘制在文本上。

为元素应用外边距

• 外边距就是margin，同样边距的设置也是四个方向margin-top/margin-left/margin-right/margin-bottom，简写属性就是margin 方向是上右下左
• 百分数值和包含块的宽度相关的
• 当display属性的值为inline的元素应用外边距的顶边和底边的外边距就不会显示

控制元素的尺寸

• width/height设置元素的宽高
• min-width/min-height设置元素最小可接受的宽高
• max-width/max-height设置元素最大可接受的宽高
• 上面三个属性的值都可以是auto/长度值/百分数
• 当涉及到百分数时是根据包含块的宽度来计算的，当包含块的宽度变化时，元素的宽高也跟着变化，保证所占百分比不变
• box-sizing：设置尺寸调整应用到元素盒子的那一部分，它的属性值为：content-box，padding-box，border-box，margin-box

处理溢出内容

• 处理溢出就是overflow属性他是一个 简写属性，实际上有处理水平方向溢出的overflow-x和处理竖直方向上的溢出overflow-y
• 以下是改属性的值：

值	说明
auto	浏览器自行处理溢出内容，若内容被剪掉就显示滚动条，否则不显示
hidden	多余部分直接剪掉
scroll	为让用户看到所有内容，添加滚动条机制
visible	默认值，不管是否溢出盒中都显示元素内容

还有两个值no-content和no-display书上说主流浏览器都不支持，那么就不再讲了

控制元素的可见性

• 使用visibility属性控制元素的可见性以下是三个属性值以及相关说明

值	说明
collapse	元素不可见且在页面布局中不占据空间
hidden	元素不可见，但在页面布局中占据空间
visible	默认值可见

元素的盒类型

真是没有想到display的属性值居然有这么多。

创建浮动盒

• 使用float属性创建浮动盒
• 以下是浮动盒的属性：

值	说明
left	移动元素，使左边界挨着块的左边界，或者另一个浮动元素的右边界
right	移动元素，使右边界挨着块的右边界，或者另一个浮动元素的左边界
none	元素位置固定

• 阻止浮动元素的堆叠（一个挨着一个的堆叠在一起）使用clear属性可以阻止