首頁技術(shù)文章正文

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

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

1577370495235_學(xué)IT就到黑馬程序員.gif


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

1、Display

display 用來設(shè)置或檢索對(duì)象是否及如何顯示。

（1）display: none

display 屬性為 none 時(shí)，隱藏標(biāo)簽對(duì)象。不會(huì)為對(duì)象保留其位置空間，它下面所在的元素會(huì)被自動(dòng)上移占有被隱藏標(biāo)簽位置。
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 時(shí),默認(rèn)有顯示標(biāo)簽的意義，同時(shí)可以將標(biāo)簽轉(zhuǎn)換為塊元素顯示，這時(shí)標(biāo)簽會(huì)獨(dú)占一行，并且可以設(shè)置寬高屬性。

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 時(shí),指定對(duì)象為內(nèi)聯(lián)元素,此時(shí)對(duì)象的寬高屬性不在有效,元素大小取決于實(shí)際內(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 屬性用來設(shè)置或檢索是否顯示對(duì)象。與 display 屬性不同，該屬性為隱藏的對(duì)象保留其占據(jù)的物理空間, 該屬性默認(rèn)值為 visible, 設(shè)置對(duì)象可見。


（1）visibility: hidden

visibility 屬性為 hidden 時(shí)，隱藏標(biāo)簽對(duì)象。但該對(duì)象所占用的位置空間會(huì)被保留。

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 屬性用來檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。

（1）overflow: visible

overflow 默認(rèn)值為 visible, 作用是按實(shí)際效果顯示 ,不剪切超出范圍的內(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時(shí),會(huì)將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，將不出現(xiàn)滾動(dòng)條。

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，作用是將超出對(duì)象尺寸的內(nèi)容進(jìn)行裁剪，并以滾動(dòng)條的方式顯示超出的內(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時(shí), 作用是在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條，該值為body對(duì)象和textarea的默認(rèn)值。

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

總結(jié):

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

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

  3. 使用 visibility 隱藏對(duì)象時(shí),在文檔流中會(huì)保留隱藏對(duì)象所占用的空間。

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


猜你喜歡：

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

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




分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！