溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css中display屬性的使用方法

發(fā)布時(shí)間：2020-09-24 11:55:49 來(lái)源：億速云 閱讀：295 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下css中display屬性的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

display屬性定義及用法

display屬性在網(wǎng)頁(yè)布局中用的非常之多，它的屬性值也比較多，但是用的多的就block、inline-block、inline和none屬性值，其它屬性值很少見(jiàn)，所有在這就重點(diǎn)介紹一下常用的這幾個(gè)屬性值的用法；

在css中，display屬性是用來(lái)定義元素應(yīng)該生成的框的類(lèi)型，經(jīng)常用來(lái)將塊狀元素轉(zhuǎn)換為內(nèi)聯(lián)元素、將內(nèi)聯(lián)元素轉(zhuǎn)換為塊狀元素或者將塊狀元素/內(nèi)聯(lián)元素轉(zhuǎn)換為inline-block元素，inline-block元素既有塊狀元素的特性已有內(nèi)聯(lián)元素的特性。

display屬性語(yǔ)法格式

1.css語(yǔ)法：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 語(yǔ)法： object.style.display="inline"

display屬性值說(shuō)明

none：設(shè)置元素不顯示

block：設(shè)置元素為塊級(jí)元素

inline：設(shè)置元素為內(nèi)聯(lián)元素

inline-block：行內(nèi)塊元素，既有塊狀元素的特性已有內(nèi)聯(lián)元素的特性

list-item：設(shè)置元素為列表

run-in：根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示

compact / marker：已經(jīng)從CSS2.1中刪除

table：設(shè)置元素為塊級(jí)表格來(lái)（類(lèi)似 <table>），表格前后有換行符

inline-table：設(shè)置元素為內(nèi)聯(lián)表格（類(lèi)似 <table>），表格前后沒(méi)有換行符

table-row-group：設(shè)置元素為一個(gè)或多個(gè)行的分組（類(lèi)似 <tbody>）

table-header-group ：類(lèi)似 <thead>標(biāo)簽

table-footer-group：類(lèi)似 <tfoot>標(biāo)簽;table-row ：類(lèi)似 <tr>標(biāo)簽

display屬性的none屬性值

元素的display屬性的屬性值設(shè)置為none時(shí)，該元素將隱藏不顯示，而其會(huì)脫離文檔流，不占據(jù)網(wǎng)頁(yè)空間；非常相關(guān)：css隱藏元素之display和visibility屬性的用法筆記

實(shí)例

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

看完了這篇文章，相信你對(duì)css中display屬性的使用方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手