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;