css中display屬性的使用方法-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開發(fā)，高端網(wǎng)站設(shè)計(jì)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢，價(jià)格優(yōu)惠，收費(fèi)合理。

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>

看完了這篇文章，相信你對css中display屬性的使用方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前標(biāo)題：css中display屬性的使用方法-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://muchs.cn/article32/iopsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、域名注冊、品牌網(wǎng)站建設(shè)

廣告

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

小程序開發(fā)