1、css3的display属性:
inline:内联
inline-block:可以设置宽高的内联
block:设置为块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子类型</title>
<style>
/*inline:内联，inline-block:可以设置宽高的内联,*/
p{
/*此处设置宽高无用*/
background: #999999;
display: inline;
width:200px;
}
span{
background: #fff000;
display: inline-block;
width:200px;
}
</style>
</head>
<body>
<p>这是一段测试文字</p>
<p>这是一段测试文字</p>
<span>这是一段测试文字</span>
<span>这是一段测试文字</span>
</body>
</html>
inline-table:内联表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line-table属性</title>
<style>
/*inline-table:内联表格*/
table{
border: 2px solid #999;
display: inline-table;
}
table td{
border: 2px solid rebeccapurple;
}
</style>
</head>
<body>
我是上面文字
<table>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
</table>
我是下面文字
</body>
</html>
list-item:把元素设置为列表项:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-item属性</title>
<style>
/*list-item:把元素设为列表项。可设置列表项样式*/
div{
display: list-item;
list-style-type: circle;
margin-left:50px;
}
</style>
</head>
<body>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
</body>
</html>
2、盒子的大小计算方式:box-sizing属性：
border-box:此情况下设置的宽高为整个盒子(包含padding)的宽高;
content-box:此情况下设置的宽高为盒子内容(不包含padding)的宽高;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的box-sizing属性</title>
<style>
/*下面两个div宽高此情况下是一样的，*/
#div1{
box-sizing: border-box;
width:240px;
height:240px;
padding:20px;
background: #fff000;
}
#div2{
box-sizing: content-box;
width:200px;
height:200px;
padding:20px;
background: #00ff00;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>