display屬性詳解

時間 2019-11-13

標籤 display 屬性詳解欄目 CSS 简体版

原文原文鏈接

內容：html

1.display介紹佈局

2.display分類spa

3.塊級標籤和內聯標籤code

4.inline-block應用htm

1.display介紹對象

display：display屬性設置元素如何被顯示blog

2.display分類圖片

(1)display分類ci

display: none; -- 讓標籤消失(隱藏元素並脫離文檔流)
display: inline; -- 內聯元素(內聯表籤)
display: block; -- 塊級元素(塊級標籤)
display: inline-block; -- 既有inline的屬性也有block屬性

(2)塊級元素和內聯元素文檔

block元素：

block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度
block元素能夠設置width和height屬性。塊級元素即便設置了寬度,仍然是獨佔一行
block元素也能夠設置margin和padding屬性

inline元素：

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
inline元素的寬度是自身內容的寬度(默認有多少佔多少)
inline元素設置width和height屬性無效
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

inline-block元素：

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）設置inline-block屬性，使其既具備block的可設置寬度和高度特性又具備inline的同行特性

3.塊級標籤與內聯標籤(塊級元素和內聯元素)

(1)塊級標籤與內聯標籤實例

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>塊級標籤和內聯標籤</title>
 7     <style>
 8         div, p, span{
 9             width: 100px;
10             height: 100px;
11         }
12         div{
13             background: red;
14         }
15         p{
16             background: #747F8C;
17         }
18         span{
19             background: #41db50;
20         }
21     </style>
22 </head>
23 <body>
24 <div>div(塊級標籤) </div>
25 <p>p(塊級標籤)</p>
26 <span>span(內聯標籤)</span>
27 </body>
28 </html>

(2)塊級標籤和內聯標籤經過display轉換

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>塊級標籤和內聯標籤經過display轉換</title>
 7     <style>
 8         .inline{
 9             background: red;
10             display: inline;
11         }
12         .block{
13             background: red;
14             display: block;
15         }
16     </style>
17 </head>
18 <body>
19     <!--將塊級標籤變成行內標籤-->
20     <div class="inline">div</div>
21     <!--將行內標籤變成塊級標籤-->
22     <span class="block">span</span>
23 </body>
24 </html>

4.inline-block應用

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

1 #outer{
2 border: 3px dashed;
3 word-spacing: -6px;
4 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。