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

前端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隐藏属性的知识点看到这里，到此结束啦，看过的朋友们，点一个赞呗！

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