-
- 盒模型
-
- display屬性值
- inline
- block
- inline-block
- inline-table
- list-item
- run-in
- compact
- 表格類型
- table
- table-row
- table-cell
- thead
- caption
- none
-
- 盒模型
盒模型：
可以了解為一塊塊的區域，比如div
display屬性值：
通過設定display的屬性值操作盒模型
inline：
類似于自适應,例如：span，a的預設樣式
block：
類似于充滿，例如：div，p的預設樣式
上述兩個屬性的簡單測試
<div style="background-color: green">我是div</div>
<span style="background-color: red">我是span</span>
inline-block:
可用于水準菜單的實作
測試代碼
......
<style>
ul{
margin: ;
padding: ;
}
li{
padding: px px;
background-color: #2292ff;
border-right:solid px #2066c7;
width:px;
text-align: center;
/*下面兩個屬性與display的inline-block屬性相比*/
/*list-style: none;
float: left;*/
/**/
display: inline-block;
}
a{
color: #fff;
text-decoration: none;
}
</style>
......
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
<li><a href="#">首頁</a></li>
</ul>
......
inline-table:
實作表單與其他内容（例如文字）位置的改變，類似于word中對圖檔布局的改變
測試代碼
......
<style>
table{
display: inline-table;
border: solid px #cccccc;
/*此案例中改變的是文字的位置*/
vertical-align: bottom;
}
td{
border: solid px #000000;
}
</style>
......
<body>
文字1
<table >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
文字2
</body>
......
list-item
将div轉化成list樣式
測試代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
display: list-item;
list-style-type: circle;
margin-left: px;
}
</style>
</head>
<body>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
<div>list-item</div>
</body>
</html>
run-in
run-in類型的元素将被包括在後面的block類型的元素的内容
compact
compact類型的元素将被放置在block類型的元素左邊
表格類型
将div等轉化成類似于表格的形式，改變display的屬性值
table
類似于将div變成表格
table-row
類似于将div變成表格的一行，
<tr>
table-cell
類似于将div變成表格的
<td>
或
<th>
thead
類似于将div變成表格的表頭
caption
類似于将div變成表格的标題
none
不顯示
![105道CSS 面試知識點總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)