前端必知：10.dispiay属性

小姚学前端

于 2023-07-09 17:15:06 发布

阅读量923

点赞数 4

分类专栏： HTHL+CSS 文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_52799985/article/details/131624970

版权

HTHL+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

display属性在前端开发中用于控制元素的布局和显示方式，如block使元素占据整行，inline保持不换行，none隐藏元素，flex和grid则用于弹性布局和网格布局。此外，还有inline-block、list-item、table等值用于特定场景。

摘要由CSDN通过智能技术生成

display 属性在前端开发中十分重要，它用于控制元素的布局和显示方式。以下是一些常用的 display 属性值及其用法示例：

block: 将元素作为块级元素显示（占据整行）。

div {
  display: block;
}

inline: 将元素作为内联元素显示（不换行）。

span {
  display: inline;
}

inline-block: 将元素作为内联块级元素显示（不换行，可以设置宽度和高度）。

button {
  display: inline-block;
  width: 100px;
  height: 30px;
}

none: 不显示元素，将其隐藏。

.hidden {
  display: none;
}

flex: 将元素作为弹性盒子显示，使用弹性布局。

.container {
  display: flex;
}

grid: 将元素作为网格容器显示，使用网格布局。

.container {
  display: grid;
}

table: 将元素作为表格显示。

.table {
  display: table;
}

inline-table: 将元素作为内联表格显示。

.table {
  display: inline-table;
}

list-item: 将元素作为列表项显示（常用于无序列表）。

li {
  display: list-item;
}

initial: 将元素的 display 属性设置为其初始值。

div {
  display: initial;
}

这些是一些常用的 display 属性值，可以用于控制元素在页面布局中的显示方式。你可以根据需要灵活地使用这些属性来实现所需的布局效果。

相关完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dispiay属性</title>
    <style>
        .wp{
            width: 200px;
            height: 200px;
            background: #04de02;
            display: none;
        }
        .line{
            border: 1px rgb(22, 69, 127) solid;
            height: 200px;
            width: 200px;
            display: block;
        }
        h1{
            border: 1px rgb(22, 69, 127) solid;
            height: 200px;
            width: 200px;
            display: inline;
        }
    </style>
</head>
<body>
    <!-- 
        隐藏一个标签元素
        dispiay:none;

        display 属性可以用来控制标签元素的显示属性
            值：
               block 把元素转化为块元素标签
               inline 把元素转化为行属性标签
               none隐藏标签元素
        
     -->
     <div class="wp"></div>
     <h1>123456，654321</h1>
     <h1>123456，654321</h1>

     <a class="line" href="###">123456，654321</a>
     <a class="line" href="###">123456，654321</a>
</body>
</html>