一、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是有效的。