教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

CSS中display、visiblity及overflow的作用和區(qū)別？【web前端培訓(xùn)】

更新時(shí)間:2020年05月25日12時(shí)04分 來(lái)源:傳智播客 瀏覽次數(shù):

學(xué)web前端到傳智播客


很多人在使用 CSS 時(shí)，對(duì) Display，Visibility 和 Overflow 三個(gè)屬性的理解并不是很清晰，這里就對(duì)這三個(gè)屬性做一下分析，對(duì)應(yīng)三個(gè)屬性在使用時(shí)的區(qū)別。
1、Display
display 用來(lái)設(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;
}

效果如下:
display效果圖01

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


效果如下:

display效果圖2


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


效果如下：

display效果圖3


2、Visibility

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


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


效果如下：

visibility效果圖1



3、Overflow

overflow 屬性用來(lái)檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過(guò)其指定高度及寬度時(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;
}

效果如下：

overflow效果圖1


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

效果圖：

overflow效果圖2


（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;
}
overflow效果圖3

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


效果如下：

overflow4

總結(jié):

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

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

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

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

猜你喜歡：
什么是CSS，版本有哪些?
前端潛規(guī)則：CSS書寫規(guī)則

0 分享到：
和我們?cè)诰€交談！