通过display样式可以修改元素的类型
可选值：
- inline：可以将一个元素作为内联元素显示
- block: 可以将一个元素设置块元素显示
- inline-block：将一个元素转换为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行 - none: 不显示元素，并且元素不会在页面中继续占有位置
1.将div块元素转变成span内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
修改前预览效果:
image.png
修改 display: inline;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
display: inline;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
修改后预览效果:
image.png
2.将span内联元素转变成div块元素
原代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
/*display: block;*/
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<span class="box"></span>
<span>hello</span>
</body>
</html>
预览:
image.png
修改后
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
display: block;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<span class="box"></span>
<span>hello</span>
</body>
</html>
预览:
image.png
3.设置行内块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
display: inline-block;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
预览:
image.png
5.隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
display: none;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
预览:
image.png
6.visibility 隐藏元素并占用位置
可以用来设置元素的隐藏和显示的状态
可选值：
- visible 默认值，元素默认会在页面显示
- hidden 元素会隐藏不显示
使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
但是它的位置会依然保持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
background-color: red;
visibility:hidden ;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
阿萨德发生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
预览:
image.png
网友评论