CSS中的display屬性

時間 2019-11-26

標籤 css display 屬性欄目 CSS 简体版

原文原文鏈接

display中文爲顯示的意識，顯而易見它的功能就是爲了控制頁面元素顯示方式css

display中爲咱們提供了不少屬性，其中最多見的有：html

none
block
inline
inline-block

none屬性

none屬性表明着元素不會被顯示網站

好比不少網站的頂部導航欄都會有二級菜單，只有當咱們的鼠標移動或點擊時二級菜單纔會顯示出來。這是就能夠使用到display:none這個屬性。code

一個簡單的例子：htm

HTML代碼：utf-8

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="button">
            <ul>
                <li>
                    一級菜單
                    <ul>                 <!--一級菜單中嵌套二級菜單-->         
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>               
                </li>
            </ul>
        </div>  
    </body>
</html>

CSS代碼：it

.button ul>li{
    border: 1px solid cadetblue;    
}

.button ul>li>ul{
    display: none;/*二級菜單默認隱藏*/
}

.button ul>li:hover>ul{
    display: block;/*當鼠標移動到一級菜單時，二級菜單出現/
}

block屬性

block的意思爲「阻塞」，它的功能是使元素變爲塊級元素class

所謂塊級元素就是指每一個元素的類容單獨佔據一行，咱們常見的<p>、<h1>、<li>、<div>等都是塊級元素meta

inline屬性

inline屬性的功能是把元素變爲行內元素im

所謂行內元素就是指元素不會單獨佔據一行，它只會佔據本身規定的高和寬。咱們在網站中常見的瀑布流樣式就是使用的行內元素。<a>、<img>等都屬於行內元素。
可是行內元素的大小是固定的，咱們沒法設置其大小，這時咱們還須要使用display:block將其變爲塊級元素後才能夠改變它的大小。這是元素既有行類元素的特性又能夠爲其設定大小。

inline-block屬性

inline-block屬性就是同時有塊級元素和行內元素的屬性

inline-block就與上面的爲inline屬性設置爲block屬性的功能同樣，就是使元素就能夠爲其設置大小又能夠具備行內元素的特徵。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。