码迷,mamicode.com
首页 > Web开发 > 详细

CSS中的display属性

时间:2019-11-11 09:32:52      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:image   alt   pos   还需要   meta   osi   code   styles   详解   

CSS中的display属性

display中文为显示的意识,显而易见它的功能就是为了控制页面元素显示方式

display 属性规定元素应该生成的框的类型。

css语法 display:value;

js语法 Object.style.display=value;

display中为我们提供了很多属性,其中最常见的有:

  • none
  • block
  • inline
  • inline-block

none属性

none属性代表着元素不会被显示

比如很多网站的顶部导航栏都会有二级菜单,只有当我们的鼠标移动或点击时二级菜单才会显示出来。这是就可以使用到display:none这个属性。

一个简单的例子:

HTML代码:

<!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代码:

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

.button ul>li>ul{
    display: none;/*二级菜单默认隐藏*/
}

.button ul>li:hover>ul{
    display: block;/*当鼠标移动到一级菜单时,二级菜单出现/
}

block属性

block的意思为“阻塞”,它的功能是使元素变为块级元素

所谓块级元素就是指每个元素的类容单独占据一行,我们常见的

  • 等都是块级元素

    inline属性

    inline属性的功能是把元素变为行内元素

    所谓行内元素就是指元素不会单独占据一行,它只会占据自己规定的高和宽。我们在网站中常见的瀑布流样式就是使用的行内元素。技术图片等都属于行内元素。
    但是行内元素的大小是固定的,我们无法设置其大小,这时我们还需要使用display:block将其变为块级元素后才可以改变它的大小。这是元素既有行类元素的特性又可以为其设定大小。

    inline-block属性

    inline-block属性就是同时有块级元素和行内元素的属性

    inline-block就与上面的为inline属性设置为block属性的功能一样,就是使元素就可以为其设置大小又可以具有行内元素的特征。

    可能的值

    技术图片

    部分属性详解:

    block

    特点:1)独占一行;

    ? 2)元素的高度,宽度,行高以及顶和底边距均可设置;

    ? 3)不设置宽度时,宽度撑满一行;

    块级元素有:

    ,

    ,

    ..

    ,
      ,