目录
4.使用visibility和transition实现平滑的元素过渡效果
一、介绍
1.Display:
1.1.概念:
display属性用于定义元素的布局模式，即元素如何在页面中呈现。
1.2.特点:
它有多种取值，每种取值对应不同的布局方式，如block、inline、inline-block、flex、grid等。
1.3.用法:
display: block;使元素以块级元素显示，占据一行。
display: inline;使元素以行内元素显示，与其他行内元素在同一行内。
display: inline-block;结合了块级元素和行内元素的特性，即可以设置宽高，同时又可以在同一行内显示。
display: flex;创建一个弹性盒子，使元素可以灵活布局。
display: grid;创建一个网格容器，使元素可以以网格形式布局。
1.4.应用:
用于控制元素的布局方式，根据设计需求选择不同的display值。
1.5.功能:
控制元素的显示方式，影响元素的盒模型、位置和大小等。
2.Visibility:
2.1.概念:
visibility属性用于控制元素的可见性，即元素是否可见。
2.2.特点:
它有两种取值，visible和hidden，分别表示元素可见和不可见。
2.3.用法:
visibility: visible;使元素可见。
visibility: hidden;使元素不可见，但仍占据页面布局空间。
2.4.应用:
用于控制元素在页面中的可见性，常用于实现动态显示和隐藏效果。
2.5.功能:
控制元素的可见性，但不影响元素的布局。
总结：
- Display主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。
- Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。
二、使用
1.隐藏元素- display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;}display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {display:none;}2.Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
- <h1>
- <p>
- <div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
- <span>
- <a>
3.如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
li {display:inline;}下面的示例把span元素作为块元素：
span {display:block;}注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
4.display和visility属性
4.1Display:
selector {
display: value;
}
selector: 要应用样式的HTML元素选择器。value: 布局方式的取值，如block、inline、inline-block、flex、grid等。
4.2Visibility:
selector {
visibility: value;
}
selector: 要应用样式的HTML元素选择器。value: 可见性的取值，可以是visible（可见）或hidden（不可见）。
三、应用实例
1.使用display和visibility实现响应式菜单
HTML:
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button id="toggleMenu">Toggle Menu</button>
CSS:
#menu {
display: none; /* 初始时菜单隐藏 */
}
#menu.visible {
display: block; /* 显示菜单 */
}
/* 其他样式 */
JavaScript:
document.getElementById("toggleMenu").addEventListener("click", function() {
var menu = document.getElementById("menu");
menu.classList.toggle("visible");
});
演示了如何通过JavaScript来控制菜单的显示和隐藏，使用display: none;和display: block;来实现。当按钮被点击时，菜单的可见性会切换。
2.使用visibility实现模态框
HTML:
<div id="modal" style="visibility: hidden;">
<div id="modal-content">
<h2>Modal Title</h2>
<p>Modal content goes here.</p>
<button id="closeModal">Close</button>
</div>
</div>
<button id="openModal">Open Modal</button>
CSS:
#modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 其他样式 */
JavaScript:
document.getElementById("openModal").addEventListener("click", function() {
var modal = document.getElementById("modal");
modal.style.visibility = "visible";
});
document.getElementById("closeModal").addEventListener("click", function() {
var modal = document.getElementById("modal");
modal.style.visibility = "hidden";
});
实例演示了如何使用visibility属性创建一个简单的模态框。点击按钮打开模态框，点击模态框内的关闭按钮关闭模态框。
3.使用display和flex实现响应式网格布局
HTML:
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
CSS:
.grid-container {
display: flex;
flex-wrap: wrap;
}
.grid-item {
flex: 1 0 200px; /* 每个网格项最小宽度200px */
background-color: lightblue;
margin: 10px;
}
这个实例演示了如何使用display: flex;和flex-wrap: wrap;创建一个响应式的网格布局。网格项会根据容器宽度自动换行。
4.使用visibility和transition实现平滑的元素过渡效果
HTML:
<div id="element" class="hidden">Hover Me</div>
CSS:
#element {
width: 200px;
height: 200px;
background-color: lightblue;
transition: visibility 0.3s ease; /* 平滑过渡效果 */
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
JavaScript:
document.getElementById("element").addEventListener("mouseenter", function() {
this.classList.remove("hidden");
this.classList.add("visible");
});
document.getElementById("element").addEventListener("mouseleave", function() {
this.classList.remove("visible");
this.classList.add("hidden");
});
这个实例演示了如何使用visibility属性和CSS过渡来创建一个平滑的元素过渡效果。当鼠标悬停在元素上时，它会平滑地显示出来，鼠标离开时它会平滑地隐藏起来。
四、总结
display属性：
display属性用于定义元素应该生成的框的类型。- 常见的
display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。inline-block: 元素被渲染为内联块级元素，同时具有块级元素和内联元素的特性。flex: 元素被渲染为弹性盒子容器。grid: 元素被渲染为网格容器。
- 通过组合不同的
display属性值，可以创建各种各样的布局。
visibility属性：
visibility属性用于控制元素的可见性。- 常见的
visibility属性值包括：visible: 元素可见。hidden: 元素不可见，但仍占据空间。
- 与
display: none;相比，visibility: hidden;隐藏的元素仍会占据文档流中的位置，只是不可见。 visibility属性可以与过渡效果一起使用，以创建平滑的元素过渡效果。