轉自 :http://www.cnblogs.com/zhuzhenwei918/p/6058457.html
基本是摘抄這位大佬的總結 但是精簡了一部分 想看全文的可以戳上面鏈接 然後加了些自己的筆記
display屬性是我們在前端開發中常常使用的一個屬性,其中,最常見的有:
- none
- block
- inline
- inline-block
- inherit
第一部分:display:none
none隱藏元素並脫離文檔流。
應用:
它還可以用於二級下拉菜單的製作中將二級下拉菜單先設置位display:none;,當鼠標滑過一級菜單時,再顯示出來(詳見《如何實現導航菜單中的二級下拉菜單》)。還可以用於登陸模態框的製作等等。
第二部分:display:block
塊級元素特點:
- 不設寬度時,默認爲100%,即父級寬度。默認高度爲子元素高度。
- 支持寬高。
- 獨佔一行
- 塊級元素中可以容納其他塊級元素或行內元素。
- 支持上下左右的margin和padding。
- 不支持vertical-align。
- 常見的塊級元素由<p><div><h1><li><ul><ol><dl>等等。
注意:p h1 h2 h3 h4 h5 h6 dt 標籤不能再嵌套塊標籤 包括自身 否則設置css樣式將無效
a標籤不能再嵌套自身
通過對一個行內元素設置display: block;可以將行內元素設置爲塊級元素,進而設置它的寬高和上下左右的padding和margin。
應用:
如果我們經常會製作導航欄,這時就要使用ul li 和a組合的方式,但是<a>是行內元素,我們無法設置它的寬和高,這時,就可以在<a>的樣式表中,將之設置爲display:block。這樣就可以設置它的寬和高,以及上下左右的margin和padding以達到我們想要的效果了。
代碼如下:
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
行內元素特點:
- 不支持寬高。
- 其高度一般由其字體的大小來決定,其寬度由內容的長度控制。
- 只支持左右margin和padding。因此我們可以通過設置左右的padding值來改變行內元素的寬度。
- 行內元素一般不可以包含塊級元素。
- 換行被解析程才能空格。
- 非獨佔一行。
- 不支持background-position,clear,overflow等等。
- 常見的行內元素由<a><em><img><span><strong>等等。
第四部分:display:inline-block
- 不設置寬度時,內容撐開寬度。
- 非獨佔一行,塊在一行顯示。
- 行內支持寬高。
- 代碼換行被解析成空格
- 不支持clear
舉例說明,我們之前在做橫向導航菜單的時候,一般是用ul li a組合,然後將li設置爲float,這樣就可以得到橫向的導航標籤了。而現在我們可以通過li和display:inline-block;來實現。
代碼如下:
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 > |
效果圖如下:
但是將padding和margin的值都設置爲0,他們之間還會有距離 這就是inline元素換行被解析成空格的屬性。如果將上述例子中的a標籤寫成一行,空白符消失,菜單之間也就緊湊起來了。
解決方法:我們要明白空白符歸根結底是一個字符,只要我們將ul中的字符的大小設置位0,那麼空白符也就不會存在了,但是這是a的字體大小也會繼承ul的字體大小,那麼就不見了,該怎麼辦,只需要將a中再設置一個字體不爲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 > |
最終得到的效果圖如下:
我們還可以通過inline-block完成一個常見的三列布局。
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元素產生的空白符問題 #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 >}//這裏一定要重新設置font-size。 |
最終效果圖如下:
第五部分:display:inherit
規定應該從父元素繼承 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;} |
效果圖如下:
即我們先設置了id爲parent的元素的display屬性值爲inline-block,然後將其子元素的display屬性值設置爲inherit(繼承),於是,子div的display屬性值繼承了父元素的display屬性值爲inline-block。(注意,我在id爲parent的div元素中設置了font-size:0px;這樣可以有效解決由inline元素帶來的空白符問題。)