一、方法
display: none
隐藏元素,会脱离标准流,不占据页面空间
opacity: 0
设置元素的透明度为0,不脱离标准流,占据页面空间
visibility: hidden
隐藏元素,不脱离标准流,占据页面空间
- 使用绝对定位,将元素移除可视区域:脱离标准流,不占据页面空间
- 设置元素的宽和高都为0:不占据页面空间,这种方式无法隐藏内部的文字(再使用
font-size:0;
可以隐藏文字)
transform: rotateX(90deg)
旋转元素, 使与当前页面垂直,这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流,这种方式可以隐藏元素内部的文字
transform: scale(0,0)
缩放元素为0,不脱离标准流,占据页面空间,这种方式可以隐藏元素内部的文字
- 设置相对定位,将元素移除可视区域:仍然占据原来的页面空间
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
<style>
.box{
border: 1px solid red;
margin: 10px;
padding: 10px;
}
.common{
width: 100px;
height