1. 盒類型
- display:block
塊級元素：div谱醇、p暇仲、ul、ol副渴、form奈附、h1~h6、table煮剧、address斥滤、center等
塊級元素可應(yīng)用盒模型相關(guān)樣式屬性 - display:inline
內(nèi)聯(lián)元素：img、input勉盅、label佑颇、span、em菇篡、code漩符、b、cite驱还、i嗜暴、select等
內(nèi)聯(lián)元素?zé)o法應(yīng)用盒模型相關(guān)樣式屬性 - display:inline-block
使內(nèi)聯(lián)元素具備塊級元素的盒模型特性凸克，比如對a元素應(yīng)用display:inline-block后，就可以定義padding及margin闷沥。
默認(rèn)情況下使用inline-block時并列顯示的元素的垂直對齊方式是底部對齊萎战，如果需要修改成頂部對齊，需要在樣式中加入vertical-align:top - display:inline-table
因為table元素屬于block類型舆逃，不能與其他文字處于同一行蚂维，如果將table元素的display修改為inline-table類型，就可以讓表格與其他文字處于同一行了路狮。 - display:list-item
將多個元素作為列表來顯示虫啥，同時在元素的開頭加上列表標(biāo)記。屬于block奄妨，是li元素的默認(rèn)display方式涂籽。 - display:run-in和display:compact
不做了解，瀏覽器支持性都不太好 - 表格相關(guān)元素的display
|元素|display類型|說明|
|------||------------|------|
|table|table或inline-table|代表整個表格|
|caption|table-caption|代表整個表格的表格|
|thead|table-header-group|代表表格中的表頭部分|
|tbody|table-row-group|代表表格中數(shù)據(jù)內(nèi)容部分|
|tfoot|table-footer-group|代表表格中的腳注部分|
|tr|table-row|代表表格行|
|th|table-cell|代表單元格|
|td|table-cell|代表單元格|
使用以上display類型砸抛，你可以輕易的使用div模仿出一個表格评雌。
- display:none
元素將不被顯示
2. 盒中容納不下的內(nèi)容的顯示
- overflow
overflow:hidden; // 顯示不下的都拋棄掉
overflow:scroll; // 滾動條
overflow:auto; // 自動滾動條
- overflow-x和overflow-y
- text-overflow
div{
width: 300px;
border: 1px solid orange;
white-space: nowarp; // 使內(nèi)容不能換行，從而演示text-overflow屬性
overflow:hidden; // 隱藏溢出的內(nèi)容
text-overflow: ellipsis; // 配合overflow-hidden直焙，顯示省略號
}
3. 對盒使用陰影
// 橫向陰影距離景东、縱向陰影距離、模糊半徑奔誓、陰影顏色
box-shadow: 5px 5px 5px gray;
// 內(nèi)陰影斤吐、橫向0、縱向0厨喂、模糊半徑5曲初、展開半徑5、顏色gray
box-shadow: inset 0 0 5px 5px gray;
box-shadow可以對盒內(nèi)子元素使用陰影杯聚、也可以對表格和單元格使用。
4. 盒元素高度和寬度計算方法
- box-sizing
// 不指定box-sizing屬性時抒痒，默認(rèn)就是使用content-box幌绍，
// 表示元素的寬度和高度不包括內(nèi)邊距和邊框部分
box-sizing:content-box;
// 表示元素的寬度和高度包括內(nèi)邊距和邊框部分
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;
}
