CSS3笔记---盒相关样式

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;
}