[分享]css3控制div显示隐藏

CSS3中包含很多用于控制网页显示的属性，其中之一就是控制的显示与隐藏。使用CSS3的display属性实现这一功能非常简便。/ 隐藏 / div { display: none; } / 显示 / ...

CSS3中包含很多用于控制网页显示的属性，其中之一就是控制的显示与隐藏。使用CSS3的display属性实现这一功能非常简便。

/* 隐藏<div> */
div {
  display: none;
}

/* 显示<div> */
div {
  display: block;
} 

以上代码中，display属性可以设为none或block，分别表示隐藏与显示。将的display设置为none时，将不会被显示在页面上，而将display设置为block时，将被显示出来。

如果仅仅是使用display属性来隐藏和显示，可能会导致页面布局的混乱。因此，推荐使用visibility属性来控制的显示与隐藏。

/* 隐藏<div> */
div {
  visibility: hidden;
}

/* 显示<div> */
div {
  visibility: visible;
} 

与display属性不同，visibility属性可以设为hidden或visible。在visibility设为hidden时，虽然不会被显示出来，但是其所占据的空间仍然会存在。当visibility设为visible时，会被显示出来，并占据相应的空间。

总之，在使用CSS3控制的显示与隐藏时，必须注意页面的布局问题，并根据实际需要选择使用display属性或visibility属性。