詳解css中的display屬性（行內元素和塊級元素）

時間 2019-11-11

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

原文原文鏈接

display屬性

首先，全部主流瀏覽器都支持 display 屬性。其次，咱們都知道display 屬性規定元素應該生成的框的類型。默認值：inlinehtml

咱們經常使用的display屬性值有：瀏覽器

inline
block
inline-block
none

把 display 設置成 none 不會保留元素本該顯示的空間，可是 visibility: hidden 還會保留。spa

那麼，display:inline、display:block和display:inline-block有什麼區別呢？.net

<style>
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>

點擊result查看demo:

http://jsfiddle.net/qjgcjLm8/3d

inline特性

咱們發現內聯對象inline給它設置屬性height和width是沒有用的，導致它變寬變大的
緣由是code

內部元素的寬高`+padding`。觀察inline對象的先後元素咱們會發現`inline`不單獨佔一行，
其它元素會緊跟其後。

block特性

而塊對象`block`是能夠設置寬高的，可是它的實際寬高是自己寬高`+padding`。
觀察`block`的先後元素咱們會發現`block`要單獨佔一行。

然而，當咱們即須要div有寬高，又不但願它獨佔一行怎麼辦？orm

inline-block特性

這個時候咱們就須要使用inline-block了，再觀察一下上面的demo，咱們會發現：htm

inline-block既具備block的寬高特性又具備inline的同行元素特性。

也就是說，當咱們想要讓一個元素既不獨佔一行，又能夠設置其寬高屬性的時候，咱們就能夠選擇inline-block了。對象

然而，在IE6/7下padding對inline的寬高是對其沒影響的。blog

由此，咱們能夠聯想到行內元素和塊級元素

行內元素特色

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊級元素特色

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內元素（inline）元素。

塊級元素是能夠設置寬高的，可是它的實際寬高是自己寬高+padding。block元素要單獨佔一行。內聯元素不單獨佔一行，給他設置寬高是沒有用的。

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。以下代碼就是將行內元素a轉換爲塊狀元素，從頁使用a元素具備塊狀元素特色。

a{display:block;}

那麼，display的其餘屬性值呢？

list-item 此元素會做爲列表顯示。

run-in此元素會根據上下文做爲塊級元素或內聯元素顯示。

compact CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。

table 此元素會做爲塊級表格來顯示（相似table），表格先後帶有換行符。
inline-table 此元素會做爲內聯表格來顯示（相似table），表格先後沒有換行符。
table-row-group 此元素會做爲一個或多個行的分組來顯示（相似tbody）
table-header-group 此元素會做爲一個或多個行的分組來顯示（相似thead）
table-footer-group： 此元素會做爲一個或多個行的分組來顯示（相似tfoot）
table-row 此元素會做爲一個表格行顯示（相似 tr ）。
table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 colgroup ）。
table-column 此元素會做爲一個單元格列顯示（相似 col ）
table-cell 此元素會做爲一個表格單元格顯示（相似 td 和 th）
table-caption 此元素會做爲一個表格標題顯示（相似 caption）

行內和塊級元素

相關標籤/搜索

每日一句

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