1. 盒类型
- display:block
块级元素：div、p、ul、ol、form、h1~h6、table、address、center等
块级元素可应用盒模型相关样式属性 - display:inline
内联元素：img、input、label、span、em、code、b、cite、i、select等
内联元素无法应用盒模型相关样式属性 - display:inline-block
使内联元素具备块级元素的盒模型特性，比如对a元素应用display:inline-block后，就可以定义padding及margin。
默认情况下使用inline-block时并列显示的元素的垂直对齐方式是底部对齐，如果需要修改成顶部对齐，需要在样式中加入vertical-align:top - display:inline-table
因为table元素属于block类型，不能与其他文字处于同一行，如果将table元素的display修改为inline-table类型，就可以让表格与其他文字处于同一行了。 - display:list-item
将多个元素作为列表来显示，同时在元素的开头加上列表标记。属于block，是li元素的默认display方式。 - display:run-in和display:compact
不做了解，浏览器支持性都不太好 - 表格相关元素的display
|元素|display类型|说明|
|------||------------|------|
|table|table或inline-table|代表整个表格|
|caption|table-caption|代表整个表格的表格|
|thead|table-header-group|代表表格中的表头部分|
|tbody|table-row-group|代表表格中数据内容部分|
|tfoot|table-footer-group|代表表格中的脚注部分|
|tr|table-row|代表表格行|
|th|table-cell|代表单元格|
|td|table-cell|代表单元格|
使用以上display类型，你可以轻易的使用div模仿出一个表格。
- display:none
元素将不被显示
2. 盒中容纳不下的内容的显示
- overflow
overflow:hidden; // 显示不下的都抛弃掉
overflow:scroll; // 滚动条
overflow:auto; // 自动滚动条
- overflow-x和overflow-y
- text-overflow
div{
width: 300px;
border: 1px solid orange;
white-space: nowarp; // 使内容不能换行，从而演示text-overflow属性
overflow:hidden; // 隐藏溢出的内容
text-overflow: ellipsis; // 配合overflow-hidden，显示省略号
}
3. 对盒使用阴影
// 横向阴影距离、纵向阴影距离、模糊半径、阴影颜色
box-shadow: 5px 5px 5px gray;
// 内阴影、横向0、纵向0、模糊半径5、展开半径5、颜色gray
box-shadow: inset 0 0 5px 5px gray;
box-shadow可以对盒内子元素使用阴影、也可以对表格和单元格使用。
4. 盒元素高度和宽度计算方法
- box-sizing
// 不指定box-sizing属性时，默认就是使用content-box，
// 表示元素的宽度和高度不包括内边距和边框部分
box-sizing:content-box;
// 表示元素的宽度和高度包括内边距和边框部分
box-sizing:border-box;
使用box-sizing:border-box，无需费心计算宽高，有时候让布局变得简单：
div{
width: 50%;
border: 30px solid #ffaa00;
padding: 30px;
background-color: #ffff00;
float: left;
box-sizing: border-box;
}
