css学习笔记－盒子的样式
display的几种参数
1.inline和block
inline,在一行中不会换行，内联属性不可设置盒子大小，且不会自动换行。
block,不在一行会自动换行，可设置盒子的大小
默认下，span是inline的，div是block的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
background-color: aqua;
}
span{
background-color: crimson;
}
h1{
background-color: yellow;
}
</style>
<title>display</title>
</head>
<body>
<div>div是block的</div>
<div>div是block的</div>
<span>span是inline的</span>
<span>span是inline的</span>
<h1>h1也是block的</h1>
<h1>h1也是block的</h1>
</body>
</html>效果如下：
默认情况下的确如此，但是可以通过display来进行修正,比如上述代码中的style部分修改为
div{
background-color: aqua;
display: inline;
}
span{
background-color: crimson;
display: block;
}
h1{
background-color: yellow;
display:inline;
}那么得到的效果是这样的:
确实，div和h1变成inline的了，而span却变成block的了。
2.inline-block
前面说到，inline，是不可以设置大小的，
而inline-block同时具备了inline和block的特性，可以设置其大小，且在一行之中
比如，对于span来说，他本身是inline的，多个span之间是不会自动换行的，且也无法修改大小，inline-bock正可以解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
span{
display:inline-block;
background-color: yellow;
width: 200px;
}
</style>
<title>inline-bock</title>
</head>
<body>
<span>span是inline的1</span>
<span>span是inline的2</span>
<span>span是inline的3</span>
<span>span是inline的4</span>
</body>
</html>效果如下:
3.inline-table
table本身也是block的，如果我用以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-table</title>
<style>
span{
background-color: aquamarine;
}
table{
background-color: crimson;
}
</style>
</head>
<body>
<span>header</span>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<span>footer</span>
</body>
</html>效果如下:
那么我现在有个需求，我需要header和footer和table在一排，header在左边，table在中间，footer在右边
只需要把table设为inline-table即可
table{
display: inline-table;
background-color: crimson;
}
4.list-item
div的组合也可以展示出list的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-item</title>
<style>
div{
display: list-item;
list-style-type: circle;
margin-left: 30px;
background-color: aqua;
width: 300px;
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</body>
</html>效果:
关键在这三行代码:
1 display: list-item;
2 list-style-type: circle;
3 margin-left: 30px;第1行和第2行必须同时出现，缺一个都不会有圆圈的效果
第3行代码如果没有，圆圈会被覆盖掉。