1. 块级元素
特点: 单独占一行, 可以给这个元素设置宽高。
div, p, h1(h2,系列标签), ul,li, ol, dl标签都是块级元素标签。
显示方式: display: block;
如下: 有两个div块,每个div的宽高都是200px,但由于div是块级元素标签,即使设置了宽,还是单独占了一行。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的显示方式</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
}
p{
width: 200px;
height: 200px;
background: red;
}
h1{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<p></p>
<h1></h1>
</body>
</html>
2. 行内元素
特点: 可以多个标签放在同一行,但是给标签设置宽高没有作用。
span, u, i,strong,em都是行内元素标签
显示方式: display: inline;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的显示方式</title>
<style>
span, u, i{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<span>水浒传</span>
<u>三国演义</u>
<i>小霸王学习机</i>
<strong>宝塔镇河妖</strong>
<em></em>
</body>
</html>
3.行内块级元素
特点: 可以多个标签放在同一行,并且标签可以设置宽高。
img标签就是行内块级元素
显示方式: display: inline-block;
4. 元素显示方式的转换:
只需要修改display属性就可以了。