一. display属性
前面我们已经学习过使用display可以切换行内元素和块级元素.
如果把display : none, 则这个元素不会在页面显示, 就像这个元素从来没有出现过一样.
将来的js中做一些动态效果的时候, 有时候会用到这个属性和值.
还有其他的一些值, 后面再慢慢接触.
<style>
div{
width : 200px;
height : 200px;
background-color : pink;
}
p {
display: none;
}
</style>
<body>
<div>第一个div</div>
<p></p>
<div>第二个div</div>
二. visibility属性
这个属性也是用来设置元素的可见性.
他常用的的两个值: visible, hidden
visible是默认值.
当设置为hidden的时候, 这个元素也是不可见, 但是他占据的位置还在.
"人不在了,但是影响还在"
<style>
div{
width : 200px;
height : 200px;
background-color : pink;
}
p {
width : 200px;
height : 40px;
background-color : gray;
visibility: hidden;
}
</style>
<body>
<div>第一个div</div>
<p></p>
<div>第二个div</div>
</body>
三. overflow属性
当子元素的尺寸超出父元素某一方向的尺寸的时候, 就出现了溢出(overflow).
对溢出的部分应该如何处理呢, 是由于父元素的overflow属性来决定.
默认值是: overflow : visible; 溢出部分在外部正常显示
溢出情况:
<style>
*{
margin: 0;
padding: 0;
}
div{
width : 200px;
height : 200px;
background-color : pink;
margin: 10px auto;
}
p{
width: 300px;
height: 100px;
background-color: gray;
}
</style>
<div>
<p></p>
</div>
3.1 overflow : hidden;
注意: 给父容器添加overflow属性
这个值表示把溢出的部分隐藏.
3.2 overflow: scroll;
浏览器会显示滚动条以便查看其余内容.
3.3 overflow : auto;
由浏览器决定如何显示. 如果有溢出部分, 则可以滚动.