visibility属性：规定元素是否可见。

取值：hidden：隐藏

visible：显示

联想到：

display属性: none隐藏 block显示

区别？

display属性：隐藏的元素不再占据空间。

visibility属性：隐藏的元素仍然占据空间。

还有一个属性也可以设置隐藏。就是opacity属性，不透明度，将该属性设置为0表示全透明，也是占据空间的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css隐藏属性</title><style>body,ul,li {margin: 0;padding: 0;}.box {width: 550px;list-style: none;}.box li{float: left;width: 100px;height: 100px;margin-right: 10px;background-color: pink;}.box li:nth-child(1) {opacity: 0;}</style>
</head>
<body><ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul>
</body>
</html>

示例1：display:none；我离开啦！我的空间给你啦，我不要啦！

示例2：visibility：hidden；我的空间我做主，谁都不能占我的地盘！

示例3：opacity：0；我变透明啦，你虽然看不到我，但是我人还在呢，休想霸占我的地盘！

（41）css 三大隐藏属性相关推荐

0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
css --- [学习笔记]背景图片小结 css三大特性
源代码参考 1. 行高(line-height) 目标理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用使用行高实现单行文字垂直居中能会测量行高 2. CS ...
七、CSS 三大特性（完整详细解析）
** CSS 三大特性(完整详细解析) ** 1.优先级: 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时, 选择器相同,则执行层叠性选择器不同,就会出现优先级的问题. 1)权重计算 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS三大特性的利用注意事项
CSS的三大特性目录 CSS的三大特性一.CSS层叠性二.CSS继承性三.CSS优先级总结下面我会依次阐述这三种特性使用时的注意事项与方法. 一.CSS层叠性在对一个元素所设置的多个不同 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
【精选】一文搞懂css三大特性
文章目录前言一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...

（41）css 三大隐藏属性

visibility属性：规定元素是否可见。

取值：hidden：隐藏

visible：显示

联想到：

display属性: none隐藏 block显示

区别？

display属性：隐藏的元素不再占据空间。

visibility属性：隐藏的元素仍然占据空间。

还有一个属性也可以设置隐藏。就是opacity属性，不透明度，将该属性设置为0表示全透明，也是占据空间的。

示例1：display:none；我离开啦！我的空间给你啦，我不要啦！

示例2：visibility：hidden；我的空间我做主，谁都不能占我的地盘！

示例3：opacity：0；我变透明啦，你虽然看不到我，但是我人还在呢，休想霸占我的地盘！

（41）css 三大隐藏属性相关推荐

最新文章

热门文章

（41）css 三大隐藏属性

visibility属性：规定元素是否可见。

取值：hidden：隐藏

visible：显示

联想到：

display属性: none隐藏 block显示

区别？

display属性：隐藏的元素不再占据空间。

visibility属性：隐藏的元素仍然占据空间。

还有一个属性也可以设置隐藏。就是opacity属性，不透明度，将该属性设置为0表示全透明，也是占据空间的。

示例1：display:none； 我离开啦！我的空间给你啦，我不要啦！

示例2：visibility：hidden；我的空间我做主，谁都不能占我的地盘！

示例3：opacity：0；我变透明啦，你虽然看不到我，但是我人还在呢，休想霸占我的地盘！

（41）css 三大隐藏属性相关推荐

最新文章

热门文章

示例1：display:none；我离开啦！我的空间给你啦，我不要啦！