1. 两个属性
display
属性可以用于转换元素的显示模式
可选值:
block
转换为块元素
inline
转换为行内元素
inline-block
转换为行内块元素
none
不显示元素,并且不占用元素的位置
visibility
属性用于设置元素是否显示
可选值:
visible
显示元素(默认值)
hidden
隐藏元素,但是占用元素的位置
示例如下:
<!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>