官方资料
鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/
学习正文
display：https://man.ilovefishc.com/pageCSS3/display.html
visibility：https://man.ilovefishc.com/pageCSS3/visibility.html
可通过 display 使元素在行内元素和块级元素中互换：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
span {
display: block;
/* display: inline 设置为行内元素 */
}
</style>
</head>
<body>
<span>span是行内元素</span>
<span>行内元素</span>
<span>无法换行</span>
</body>
</html>
image.png
使用 inline-block 设置行内块元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
#niv a{
display: inline-block;
width: 200px;
height: 50px;
color: white;
background: #429296;
text-align: center; /* 水平居中 */
line-height: 50px; /* 垂直居中（和height数值一样） */
}
</style>
</head>
<body>
<div id="niv">
<a href="https://www.baidu.com/">百度</a>
<a href="https://cn.bing.com/">Bing</a>
<a href="https://www.sogou.com/">搜狗</a>
<a href="https://www.so.com/">360搜索</a>
</div>
</body>
</html>
image.png
使用 display: none 使元素消失：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
#none {
display: none;
}
</style>
</head>
<body>
<div id="niv">
<p>第一个</p>
<p id="none">第二个消失了</p>
<p>第三个</p>
</div>
</body>
</html>
image.png
使用 visibility: hidden 使元素消失并且占位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
#none {
visibility: hidden;
}
</style>
</head>
<body>
<div id="niv">
<p>第一个</p>
<p id="none">第二个消失了</p>
<p>第三个</p>
</div>
</body>
</html>
image.png
