(1.1)display:none;隐蔽元素

display:block;以块级元素显示;

(1.2)visibility:hidden;隐蔽元素;

htmlimg隐藏显示CSS中元素显示隐蔽及其运用 NoSQL

visibility:visibile;显示元素;

display和visibility的差异在于,利用display属性隐蔽元素后,不再霸占原来位置;而利用visibility属性隐蔽元素后,其原来位置仍被霸占。

2.元素内容显示与隐蔽

overflow属性会对溢出元素框的内容如何展示进行设置。

(2.1)overflow:visible;不做限定,保持原样显示,为默认值

(2.2)overflow:hidden;超出元素框的内容被隐蔽

(2.3)overflow:scroll;添加滚动条,不管是否有内容溢出

(2.4)overflow:auto;当有内容溢出时,添加滚动条

3.元素显示与隐蔽的运用

制作遮罩效果。

实现思路:遮罩层默认为隐蔽,当鼠标在元素上方时则显示,鼠标不在元素上方时则隐蔽。

<style> { margin: 0; padding: 0; } .outer { position: relative; width: 520px; height: 280px; } / mask元素,默认不显示,设置为绝对定位,其父元素设置为相对定位 / .mask { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; / 设置mask元素的背景的颜色、图标 / background: rgba(12, 12, 12, 0.2) url(imges/arrow.png) no-repeat center; } / 伪类实现鼠标进入mask元素时效果 / .outer:hover .mask { display: block; } </style><body> <div class="outer"> <img src="imges/tb.jpg" alt=""> <!-- 遮罩层 --> <div class="mask"></div> </div></body>