1.1display(重点)
- display:none; 隐藏对象
- display:block; 除了转换为块级元素之外,同时还有显示元素的意思。
display隐藏元素后,不再占有原来的位置。
后面应用极其广泛,搭配js可以做很多的网页特效。
1.2visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏
- visibility:visible;元素可视
- visibility:hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置,就用visibility:hidden
如果隐藏元素不想要原来的位置,就用display:none(用处更多 重点)
1.3 overflow 溢出
overflow属性用于隐藏溢出部分
参数值 | 说明 |
---|---|
visible | 对溢出内容不做处理,内容可能会超出容器。 |
hidden | 隐藏溢出容器的内容且不出现滚动条。 |
scroll | 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。 |
auto | 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。 |
一半情况下,我们都不想让溢出的内容显示出来。因为溢出的部分会影响布局。但是如果有定位的盒子,要慎用overflow:hidden 因为它会隐藏多余的部分。