溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css中的display屬性有什么作用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中的display屬性有什么作用”吧!
首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline
我們常用的display屬性值有：
inline
block
inline-block
none
把 display 設置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden 還會保留。
那么，display:inline、display:block和display:inline-block有什么區別呢？
代碼如下:
<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>
我們發現內聯對象`inline`給它設置屬性`height`和`width`是沒有用的，致使它變寬變大的
原因是內部元素的寬高`+padding`。觀察inline對象的前后元素我們會發現`inline`不單獨占一行，
其它元素會緊跟其后。
而塊對象`block`是可以設置寬高的，但是它的實際寬高是本身寬高`+padding`。
觀察`block`的前后元素我們會發現`block`要單獨占一行。
然而，當我們即需要div有寬高，又不希望它獨占一行怎么辦？
這個時候我們就需要使用`inline-block`了，再觀察一下上面的demo，我們會發現`inline-block`
即具有`block`的寬高特性又具有`inline`的同行元素特性。
然而，在IE6/7下padding對inline的寬高是對其沒影響的。
那么，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）
到此，相信大家對“css中的display屬性有什么作用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
