本篇文章给大家谈谈css显示display、可见性visibility、定位position，以及cssdisplay显示的知识点，同时本文还将给你拓展css=>display:"none",visi
本篇文章给大家谈谈css显示display、可见性visibility、定位position，以及css display显示的知识点，同时本文还将给你拓展css => display: "none", visibility: "hidden", opacity: 0 的区别、CSS Display(显示) and Visibility（可见性）_html/css_WEB-ITnose、CSS Display(显示) 与 Visibility（可见性）、CSS display:none和visibility:hidden区别等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：- css显示display、可见性visibility、定位position（css display显示）
- css => display: "none", visibility: "hidden", opacity: 0 的区别
- CSS Display(显示) and Visibility（可见性）_html/css_WEB-ITnose
- CSS Display(显示) 与 Visibility（可见性）
- CSS display:none和visibility:hidden区别
css显示display、可见性visibility、定位position（css display显示）
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，但是这两种方法会产生不同的结果。
display:none隐藏某个元素，且隐藏的元素不会占用任何空间，即该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。
visibility:hidden隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，即该元素虽然被隐藏了，但仍然会影响布局。
块元素：占用全部宽度在前后都是换行符，如<div>、<h1-h6>、<p>、<li>等
内联元素：只占用必要的宽度，不强制换行，如<span>、<a>等
将块元素显示为内联元素：display:inline;例如li {display:inline;}会将列表横向显示
将内联元素显示为块元素：display:block;例如span {display:block;}会将多个span内容换行显示
position属性指定了元素的定位类型
1.static：静态定位即没有定位，为默认值，静态定位的元素不会受到 top、bottom、left,、righ的t影响
2.fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口滚动元素也不会移动
fixed定位的元素不占据空间，因此可能与会其他元素重叠
例如p.pos_fixed{ position:fixed; top:30px; right:5px; }会使该段落显示在距离页面上端20px、右段5px的位置，且不岁窗口滚动而滚动@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@
3.relative：相对定位，会按照元素的原始位置对该元素进行移动，而其原本所占的空间不会变化，即如果向上移动了，其下面的元素并不会向上占据其原本的空间
例如h2.pos_right{position:relative;left:20px;}表示从元素的原始位置左侧增加20px，即向右移动20px
而h2.pos_right{position:relative;left:-20px;}表示从元素的原始位置左侧减去20px，即向左移动20px
4.absolute：绝对定位，相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>
absolute定位的元素不占据空间，因此可能与会其他元素重叠
例如h2 { position:absolute; left:100px; top:150px; }@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@@H_301_55@
5.sticky：粘性定位，位置依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top、right、bottom、left 之一，换言之指定top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
例如
div.sticky {position: sticky;top: 0;background-color: #cae8ca;border: 2px solid #4CAF50;}会将div中sticky选择器的内容设置为粘性定位，在内容不超过上边距时，会随着鼠标的移动而位置上移，当移动到最上面时，则固定位置不变。
不占据空间的定位元素，即fixde和absolute定位的元素，由于可能与其他元素重合，可以通过z-index:n;表示重叠时的显示顺序，即哪个显示在前面哪个显示在后面，n为负值表示该定位元素显示在后面，正值则表示显示在前面。
如果两个定位元素重叠而没有指定z - index，那么最后定位的元素将被显示在前面。
css => display: "none", visibility: "hidden", opacity: 0 的区别
一、 页面结构
- display: "none" 的元素其实并不会渲染，不会出现在页面中，不会占据位置，切换“显隐”时会触发渲染，所以会影响性能。
- visibility: "hidden" 的元素是会渲染的，它会占据页面中的位置（就好像 position: "relative" 的感觉一样，即使把元素left: 1080px，它也会占据原来的位置），切换“显隐”时会触发重绘，基本不影响性能。
- opacity: 0，"opacity"是不透明度的意思，顾名思义，它只是让元素变得不透明，1为完全不透明，0是完全透明，所以它也会在页面中占据位置（只是透明了，看不见），切换“显隐”时会触发重绘。
在这里就有一个小插曲了：什么是渲染？什么是重绘？
- 渲染： 这里所说的渲染其实指的回流，那什么是回流呢，回流就是当元素发生了会影响布局上变化的时候，页面需要重新构建，就会触发回流，重新渲染页面。
- 重绘： 通俗的说，就是元素发生了不影响布局结构的样式变化时，只是元素自身的外观发生了变化，就会触发重绘，比如改变color、background-color等等。
1、display: block
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p1">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById(''p1'').style.display=''block''">
Block
</button>
<button onclick="document.getElementById(''p1'').style.display=''none''">
None
</button>
</body>
不妨、动手一试？
<body> <div> <p>我是吃瓜群众 </p><p id="p1">我是主角 </p><p>我是吃瓜群众</p> <button onclick="document.getElementById(''p1'').style.display=''block''">Block </button><button onclick="document.getElementById(''p1'').style.display=''none''">None </button> <br> </div> </body>
2、visibility: hidden
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p2">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById(''p2'').style.visibility=''visible''">
Visible
</button>
<button onclick="document.getElementById(''p2'').style.visibility=''hidden''">
Hidden
</button>
</body>
不妨、动手一试？
<body> <div> <p>我是吃瓜群众 </p><p id="p2">我是主角 </p><p>我是吃瓜群众</p> <button onclick="document.getElementById(''p2'').style.visibility=''visible''">Visible </button><button onclick="document.getElementById(''p2'').style.visibility=''hidden''">Hidden </button> <br> </div> </body>
3、opacity: 0
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p3">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById(''p3'').style.opacity=0">
0
</button>
<button onclick="document.getElementById(''p3'').style.opacity=.5">
0.5
</button>
<button onclick="document.getElementById(''p3'').style.opacity=1">
1
</button>
</body>
不妨、动手一试？
<body> <div> <p>我是吃瓜群众 </p><p id="p3">我是主角 </p><p>我是吃瓜群众</p> <button onclick="document.getElementById(''p3'').style.opacity=0">0 </button><button onclick="document.getElementById(''p3'').style.opacity=.5">0.5 </button><button onclick="document.getElementById(''p3'').style.opacity=1">1 </button> <br> </div> </body>
CSS Display(显示) and Visibility（可见性）_html/css_WEB-ITnose
如何设置一个元素是否显示，visibility属性指定一个元素应可见或隐藏。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过display属性设置为"none"或"hidden"属性的可见性。但是，请注意这两种方法产生不同的结果
visibility:hidden可以让您隐藏某个元素，但它仍然需要像以前一样的空间。该元素将被隐藏，但仍然会影响布局。
h1.hidden {visibility:hidden;}display:没有隐藏的元素，它不会占用任何空间。元素将被隐藏，但页面会显示：
h1.hidden {display:none;}立即学习“前端免费学习笔记（深入）”；
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子:
立即学习“前端免费学习笔记（深入）”；
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例显示为内联元素的列表项：
li {display:inline;}下面的示例是把span元素作为块元素
span {display:block;}注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display：block是不允许有它内部的嵌套块元素。.
立即学习“前端免费学习笔记（深入）”；
更多实例
如何显示元素的内联元素。
这个例子演示了如何显示一个元素的内联元素。
如何显示元素的块元素。
这个例子演示了如何显示一个元素的块元素。
如何使用一个表的collapse属性
这个例子演示里如何使用表的collapse属性
CSS Display(显示) 与 Visibility（可见性）
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
隐藏不释放空间；
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
隐藏释放空间；
CSS display:none和visibility:hidden区别
你知道CSS display:none和visibility:hidden的区别吗，这里和大家分享一下，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
CSS display:none和visibility:hidden的区别
visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！
Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
CSS display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
我们今天的关于css显示display、可见性visibility、定位position和css display显示的分享已经告一段落，感谢您的关注，如果您想了解更多关于css => display: "none", visibility: "hidden", opacity: 0 的区别、CSS Display(显示) and Visibility（可见性）_html/css_WEB-ITnose、CSS Display(显示) 与 Visibility（可见性）、CSS display:none和visibility:hidden区别的相关信息，请在本站查询。
本文标签：
