css display屬性怎麼用
- silencement原創
- 2019-05-26 16:45:493849瀏覽
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：設定元素為區塊級表格來（類似f5d188ed2c074f8b944552db028f98a1），表格前後有換行符號
inline-table：設定元素為內聯表格（類似< ;table>），表格前後沒有換行符號
table-row-group：設定元素為一個或多個行的分組（類似92cee25da80fac49f6fb6eec5fd2c22a）
##table-header-group ：類似ae20bdd317918ca68efdc799512a9b39標籤table-footer-group：類似06669983c3badb677f993a8c29d18845標籤;table-row ：類似a34de1251f0d9fe1e645927f19a896e8標籤#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屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！