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

全國咨詢/投訴熱線：400-618-4000

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

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

學web前端到傳智播客


很多人在使用 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;
}

效果如下:
display效果圖01

（2）display: block


display 屬性為 block 時,默認有顯示標簽的意義，同時可以將標簽轉(zhuǎn)換為塊元素顯示，這時標簽會獨占一行，并且可以設置寬高屬性。


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 時,指定對象為內(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;
}


效果如下：

display效果圖3


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


效果如下：

visibility效果圖1



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

效果如下：

overflow效果圖1


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

效果圖：

overflow效果圖2


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

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


效果如下：

overflow4

總結(jié):

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

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

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

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

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

0 分享到：
和我們在線交談！