前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
欢迎来到CSS隐藏属性界面
你好！ 可以仔细阅读这篇文章，了解一下CSS隐藏元素的基本语法和相关知识。
方法一：display:none
display:none，使得元素本身不存在，其所占据的空间位置也不存在。
给元素设置display:none样式
A元素
C元素
方法二：visibility: hidden
这种方式，会使得元素不存在，但是其占据的位置是存在页面上的，虽然元素隐藏了，但是一样会影响页面的整体布局。
给元素设置visibility:hidden样式
A元素
C元素
方法三：overflow:hidden
这种方式，会使得超出的元素隐藏起来。 注意：（对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置）
给元素设置overflow:hidden样式
A元素
C元素
常见的块元素常见的行内元素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一样会占据空间，影响页面布局。）
给元素设置opacity: 0样式
A元素
B元素
C元素
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隐藏属性的知识点看到这里，到此结束啦，看过的朋友们，点一个赞呗！
赠人玫瑰，手留余香！！！
精彩内容
您阅读本篇文章共花了：
发表评论