HTML5权威指南笔记：20-使用盒模型

1 为元素应用内边距

内边距属性：

属性	说明	值
padding-top	为顶边设置内边距	长度值或百分数
padding-right	为右边设置内边距	长度值或百分数
padding-bottom	为底边设置内边距	长度值或百分数
padding-left	为左边设置内边距	长度值或百分数
padding	简写属性，在一条声明中设置所有边的内边距。省略左边的值，默认使用右边的值；省略底边的值，默认使用顶边的值。	1~4个长度值或百分数

例子：

padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
padding: 5px 25px 5px 40px;

2 为元素应用外边距

外边距属性：

属性	说明	值
margin-top	为顶边设置外边距	长度值或百分数
margin-right	为右边设置外边距	长度值或百分数
margin-bottom	为底边设置外边距	长度值或百分数
margin-left	为左边设置外边距	长度值或百分数
margin	简写属性，在一条声明中设置所有边的外边距。省略左边的值，默认使用右边的值；省略底边的值，默认使用顶边的值。	1~4个长度值或百分数

例子：

margin:4px 20px;

3 控制元素的尺寸

尺寸属性：

属性	说明	值
Width Height	设置元素的宽度和高度	auto、长度值或者百分数
min-width min-height	为元素设置最小可接受宽度和高度	auto、长度值或者百分数
max-width max-height	为元素设置最大可接受宽度和高度	auto、长度值或者百分数
box-sizing	设置尺寸调整应用到元素盒子的哪一部分	content-box 、padding-box 、border-box 、margin-box

例子：为元素设置尺寸

/*百分数值是根据包含块的宽度来计算的*/
width: 75%;
height: 100px;
min-width: 100px;
max-width: 200px;
box-sizing: border-box;

4 处理溢出内容

overflow属性：

属性	说明	值
overflow-x overflow-y	设置水平方向和垂直方向的溢出方式	见下面说明
overflow	简写属性	overflow overflow-x overflow-y

overflow属性的值：

1. auto：浏览器自行处理溢出内容。通常，如果内容被剪掉就显示滚动条，否则就不显示（这是相较scroll值来说的，设置该值后，无论内容是否溢出都有滚动条）。
2. hidden：多余的部分直接剪掉，只显示内容盒里面的内容。如果用户想看看剪掉的这部分内容，对不起，做不到。
3. no-content：如果内容无法全部显示，就直接移除。主流浏览器都不支待这个值。
4. no-display：如果内容无法全部显示，就隐藏所有内容。主流浏览器都不支持这个值。
5. scroll：为了让用户看到所有内容，浏览器会添加滚动机制。通常是滚动条，不过这个值跟具体的平台和浏览器相关。即使内容没有溢出也能看到滚动条。
6. visible：默认值，不管是否溢出内容盒，都显示元素内容。

例子：

overflow: hidden;

5 控制元素的可见性

visibility属性的值：
collapse：元素不可见，且在页面布局中不占据空间。
hidden：元素不可见，但在页面布局中占据空间。
visible：默认值， 元素在页面上可见。

例子：

/*collapse值只能应用到表相关元素，如tr和td*/
visibility: hidden;

6 设置元素的盒类型

display属性的值：

值	说明
inline	盒子显示为文本行中的字
block	盒子显示为段落
inline-block	盒子显示为文本行
list-item	盒子显示为列表项，通常具有项目符号或者其他标记符（如索引号）
run-in	盒子类型取决于周围的元素
compact	盒子的类型为块或者标记盒（跟list-item类型产生的类似）。本书撰写时主流浏览器都不支待这个值
flexbox	这个值跟弹性盒布局相关，会在第21章介绍
table inline-table table-row-group table-header-group table-footer-group table-row table-column -group table-column table-cell table-caption	这些值跟表格中的元素布局相关，详细信息参见第21章
ruby ruby-base ruby-text ruby-base-group ruby-text-group	这些值跟带ruby注释的文本布局相关
none	元素不可见，且在页面布局中不占空间

例子：

display: block;

特别说明：
display属性设置为run-in值会创建一个这样的元素： 其盒子类型取决于周围元素。

1. 如果插入元素包含一个display属性值为block的元素，那么插入元素就是块级元素。
2. 如果插入元素的相邻兄弟元素是块级元素，那么插入元素就是兄弟元素中的第一个行内元素。
3. 其他情况下，插入元素均作为块级元素对待。

7 创建浮动盒

float属性的值：
left：移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界
right：移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界
none：元素位置固定

例子：

float: left;

阻止浮动元素堆叠
clear属性的值：
left：元素的左边界不能挨着另一个浮动元素。
right：元素的右边界不能挨着另一个浮动元素。
both：元素的左右边界都不能挨着浮动元素。
none：元素的左右边界都可以挨着浮动元素。

例子：

clear: left;