溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中display屬性的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
display屬性定義及用法
display屬性在網頁布局中用的非常之多，它的屬性值也比較多，但是用的多的就block、inline-block、inline和none屬性值，其它屬性值很少見，所有在這就重點介紹一下常用的這幾個屬性值的用法；
在css中，display屬性是用來定義元素應該生成的框的類型，經常用來將塊狀元素轉換為內聯元素、將內聯元素轉換為塊狀元素或者將塊狀元素/內聯元素轉換為inline-block元素，inline-block元素既有塊狀元素的特性已有內聯元素的特性。
display屬性語法格式
1.css語法：display:none/inline/block/inline-block/list-item/run-in/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit
2.JavaScript 語法： object.style.display="inline"
display屬性值說明
none：設置元素不顯示
block：設置元素為塊級元素
inline：設置元素為內聯元素
inline-block：行內塊元素，既有塊狀元素的特性已有內聯元素的特性
list-item：設置元素為列表
run-in：根據上下文作為塊級元素或內聯元素顯示
compact / marker：已經從CSS2.1中刪除
table：設置元素為塊級表格來（類似 <table>），表格前后有換行符
inline-table：設置元素為內聯表格（類似 <table>），表格前后沒有換行符
table-row-group：設置元素為一個或多個行的分組（類似 <tbody>）
table-header-group ：類似 <thead>標簽
table-footer-group：類似 <tfoot>標簽;table-row ：類似 <tr>標簽
display屬性的none屬性值
元素的display屬性的屬性值設置為none時，該元素將隱藏不顯示，而其會脫離文檔流，不占據網頁空間；非常相關：css隱藏元素之display和visibility屬性的用法筆記
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display屬性的none屬性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>看完了這篇文章，相信你對css中display屬性的使用方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
