css的display屬性是什么意思

這篇文章主要介紹了css的display屬性是什么意思，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯致力于互聯網網站建設與網站營銷，提供網站制作、網站建設、網站開發(fā)、seo優(yōu)化、網站排名、互聯網營銷、微信小程序開發(fā)、公眾號商城、等建站開發(fā)，創(chuàng)新互聯網站建設策劃專家，為不同類型的客戶提供良好的互聯網應用定制解決方案，幫助客戶在新的全球化互聯網環(huán)境中保持優(yōu)勢。

首先我們來看css display屬性的定義

css display屬性的定義是可以將頁面元素隱藏或者顯示出來，也可以將元素強制改成塊級元素或內聯元素，在頁面布局和JavaScript特效中常常用到display屬性。

css display屬性中最常用的屬性值有四個，分別是block、inline-block、inline和none。

下面我們來詳細解析一下這四個display屬性值。

1、display的block屬性值（display:block）

設置元素為塊狀元素，如果不指定寬高，默認會繼承父元素的寬度，并且獨占一行，即使寬度有剩余也會獨占一行，高度一般以子元素撐開的高度為準，當然也可以自己設置寬度和高度。

我們來看一個例子：

<!DOCTYPE html>

<html>

<head>

a {

background: lightblue;

width: 300px;

display: block;

}

</style>

</head>

<body>

<div>

<a href="http//:www.php.cn">php中文網</a>

</div>

</body>

</html>

display的block屬性值設置效果如下：

css的display屬性是什么意思

2、display的inline屬性值（display:inline）

內容撐開寬度，不會獨占一行，不支持寬高，代碼換行會被解析成空格。

inline屬性值的示例：

<!DOCTYPE html>

<html>

<head>

div{

background: lightblue;

}

li{

display: inline;

}

</style>

</head>

<body>

<div>

<li><a href="http//:www.php.cn">php中文網</a></li>

</div>

</body>

</html>

display的inline屬性值設置效果如下：

css的display屬性是什么意思

3、display的inline-block屬性值（display:inline-block）

不設置寬度時，內容撐開寬度；不會獨占一行，支持寬高，代碼換行被解析成空格?？傊?，將對象呈現為inline，但是對象的內容作為block呈現，使其既具有block的寬度高度特性又具有inline的同行特性。

4、display的none屬性值（display:none）

將元素設置為none的時候既不會占據空間，也無法顯示，相當于該元素不存在；該屬性可以用來改善重排與重繪。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css的display屬性是什么意思”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，更多相關知識等著你來學習!

當前名稱：css的display屬性是什么意思
瀏覽地址：http://aaarwkj.com/article6/gpgoog.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站改版、動態(tài)網站、網站制作、軟件開發(fā)、靜態(tài)網站、網站設計

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

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css的display屬性是什么意思