css display屬性怎麼用-css教學-PHP中文網

首頁

web前端

css教學

css display屬性怎麼用

silencement

May 26, 2019 pm 04:45 PM

display屬性

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：設定元素為區塊級表格來（類似

），表格前後有換行符號

inline-table：設定元素為內聯表格（類似< ;table>），表格前後沒有換行符號

table-row-group：設定元素為一個或多個行的分組（類似

）##table-header-group ：類似標籤

table-footer-group：類似標籤;table-row ：類似標籤

#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>