CSS中Visibility和Display属性的区别是什么
CSS中Visibility和Display属性的区别是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
站在用户的角度思考问题,与客户深入沟通,找到王益网站设计与王益网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟主机、企业邮箱。业务覆盖王益地区。
CSS DIV中Visibility和Display属性的区别
这里有个Demo可以比较visibility:hidden和display:none的区别。点击页面上部的链接,页面里绿色的Div将会进行相应的改变。请留意一下当绿色的Div属性分别被设为visibility:hidden和display:none时对其它元素会有什么影响。
CSS DIV中Visibility属性的用法
Visibility属性共有四个可用的值(visible、hidden、collapse和inherit),但常用的值是visible和hidden。
以下为引用的内容:
visibility:visible
/*元素可见,默认值*/
visibility:hidden
/*元素不可见,但仍然为其保留相应的空间*/
visibility:collapse
/*只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。*/
visibility:inherit
/*继承上级元素的visibility值。*/
CSS DIV中Display属性的用法
Display属性的可用值有很多,但在这里我们只关注其中的几个值:block、none和inline。
以下为引用的内容:
display:none
/*元素不可见,并且不为其保留相应的位置*/
display:block
/*表现为一个块级元素(一般情况下独占一行)*/
display:inline
/*表现为一个行级元素(一般情况下不独占一行)*/
从这里可以看出,虽然Visibility和Display属性都可以隐藏一个元素,但它们之间的不同点在于visibility:hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而display:none则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。
另外,display:block和display:inline的区别在于block元素会在页面中独占一行,而inline元素不会,有的对象默认为block元素,而有的对象则默认为inline元素,大家在使用时需要注意防止相同属性的重复定义。
CSS DIV中什么时候使用Visibility或者Display属性?
Visibility和Display属性虽然都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none。
在现实中我(作者)更多的倾向于使用display属性(相信这也是大多数人的习惯,bolo注)。当你决定用display:none来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。
CSS DIV中Visibility和Display对SEO的影响
有时我们会通过把堆砌的关键词隐藏而达到作弊的目的,但不应该使用visibility:hidden和display:none,而应该把关键词颜色设为和背景色相同,或者把关键词的字号设为非常小,而令访客无法发现。
有的人则因为害怕搜索蜘蛛的的反感而为visibility:hidden和display:none的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的,搜索引擎也理解这一做法(事实上搜索引擎往往忽略CSS,bolo注),因此如果你的目的不是欺骗搜索引擎,你大可以放心地使用visibility:hidden和display:none去隐藏内容。
看完上述内容,你们掌握CSS中Visibility和Display属性的区别是什么的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
分享题目:CSS中Visibility和Display属性的区别是什么
链接地址:http://myzitong.com/article/ggjjos.html