re:从0开始的CSS之旅 14. 显示模式的切换

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>
相关推荐
前端赵哈哈几秒前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队几秒前
React Native 错误处理完全指南
前端
苏打水com1 分钟前
深入浅出 JavaScript 异步编程:从回调地狱到 Async/Await
开发语言·javascript·ecmascript
Giant1002 分钟前
教你用几行代码,在网页里调出前置摄像头!
javascript
地方地方3 分钟前
event loop 事件循环
前端·javascript·面试
AAA阿giao3 分钟前
不用 JavaScript,你能用 CSS 做到什么?答案:拍一部星战电影!
前端·css
golang学习记11 分钟前
从0死磕全栈之在 Next.js 中使用 Sass
前端
好大的月亮16 分钟前
oss中的文件替换后chrome依旧下载到缓存文件概述
前端·chrome·缓存
Broken Arrows24 分钟前
解决Jenkins在构建前端任务时报错error minimatch@10.0.3:……的记录
运维·前端·jenkins
明月与玄武25 分钟前
JS 自定义事件:从 CustomEvent 到 dispatchEvent!
前端·javascript·vue.js