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属性的功能同样，就是使元素就能够为其设置大小又能够具备行内元素的特征。