欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2.元素的显示与隐藏

程序员文章站 2023-02-04 09:15:47
学习pink 老师css视频后的总结 元素的显示与隐藏 类似于网站广告,当我们点击关闭就不见了,但我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来。 1 display属性 display属性用于设置一个元素应如何显示。 display: none; 隐藏对象 diaplay ......

学习pink 老师css视频后的总结

元素的显示与隐藏

类似于网站广告,当我们点击关闭就不见了,但我们重新刷新页面,会重新出现!

本质:让一个元素在页面中隐藏或者显示出来。

1 display属性

display属性用于设置一个元素应如何显示。

 

  • display: none; 隐藏对象
  • diaplay: block;除了转换为块级元素外,同时还有显示元素的意思

dispaly隐藏元素后,不再占有原来的位置。

 2 visibility属性

visibility属性用于指定一个元素是可见还是隐藏的。

visibility: hidden; 元素隐藏

visibility: visible; 元素可视

visibility隐藏元素后,继续占有原来的位置。

如果隐藏元素还想要原来的位置,就用visibility: hidden

不想占用原来的位置,就用display: none


3 overflow属性

overflow属性指定了如果内容溢出了制定边框,会发生什么

属性值 描述
visible 不剪切内容,也不添加滚动条
hidden 隐藏溢出的部分
scroll 不管内容是否超出,都显示滚动框
auto 根据内容,决定是否显示滚动条