前端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隐藏属性的知识点看到这里,到此结束啦,看过的朋友们,点一个赞呗!
赠人玫瑰,手留余香!!!