1. 两个属性
display
属性可以用于转换元素的显示模式
可选值:
block
转换为块元素
inline
转换为行内元素
inline-block
转换为行内块元素
none
不显示元素,并且不占用元素的位置
visibility
属性用于设置元素是否显示
可选值:
visible
显示元素(默认值)
hidden
隐藏元素,但是占用元素的位置
示例如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display model changing</title>
div {
width: 200px;
height: 200px;
/* 显示模式的转换 */
/* display: inline; */
}
.box1 {
background-color: #c7edcc;
/* display: none; */
visibility: hidden;
}
.box2 {
background-color: #fde6e0;
}
span {
width: 200px;
height: 200px;
background-color: #dce2f1;
display: block;
}
</head>
<body>
<div class="box1">111</div>
<div class="box2">222</div>
<span>我是span</span>
</body>
</html>