-
- 盒模型
-
- 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=)