[分享]css3控制div显示

CSS3是网页设计中应用广泛的样式表语言，可以控制页面的样式和布局。其中，控制div显示是CSS3的基础功能之一。div { display: block; / 设置div为块级元素 / width:...

CSS3是网页设计中应用广泛的样式表语言，可以控制页面的样式和布局。其中，控制div显示是CSS3的基础功能之一。

div {
  display: block; /* 设置div为块级元素 */
  width: 100px; /* 设置div宽度为100px */
  height: 100px; /* 设置div高度为100px */
  background-color: #ccc; /* 设置div背景颜色为灰色 */
} 

在上述代码中，div代表需要控制显示的元素，通过设置display属性为block，可以将其转换为块级元素，同时设置宽度、高度和背景颜色等样式属性，使其可见。下面是一些常见的display属性值：

• none：隐藏元素
• block：将元素转换为块级元素
• inline：将元素转换为内联元素
• inline-block：将元素转换为内联块级元素
• flex：将元素转换为弹性盒子

除了display属性，CSS3还提供了其他一些属性和特效，可以控制元素的显示效果，例如：

div:hover {
  background-color: #f00; /* 鼠标悬浮时，将div背景颜色变为红色 */
  transform: scale(1.2); /* 鼠标悬浮时，将div放大1.2倍 */
  transition: all 0.5s ease; /* 设置渐变效果，时长为0.5秒，缓动方式为ease */
} 

在上述代码中，我们使用:hover伪类来保证当鼠标悬浮在div上时，它的样式会发生变化。同时，通过transform属性和transition属性设置放大和渐变效果。

总之，CSS3提供了多种方法和属性来控制div的显示效果，让我们可以更加自由和灵活地进行网页设计。