css-display相关知识点

一、css-display

display:block

block元素会占一行;默认情况下,block元素宽度为父元素宽度。
block元素可以设置width,height属性;块级元素设置了宽度,宽度小于父元素宽度,仍会占一行显示。
block元素可以设置margin和padding属性。

display:inline

inline元素不会占一行,多个行内元素排列直到一行排列不下就会重新换行,其宽度随元素的内容变化
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

元素可以拥有block元素可设置的属性,但是不会占一行显示

二、display:none、visibility:hidden 和 opacity:0 之间的区别?

共同点:
都是隐藏

不同点:
一、是否占据空间

display:none,隐藏之后不占位置
visibility:hidden、opacity:0 隐藏之后仍然占据位置

二、子元素是否继承

display:none 不会被子元素继承,父元素都不存在了,子元素也不会显示出。
visibility:hidden 会被元素继承,通过设置子元素visibility:visibility来显示子元素。
opacity:0 会被子元素继承,但是不能设置子元素opacity:1来重新显示。

三、事件绑定

display:none 的元素都已经不在页面存在了,因此无法触发它绑定的事件。
visibility:hidden 不会触发它上面绑定的事件。
opacity:0 元素上面绑定的事件是可以触发的。

四、过渡动画

transition对于display是无效的。
transition对于visibility是无效的。
transition对于opacity是有效的。


版权声明:本文为u012365780原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。