首頁技術文章正文

Display、Visibility 和 Overflow有什么區(qū)別？【web前端培訓】

更新時間:2020-05-25 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif


很多人在使用 CSS 時，對 Display，Visibility 和 Overflow 三個屬性的理解并不是很清晰，這里就對這三個屬性做一下分析，對應三個屬性在使用時的區(qū)別。

1、Display

display 用來設置或檢索對象是否及如何顯示。

（1）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;
}

效果如下:
1590392697347_1.png

（2）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;
}


效果如下:

1590392709737_2.png


（3）display: inline

display 屬性為 inline 時,指定對象為內(nèi)聯(lián)元素,此時對象的寬高屬性不在有效,元素大小取決于實際內(nèi)容大小。

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;
}


效果如下：

1590392721631_3.png


2、Visibility

visibility 屬性用來設置或檢索是否顯示對象。與 display 屬性不同，該屬性為隱藏的對象保留其占據(jù)的物理空間, 該屬性默認值為 visible, 設置對象可見。


（1）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;
}


效果如下：

1590392730797_4.png



3、Overflow

overflow 屬性用來檢索或設置當對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。

（1）overflow: visible

overflow 默認值為 visible, 作用是按實際效果顯示 ,不剪切超出范圍的內(nèi)容 。


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;
}


效果如下：

1590392740786_5.png


（2）overflow: hidden

overflow 值為 hidden時,會將超出對象尺寸的內(nèi)容進行裁剪，將不出現(xiàn)滾動條。

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;
}


效果圖：

1590392750713_6.png


（3）overflow: scroll

overflow 值為 scroll，作用是將超出對象尺寸的內(nèi)容進行裁剪，并以滾動條的方式顯示超出的內(nèi)容 。


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;
}
1590392761329_7.png

（4）overflow: auto

overflow 值為 auto時, 作用是在需要時剪切內(nèi)容并添加滾動條，該值為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;
}


效果如下：

1590392819932_7.png

總結:

  1. display 和 visibility 屬性都是用來設置或檢索對象是否及如何顯示。

  2. 使用diplay 隱藏對象時,在文檔流中不占空間.后續(xù)對象會占據(jù)隱藏對象位置。

  3. 使用 visibility 隱藏對象時,在文檔流中會保留隱藏對象所占用的空間。

  4. overflow 主要用來檢索或設置當對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容顯示。推薦了解黑馬程序員web前端培訓課程。


猜你喜歡：

什么是域名?域名和URL有什區(qū)別?

瀏覽器內(nèi)核是什么?如何檢測瀏覽器內(nèi)核?【web前端須知】




分享到：
在線咨詢 我要報名
和我們在線交談！