前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）

欢迎来到CSS隐藏属性界面

你好！可以仔细阅读这篇文章，了解一下CSS隐藏元素的基本语法和相关知识。

方法一：display:none

display:none，使得元素本身不存在，其所占据的空间位置也不存在。

 <div><h1>给元素设置display:none样式</h1><p>A元素</p><p style='display:none;'>B元素</p><p>C元素</p></div>

方法二：visibility: hidden

这种方式，会使得元素不存在，但是其占据的位置是存在页面上的，虽然元素隐藏了，但是一样会影响页面的整体布局。

 <div><h1>给元素设置visibility:hidden样式</h1><p>A元素</p><p style='visibility:hidden;'>B元素</p><p>C元素</p></div>

方法三：overflow:hidden

这种方式，会使得超出的元素隐藏起来。
注意：（对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置）

 <div><h1>给元素设置overflow:hidden样式</h1><p>A元素</p><p style='overflow:hidden;'>B元素---hahahahahahahahahahahahahaha</p><p>C元素</p></div>

常见的块元素	常见的行内元素
address – 地址	a – 锚点
blockquote – 块引用	u – 下划线
center – 举中对齐块	sub – 下标
div – 常用块级容易，也是CSS layout的主要标签	sup – 上标
dir – 目录列表	textarea – 多行文本输入框
form – 交互表单	span – 常用内联容器，定义文本内区块
h1–h6 标题	strong – 粗体强调
ol – 有序表单	i – 斜体
p – 段落	img – 图片
hr – 水平分隔线	label – 表格标签
ul – 无序列表	font – 字体设定(不推荐）
table – 表格	br – 换行
pre – 格式化文本	abbr – 缩写
ol – 有序表单	em – 强调
……	……

方法四：opacity: 0

这种方法，本质是让元素的透明度为0，使得元素隐藏起来，实际其位置依然占据着；
（和visibility: hidden一样会占据空间，影响页面布局。）

 <div><h1>给元素设置opacity: 0样式</h1><p>A元素</p><p style='opacity: 0;'>B元素</p><p>C元素</p></div>

display: none和visibility: hidden和opcaity: 0

这三者这件的区别分别是什么？可以从结构、继承去了解一下

1、引用DOM结构
display: none：浏览器不会渲染该元素，且元素不占据空间。
visibility: hidden：元素被隐藏，但会被浏览器渲染，且占据空间。
opacity: 0：本质是设置透明度为0，使得元素隐藏，且占据空间。

2、继承
display: none：不会被子元素继承，因为子元素不会被渲染。
visibility: hidden：会被子元素继承，子元素可以通过设置visibility: visibile，来取消隐藏。
opacity: 0：会被子元素继承，并且子元素没办法通过改变opacity:1属性，来取消隐藏。

好了，css隐藏属性的知识点看到这里，到此结束啦，看过的朋友们，点一个赞呗！

赠人玫瑰，手留余香！！！

CSS隐藏属性display:none；visibility:hidden；overflow:hidden相关推荐

【重识 HTML + CSS】元素类型、display、visibility、overflow
元素类型元素类型块级.行内级元素替换.非替换元素元素的分类总结 CSS 属性 - display inline-block 练习 - 邮箱显示与选择练习 - 分页跳转栏 display 的其 ...
CSS基础知识（display和visibility、overflow、文档流）
9.显示与隐藏 u display属性: (1)none:隐藏元素,不会再占有页面的任何空间,即不会影响布局. (2)inline:默认值.将元素[显示]为内联元素 (与HTML元素本身无关 ...
display: inline-block;下增加overflow:hidden;产生高度问题
display: inline-block; 元素增加 vertical-align: bottom 转载于:https://www.cnblogs.com/zzzzzwt/p/10546114.ht ...
html元素的显示与隐藏（display、visibility、overflow）
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 1display显示隐藏 Display属性用于设置一个元素如何显示. Displ ...
对CSS了解-overflow:hidden
overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css">.wrap {overflow: ...
CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
display和visibility的用法和区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility和display两个属性都有隐藏元素的功能.visibility ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

CSS隐藏属性display:none；visibility:hidden；overflow:hidden