CSS中的display属性

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

    可能的值

    img

    部分属性详解：

    block

    特点：1）独占一行；

    ​ 2）元素的高度，宽度，行高以及顶和底边距均可设置；

    ​ 3）不设置宽度时，宽度撑满一行；

    块级元素有：

    ,

    ,

    ..

    ,
      ,

    • posted @   Thousand_Mesh  阅读(319)  评论(0)  编辑  收藏  举报
    编辑推荐：
    · SQL Server 2025 AI相关能力初探
    · Linux系列：如何用 C#调用 C方法造成内存泄露
    · AI与.NET技术实操系列（二）：开始使用ML.NET
    · 记一次.NET内存居高不下排查解决与启示
    · 探究高空视频全景AR技术的实现原理
    阅读排行：
    · 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
    · AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
    · 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
    · Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
    · 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
    点击右上角即可分享
    微信分享提示
    AI IDE Trae