首頁  >  文章  >  web前端  >  css display屬性是什麼意思? css中display屬性的詳解

css display屬性是什麼意思? css中display屬性的詳解

不言
不言原創
2018-10-23 11:13:5613221瀏覽

css的display屬性是我們在網頁開發中經常需要用到的一個屬性,今天的這篇文章就帶大家來深入了解一下什麼是display屬性, 有需要的朋友可以看一看。

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

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

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

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

在介紹這四個屬性值之前,我們要先了解一下區塊級元素和行內元素,大家可以參考這兩篇文章:http://www.php. cn/css-tutorial-409377.htmlhttp://www.php.cn/css-tutorial-409376.html在這裡就不多說了,我們就直接來看display屬性常用的四個屬性值的介紹。

1、display的block屬性值(display:block)

設定元素為區塊狀元素,如果不指定寬高,預設會繼承父元素的寬度,並且獨佔一行,即使寬度有剩餘也會獨佔一行,高度一般以子元素撐開的高度為準,當然也可以自己設定寬度和高度。

我們來看一個範例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        a {
        background: lightblue;
        width: 300px;
                display: block;
    }
    </style>
</head>
<body>
<div>
    <a href="http//:www.php.cn">php中文网</a>
    <a href="http//:www.php.cn">php中文网</a>
    <a href="http//:www.php.cn">php中文网</a>
</div>
</body>
</html>

display的block屬性值設定效果如下:

css display屬性是什麼意思? css中display屬性的詳解

##2、display的inline屬性值(display:inline)

內容撐開寬度,不會獨佔一行,不支援寬高,程式碼換行會被解析成空格。

inline屬性值的範例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
        background: lightblue;       
    }
    li{
        display: inline;
    }
    </style>
</head>
<body>
<div>
    <li><a href="http//:www.php.cn">php中文网</a></li>
    <li><a href="http//:www.php.cn">php中文网</a></li>
    <li><a href="http//:www.php.cn">php中文网</a></li>
</div>
</body>
</html>

display的inline屬性值設定效果如下:

css display屬性是什麼意思? css中display屬性的詳解

##3、display的inline-block屬性值(display:inline-block)

#不設定寬度時,內容撐開寬度;不會獨佔一行,支援寬高,程式碼換行被解析成空格。總之,將物件呈現為inline,但是物件的內容以block呈現,使其既具有block的寬度高度特性又具有inline的同儕特性。

4、display的none屬性值(display:none)

#將元素設為none的時候既不會佔據空間,也無法顯示,相當於該元素不存在;此屬性可以用來改善重排與重繪。

這篇文章到這裡就全部結束了,關於display屬性中其他屬性值的介紹大家可以參考php中文網的

css學習手冊

進一步的了解。

以上是css display屬性是什麼意思? css中display屬性的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn