css中display屬性的使用方法

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

創(chuàng)新互聯(lián)公司一直通過網(wǎng)站建設(shè)和網(wǎng)站營銷幫助企業(yè)獲得更多客戶資源。以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、全網(wǎng)整合營銷推廣服務(wù)為核心業(yè)務(wù)。十多年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

display屬性定義及用法

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

在css中，display屬性是用來定義元素應(yīng)該生成的框的類型，經(jīng)常用來將塊狀元素轉(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屬性語法格式

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：設(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í)表格來（類似 <table>），表格前后有換行符

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

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

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

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

display屬性的none屬性值

元素的display屬性的屬性值設(shè)置為none時(shí)，該元素將隱藏不顯示，而其會(huì)脫離文檔流，不占據(jù)網(wǎng)頁空間；非常相關(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前名稱：css中display屬性的使用方法
文章網(wǎng)址：http://bm7419.com/article0/jdceoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、響應(yīng)式網(wǎng)站、App開發(fā)、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容