三种元素之间的转换
- display 属性是用来设置元素的类型及隐藏的
- 常用的属性有
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- inline-block 元素以内联块元素显示（此属性在 Html5 中被弃了，但还能使用）
少废话，上例子
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>div{
width: 100px;
height: 100px;
display:inline; /* 将块元素转换成内联元素，见效果截图 1 */
/*display:inline-block; 将块元素转换成内联块元素，见效果截图 2 */
}
.box1{
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}- 效果截图 1
- 效果截图 2
例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
display 属性是用来设置元素的类型及隐藏的，常用的属性有：
<span>1、none 元素隐藏且不占位置</span>
<span>2、block 元素以块元素显示</span>
<span>3、inline 元素以内联元素显示</span>
<span>4、inline-block 元素以内联块元素显示</span>
</body>
</html>span{
width: 150px;
height: 100px;
background: pink;
display:block; /* 将内联元素转换成块元素，见效果截图 3 */
/*display: inline-block; 将内联元素转换成内联块元素，见效果截图 4 */
}- 效果截图 3
- 效果截图 4
例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box1 box2">box2</div> <!-- 类可以取多个名字，有种多继承的感觉 -->
<div class="box3">
<span>我显示了！</span>
</div>
</body>
</html>.box1{
width: 200px;
height: 200px;
background-color: red;
display: none; /* 让元素隐藏，并且隐藏元素不会再占据位置 */
}
.box2{
display:block; /* block 把元素转换成块元素，还可以显示隐藏的元素 */
}
.box3{
width: 200px;
height: 200px;
background: green;
}
.box3 span{
display: none;
}
.box3:hover span{ /* 当鼠标移入 box3 的时候，让字体显示 */
color: pink;
text-align: center;
line-height: 200px;
font-size: 30px;
display: block;
}- 效果截图 5
- 效果截图 6
参考：北京图灵学院的 Web 前端公开课