-
Notifications
You must be signed in to change notification settings - Fork 30
/
display-and-hidden.md
191 lines (162 loc) · 4.83 KB
/
display-and-hidden.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
- display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。
- visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。
## display 属性
| 属性值 | 描述 |
| --- | --- |
| none | 此元素不会被显示。|
当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。
在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
```
当为第一个 `<div>` 标签设置 display 属性值为 none 时，该 `<div>` 标签会被隐藏。
| 属性值 | 描述 |
| --- | --- |
| block | 此元素将显示为块级元素。|
该值主要作用于**内联元素**。如果将内联元素的 CSS 属性 display 设置为 block 时，该内联元素将在浏览器中显示成块级元素效果。
在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#s1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#s2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<span id="s1">这是一个span</span>
<span id="s2">这是一个span</span>
</body>
</html>
```
当为第一个 `<span>` 标签设置 display 属性值为 block 时，该 `<span>` 标签会呈现块级元素效果。
| 属性值 | 描述 |
| --- | --- |
| inline | 默认值，此元素会被显示为内联元素。|
该值主要作用于**块级元素**。如果将内联元素的 CSS 属性 display 设置为 inline 时，该内联元素将在浏览器中显示成内联元素效果。
在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">这是一个div</div>
<div id="d2">这是一个div</div>
</body>
</html>
```
当为第一个 `<div>` 标签设置 display 属性值为 inline 时，该 `<div>` 标签会呈现内联元素样式。
| 属性值 | 描述 |
| --- | --- |
| inline-block | 行内块元素。|
当将 CSS 属性 display 设置为 inline-block 时，该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果，元素之间呈现内联元素效果。
在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">这是一个div</div>
<div id="d2">这是一个div</div>
</body>
</html>
```
分别为两个 `<div>` 标签设置 display 属性值为 inline-block 时，这两个 `<div>` 会显示在一行中。
### visibility 属性
visibility 属性指定一个元素是否是可见的。
> **值得注意的是:** visibility 属性设置元素不可见的元素，但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。
| 属性值 | 描述 |
| --- | --- |
| visible | 默认值，元素是可见的。|
| hidden | 元素是不可见的。|
在 HTML 页面中定义两个 `<div>` 标签，并设置 CSS 样式，具体代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
#d2 {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">这是一个div</div>
<div id="d2">这是一个div</div>
</body>
</html>
```
当为第一个 `<div>` 标签设置 visibility 属性值为 hidden 时，该 `<div>` 会被隐藏。