通過display樣式可以修改元素的類型
可選值：
- inline：可以將一個元素作為內(nèi)聯(lián)元素顯示
- block: 可以將一個元素設(shè)置塊元素顯示
- inline-block：將一個元素轉(zhuǎn)換為行內(nèi)塊元素
可以使一個元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)
既可以設(shè)置寬高，又不會獨(dú)占一行 - none: 不顯示元素，并且元素不會在頁面中繼續(xù)占有位置
1.將div塊元素轉(zhuǎn)變成span內(nèi)聯(lián)元素
<!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>
阿薩德發(fā)生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
修改前預(yù)覽效果:
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>
阿薩德發(fā)生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
修改后預(yù)覽效果:
image.png
2.將span內(nèi)聯(lián)元素轉(zhuǎn)變成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>
阿薩德發(fā)生地方
<span class="box"></span>
<span>hello</span>
</body>
</html>
預(yù)覽:
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>
阿薩德發(fā)生地方
<span class="box"></span>
<span>hello</span>
</body>
</html>
預(yù)覽:
image.png
3.設(shè)置行內(nèi)塊元素
<!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>
阿薩德發(fā)生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
預(yù)覽:
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>
阿薩德發(fā)生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
預(yù)覽:
image.png
6.visibility 隱藏元素并占用位置
可以用來設(shè)置元素的隱藏和顯示的狀態(tài)
可選值：
- visible 默認(rèn)值，元素默認(rèn)會在頁面顯示
- 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>
阿薩德發(fā)生地方
<div class="box"></div>
<span>hello</span>
</body>
</html>
預(yù)覽:
image.png
