css display属性理解
理解與應(yīng)用css中的display屬性
display屬性是我們?cè)谇岸碎_發(fā)中常常使用的一個(gè)屬性，其中，最常見(jiàn)的有：
- none
- block
- inline
- inline-block
- inherit
下面，我將按照順序?qū)⑸鲜鰩追N屬性做一個(gè)完整的講解。
第一部分：display:none
none這個(gè)值表示此元素將不被顯示。比如，當(dāng)我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，如果看到了某個(gè)煩人的廣告遮擋了我們的實(shí)現(xiàn)，更為可氣的是，它還沒(méi)有關(guān)閉的選項(xiàng)，這時(shí)（以chrome為例），我們就可以按下F12，打開開發(fā)者工具，點(diǎn)擊element，然后使用左上角的選擇工具選中想要?jiǎng)h除的廣告，可以看到element中會(huì)有高亮的一行或幾行代碼，右鍵，點(diǎn)擊Add Attribute，然后輸入：style="display:none"，這時(shí)就可以發(fā)現(xiàn)廣告不見(jiàn)啦！ 當(dāng)然display:none的用法絕不是專門用于這里的，它還可以用于二級(jí)下拉菜單的制作中將二級(jí)下拉菜單先設(shè)置位display:none;,當(dāng)鼠標(biāo)滑過(guò)一級(jí)菜單時(shí)，再顯示出來(lái)（詳見(jiàn)《如何實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單》）。還可以用于登陸模態(tài)框的制作等等。
?
第二部分：display:block
使用了display：block;之后， 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。我們先來(lái)回顧以下塊級(jí)元素是什么，他有什么特點(diǎn)。
既然要區(qū)分塊級(jí)元素和行內(nèi)元素，就得先說(shuō)說(shuō)標(biāo)準(zhǔn)文檔流了。標(biāo)準(zhǔn)文檔流：簡(jiǎn)稱標(biāo)準(zhǔn)流，指的是在不使用其他的與排列和定位相關(guān)的css規(guī)則時(shí)，各種元素的排列規(guī)則。于是，我們將“各種元素”分為塊級(jí)元素和行內(nèi)元素。（注：實(shí)際上還有空元素，如<br>用于換行，<hr>為一條水平線，這里對(duì)空元素不做過(guò)多討論）
塊級(jí)元素特點(diǎn)：
- 總是以一個(gè)塊的形式表現(xiàn)出來(lái)，占領(lǐng)一整行。若干同級(jí)塊元素會(huì)從上之下依次排列（使用float屬性除外）。
- 可以設(shè)置高度、寬度、各個(gè)方向外補(bǔ)丁（margin）以及各個(gè)方向的內(nèi)補(bǔ)丁（padding）。
- 當(dāng)寬度（width）缺省時(shí)，它的寬度時(shí)其容器的100%，除非我們給它設(shè)定了固定的寬度。
- 塊級(jí)元素中可以容納其他塊級(jí)元素或行內(nèi)元素。
- 常見(jiàn)的塊級(jí)元素由<p><div><h1><li>等等。
- 塊級(jí)元素的display屬性值默認(rèn)為block。
行內(nèi)元素特點(diǎn)：
- 它不會(huì)單獨(dú)占據(jù)一整行，而是只占領(lǐng)自身的寬度和高度所在的空間。若干同級(jí)行內(nèi)元素會(huì)從左到右（即某個(gè)行內(nèi)元素可以和其他行內(nèi)元素共處一行），從上到下依次排列。
- 行內(nèi)元素不可以設(shè)置高度、寬度，其高度一般由其字體的大小來(lái)決定，其寬度由內(nèi)容的長(zhǎng)度控制。
- 行內(nèi)元素只能設(shè)置左右的margin值和左右的padding值，而不能設(shè)置上下的margin值和上下的padding值。因此我們可以通過(guò)設(shè)置左右的padding值來(lái)改變行內(nèi)元素的寬度。
- 常見(jiàn)的行內(nèi)元素由<a><em><img>等等。
- 行內(nèi)元素一般不可以包含塊級(jí)元素。
- 塊級(jí)元素的display屬性值默認(rèn)為inline。
ok!簡(jiǎn)單回顧了塊級(jí)元素和行內(nèi)元素之后，我們就可以進(jìn)行下一步講解了。
通過(guò)對(duì)一個(gè)行內(nèi)元素設(shè)置display: block;可以將行內(nèi)元素設(shè)置為塊級(jí)元素，進(jìn)而設(shè)置它的寬高和上下左右的padding和margin。
應(yīng)用：
? ? ?如果我們經(jīng)常會(huì)制作導(dǎo)航欄，這時(shí)就要使用ul li 和a組合的方式，但是<a>是行內(nèi)元素，我們無(wú)法設(shè)置它的寬和高，這時(shí)，就可以在<a>的樣式表中，將之設(shè)置為display：block。這樣就可以設(shè)置它的寬和高，以及上下左右的margin和padding以達(dá)到我們想要的效果了。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<title>Title</title> ????<style> ????????*{padding: 0;margin:0;list-style: none;} ????????ul li{float: left;} ????????a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;} ????</style> </head> <body> ????<ul> ????????<li><a href="">1</a></li> ????????<li><a href="">2</a></li> ????????<li><a href="">3</a></li> ????????<li><a href="">4</a></li> ????????<li><a href="">5</a></li> ????</ul> </body> </html> |
效果如下：
?
第三部分：display:inline
此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。在第二部分中，我們介紹了行內(nèi)元素和塊級(jí)元素。顯然，display:inline的作用即可以將一個(gè)塊級(jí)元素轉(zhuǎn)換成行內(nèi)元素，那么這個(gè)塊級(jí)元素將不能再設(shè)置寬和高以及上下方向的margin和padding。
第四部分：display：inline-block
display:inline-block是什么呢？大家對(duì)這個(gè)屬性一定是不陌生的。根據(jù)名字，實(shí)際上我們就可以才出來(lái)它是結(jié)合了inline和block的特性于一身。即設(shè)置了inline-block屬性的元素既具有block元素可以設(shè)置width和height屬性的特性，又保持了inline元素不換行的特性。
舉例說(shuō)明，我們之前在做橫向?qū)Ш讲藛蔚臅r(shí)候，一般是用ul li a組合，然后將li設(shè)置為float，這樣就可以得到橫向的導(dǎo)航標(biāo)簽了。而現(xiàn)在我們可以通過(guò)li和display:inline-block;來(lái)實(shí)現(xiàn)。
代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<title>Title</title> ????<style> ????????ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;} ????????li{display: inline-block;border: thin solid red;} ????</style> </head> <body> ????<ul> ????????<li><a href="">1</a></li> ????????<li><a href="">2</a></li> ????????<li><a href="">3</a></li> ????????<li><a href="">4</a></li> ????????<li><a href="">5</a></li> ????</ul> </body> </html> |
效果圖如下：
? 確實(shí)實(shí)現(xiàn)了橫向的排列，實(shí)際上，也可以設(shè)置寬和高，大家可以自己嘗試。但是，很明顯有一個(gè)問(wèn)題---我將padding和margin的值都設(shè)置為0，為什么他們之間還會(huì)有距離呢？實(shí)際上，這是inline元素自身出現(xiàn)的問(wèn)題，而inline-block結(jié)合了inline和block屬性，當(dāng)然也就存在這個(gè)問(wèn)題了。這些空隙是空白符，在瀏覽器中，空白符是不會(huì)被瀏覽器忽略的，多個(gè)連續(xù)的空白符瀏覽器會(huì)自動(dòng)將其合并成一個(gè)。我們編寫代碼時(shí)寫的空格，換行都會(huì)產(chǎn)生空白符。所以自然而然的兩個(gè)元素之間會(huì)有空白符，如果將上述例子中的a標(biāo)簽寫成一行，空白符消失，菜單之間也就緊湊起來(lái)了。
解決方法：我們要明白空白符歸根結(jié)底是一個(gè)字符，只要我們將ｕｌ中的字符的大小設(shè)置位０，那么空白符也就不會(huì)存在了，但是這是a的字體大小也會(huì)繼承ul的字體大小，那么就不見(jiàn)了，該怎么辦，只需要將a中再設(shè)置一個(gè)字體不為0的大小覆蓋
即可。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> ????<meta charset="UTF-8"> ????<title>Title</title> ????<style> ???????<strong> ul{font-size: 0;}</strong> ????????ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;} ????????li{display: inline-block;border: thin solid red;<strong>font-size: 15px;</strong>} ????</style> </head> <body> ????<ul> ????????<li><a href="">1</a></li> ????????<li><a href="">2</a></li> ????????<li><a href="">3</a></li> ????????<li><a href="">4</a></li> ????????<li><a href="">5</a></li> ????</ul> </body> </html> |
最終得到的效果圖如下：
?
我們還可以通過(guò)inline-block完成一個(gè)常見(jiàn)的三列布局。
html代碼如下：
| 1 2 3 4 5 6 7 | <div id="header">我是header</div> <div id="content"> ????<div id="left">我是left</div> ????<div id="center">我是center</div> ????<div id="right">我是right</div> </div> <div id="footer">我是footer</div> |
css代碼如下：
| 1 2 3 4 | #header,#footer{height: 50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;} #content{width:800px;height: 500px;margin: 0 auto;background: #aaa;<strong>font-size: 0;</strong>}//解決inline元素產(chǎn)生的空白符問(wèn)題 #left,#right{display: inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;} #center{display: inline-block;width: 400px;height: 500px;background: #dadada;<strong>font-size: 30px;</strong>}//這里一定要重新設(shè)置font-size。 |
最終效果圖如下：
第五部分：display:inherit
規(guī)定應(yīng)該從父元素繼承 display 屬性的值。舉例如下：
html代碼如下：
| 1 2 3 4 | <div id="parent"> ????<div id="first_son"></div> ????<div id="second_son"></div> </div>?? |
css代碼如下：
| 1 2 3 | #parent{ <strong>display: inline-block;</strong> font-size: 0; background: #cadafa;width: 400px;height: 300px;} #first_son{<strong>display: inherit;</strong> background: #eaedac;width: 200px;height: 100px;} #second_son{<strong>display: inherit;</strong> background: #da5dd8;width: 200px;height: 100px;} |
效果圖如下：
即我們先設(shè)置了id為parent的元素的display屬性值為inline-block，然后將其子元素的display屬性值設(shè)置為inherit（繼承），于是，子div的display屬性值繼承了父元素的display屬性值為inline-block。（注意，我在id為parent的div元素中設(shè)置了font-size:0px;這樣可以有效解決由inline元素帶來(lái)的空白符問(wèn)題。）
轉(zhuǎn)載于:https://www.cnblogs.com/duanzexun/p/10869892.html
總結(jié)
以上是生活随笔為你收集整理的css display属性理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 基因组装配新前沿：长片段完成完整的基因组
- 下一篇： 51nod 1267 4个数和为0