html中占位隐藏,css样式占位和不占位隐藏元素的方法

css样式常用display: none;与visibility: hidden;方法设置元素隐藏，其中display:none方法隐藏元素不占位，visibility: hidden;方法隐藏元素占位。下面我们来看一下这两种方法如何使用。

display属性介绍：

display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display：block可以显示一个块元素，或者display：inline是显示一个内联元素。

display主要用的CSS样式有以下三个：

display:block——显示为块级元素。

display:inline——显示为内联元素。

display:inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。

使用display:none设置隐藏元素。

给元素设置display:none样式

A元素

B元素

C元素

效果图：

visibility属性介绍：

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

示例：

给元素设置visibility:hidden样式

1. 元素1
2. 元素2
3. 元素3
4. 元素4

给元素设置display:none样式

1. 元素1
2. 元素2
3. 元素3
4. 元素4

效果图：