很多人在使用 css 時,對 Display, Visibility 和 Overflow 三個屬性的理解并不是很清晰,這里就對這三個屬性做一下分析,對應三個屬性在使用時的區別.
Display
display 用來設置或檢索對象是否及如何顯示。
- display: none
display 屬性為 none 時,隱藏標簽對象。不會為對象保留其位置空間,它下面所在的元素會被自動上移占有被隱藏標簽位置。
html 代碼:
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
CSS代碼:
div{
width: 200px;
height: 100px;
}
#a{
background-color: red;
}
#b{
background-color: green;
display: none;
}
#c{
background-color: blue;
}
效果如下:
- display: block
display 屬性為 block 時,默認有顯示標簽的意義,同時可以將標簽轉換為塊元素顯示,這時標簽會獨占一行,并且可以設置寬高屬性。
HTML 代碼:
<span id="a">A</span>
<span id="b">B</span>
<span id="c">C</span>
CSS代碼:
span{
width: 200px;
height: 100px;
font-size: 50px;
color: gray;
}
#a{
background-color: red;
}
#b{
background-color: green;
}
#c{
background-color: blue;
display: block;
}
效果如下:
- display: inline
display 屬性為 inline 時,指定對象為內聯元素,此時對象的寬高屬性不在有效,元素大小取決于實際內容大小。
HTML 代碼:
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
CSS代碼:
div{
width: 200px;
height: 100px;
font-size: 50px;
color: gray;
display: inline;
}
#a{
background-color: red;
}
#b{
background-color: green;
}
#c{
background-color: blue;
}
效果如下:
Visibility
visibility 屬性用來設置或檢索是否顯示對象。與 display 屬性不同，該屬性為隱藏的對象保留其占據的物理空間, 該屬性默認值為 visible, 設置對象可見。
- visibility: hidden
visibility 屬性為 hidden 時,隱藏標簽對象。但該對象所占用的位置空間會被保留。
HTML代碼:
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
CSS代碼:
div{
width: 200px;
height: 100px;
font-size: 50px;
color: gray;
}
#a{
background-color: red;
}
#b{
background-color: green;
visibility: hidden;
}
#c{
background-color: blue;
}
效果如下:
Overflow
overflow 屬性用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
- overflow: visible
overflow 默認值為 visible, 作用是按實際效果顯示 ,不剪切超出范圍的內容 。
HTML 代碼:
<div id="a">
<div id="b"></div>
</div>
CSS代碼:
#a{
width: 300px;
height: 100px;
background-color: red;
overflow: visible;
?
}
#b{
width: 200px;
height: 300px;
background-color: blue;
}
效果如下:
- overflow: hidden
overflow 值為 hidden時,會將超出對象尺寸的內容進行裁剪，將不出現滾動條。
HTML 代碼:
<div id="a">
<div id="b"></div>
</div>
CSS代碼:
#a{
width: 300px;
height: 100px;
background-color: red;
overflow: hidden;
?
}
#b{
width: 200px;
height: 300px;
background-color: blue;
}
效果如下:
- overflow: scroll
overflow 值為 scroll, 作用是將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容 。
HTML 代碼:
<div id="a">
<div id="b"></div>
</div>
CSS代碼:
#a{
width: 300px;
height: 100px;
background-color: red;
overflow: scroll;
?
}
#b{
width: 200px;
height: 300px;
background-color: blue;
}
效果如下:
- overflow: auto
overflow 值為 auto時, 作用是在需要時剪切內容并添加滾動條，該值為body對象和textarea的默認值。
HTML 代碼:
<div id="a">
<div id="b"></div>
</div>
CSS代碼:
#a{
width: 300px;
height: 100px;
background-color: red;
overflow: auto;
?
}
#b{
width: 200px;
height: 300px;
background-color: blue;
}
效果如下:
總結:
- display 和 visibility 屬性都是用來設置或檢索對象是否及如何顯示。
- 使用diplay 隱藏對象時,在文檔流中不占空間.后續對象會占據隱藏對象位置。
- 使用 visibility 隱藏對象時,在文檔流中會保留隱藏對象所占用的空間。
- overflow 主要用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容顯示。
