display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a {
background-color: #bfa;
display: none;
width: 500px;
height: 500px;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="我是一个大大的超链接"></a>
<span>hello</span>
<img src="" alt="" />
</body>
</html>
1. display
- 将一个内联元素变成块元素，
- 通过 display 样式可以修改元素的类型
- 可选值：
- inline: 可以将一个元素作为内联元素显示
- block: 可以将一个元素设置为块元素显示
- inline-block: 将一个元素转换为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行 - none: 不显示元素，并且元素不会在页面中继续占有位置
display: none;
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
2. visibility
- 可以用来设置的元素的隐藏和显示的状态
- 可选值：
- visible 默认值，元素默认会在页面中显示
- hidden 元素会隐藏不显示
- 使用 visibility: hidden;隐藏的元素虽然不会在页面中显示，
- 但是它的位置会依然保持
visibility: hidden;
扫一扫
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
