css布局之display

最新推荐文章于 2024-06-25 08:03:29 发布

ZJ_NB

最新推荐文章于 2024-06-25 08:03:29 发布

阅读量198

点赞数

分类专栏：前端学习记录文章标签： css

本文链接：https://blog.csdn.net/ZJ_NB/article/details/116755585

版权

前端学习记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

display 属性

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block(块) 或 inline(行内)。

块级元素（block element）总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
例如：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

行内元素（inline element）不从新行开始，仅占用所需的宽度。
例如：

<span>
<a>
<img>

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

每个元素都有自己的初始display值，但是可以覆盖掉初始值。但是，设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

display和visibility属性的区别

display的三个值：none,inline,block
visibility的两个值：hidden,visible

通过将 display 属性设置为 none 可以隐藏元素，页面将显示为好像该元素不在其中；visibility:hidden; 也可以隐藏元素，但是，该元素仍将占用与之前相同的空间，仍会影响布局。

代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 185px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h1>display:none 与 visiblity: hidden 的区别</h1>
<p><b>visibility:hidden</b> 隐藏元素，但仍占据布局中的空间。</p>
<p><b>display:none</b> 从文档中删除元素。它不会占据任何空间。</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="/i/css/imgbox-1.gif" alt="Box 1" style="width:100%">
  <button onclick="removeElement()">删除</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="/i/css/imgbox-2.gif" alt="Box 2" style="width:100%">
  <button onclick="changeVisibility()">隐藏</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="/i/css/imgbox-3.gif" alt="Box 3" style="width:100%">
  <button onclick="resetElement()">重置所有</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>

转自w3cschool的示例：link