display属性及用法

目录

display 属性

1.block 块级元素

2.inline 行内元素

3.inline-block 行内块元素

4.Flex 弹性盒子

5.grid

6.隐藏元素 none

块级元素block：

行内元素inline：

---

 

display 属性

display 是 CSS 中用于指定元素如何在页面中呈现的属性。常用取值有：

1. block：元素将被显示为块级元素，会独占一行。并且会在前后都有换行符，使得元素之间垂直排列。
2. inline：元素将被显示为内联元素，不会独占一行，可以与其他内联元素并排。宽度由内容决定，不会强制换行。
3. inline-block：元素将被显示为内联块级元素，可以设置宽高等属性。
4. flex：元素将被显示为弹性盒子，可以使用弹性盒子布局。
5. grid：元素将被显示为网格容器，可以使用网格布局。
6. none：元素将不会被显示。
7. table：元素将被显示为表格元素。
8. inline-table：元素将被显示为内联表格元素。
9. list-item：元素将被显示为列表项。
10. inherit：继承父元素的 display 属性值。

1.block 块级元素

特点：

1. 独占一行：块级元素会独占一行，上下会有换行的效果。
2. 具有固定宽度和高度：可以通过设置宽度和高度来控制块级元素的大小。
3. 支持盒模型：块级元素支持盒模型，可以设置内边距（padding）和外边距（margin）。
4. 可以包含其他块级元素和内联元素：块级元素可以包含其他块级元素和内联元素。

用法：

1. 布局：常用于页面布局中，如创建页面的不同区块。
2. 容器：常用于包裹其他元素，形成一个独立的容器。
3. 列表：常用于创建有序列表（<ol>）和无序列表（<ul>）。
4. 图片：常用于显示图片，<img> 元素默认为块级元素。

示例代码：

.block-element {
    display: block;
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
    padding: 10px;
}

<div class="block-element">Block Element</div>

以上代码展示了如何使用 display: block; 将元素显示为块级元素，并设置了固定的宽度和高度、背景颜色、外边距和内边距。这样的元素会独占一行，上下会有换行的效果。

2.inline 行内元素

特点：

1. 水平排列：内联元素会在同一行内水平排列，不会独占一行。
2. 宽度由内容决定：内联元素的宽度由内容的大小决定，不会强制换行。
3. 不支持宽度和高度设置：内联元素不支持设置固定的宽度和高度，这些属性对内联元素无效。
4. 支持行内元素特性：内联元素可以包含其他内联元素，类似文字的行内排列方式。

用法：

1. 文本链接：常用于创建文本链接，如 <a> 元素。
2. 行内元素包裹：用于包裹行内元素，使其在同一行内水平排列。
3. 文字样式：用于设置文字样式，如颜色、背景色等。
4. 导航菜单：常用于创建水平导航菜单，将菜单项水平排列在一行内。

示例代码：

.inline-element {
    display: inline;
    color: red;
    background-color: lightyellow;
    padding: 5px;
    margin: 5px;
}

<span class="inline-element">Inline Element 1</span>
<span class="inline-element">Inline Element 2</span>
<span class="inline-element">Inline Element 3</span>

以上代码展示了如何使用 display: inline; 将元素显示为内联元素，并设置了文字颜色、背景颜色、内边距和外边距。这样的元素会在同一行内水平排列，宽度由内容决定。

3.inline-block 行内块元素

特点：

1. 行内块级元素：inline-block 元素既具有行内元素的特点（可以和其他元素在同一行显示），又具有块级元素的特点（可以设置宽高、内外边距等）。
2. 自动换行：当一行空间不足以容纳 inline-block 元素时，会自动换行到下一行显示。
3. 水平排列：多个 inline-block 元素会水平排列，类似于文字的排列方式。

用法：

 

总的来说，行内块元素在前端开发中具有很多用途，特别是在需要水平排列元素或创建块级元素在行内显示的场景下，行内块元素是一个非常有用的工具。

 

1. 创建水平导航菜单：行内块元素可以实现水平排列，适合用于创建导航菜单，使菜单项水平排列在同一行上。

2. 创建按钮组：通过将按钮设置为行内块元素，可以使按钮水平排列在一行上，形成按钮组的效果。

3. 实现网格布局：行内块元素可以灵活地设置宽度和高度，用于创建网格布局，将内容块水平排列在页面上。

4. 制作图片墙：将图片设置为行内块元素，可以实现图片墙的效果，多张图片水平排列在一行上。

5. 创建标签云：行内块元素可以用于创建标签云效果，使标签以行内块的形式展示在页面上。

6. 实现响应式布局：行内块元素可以结合媒体查询等技术，实现响应式布局，使页面在不同设备上自适应显示。

7. 制作横向滚动效果：通过将行内块元素放置在具有固定宽度的容器中，并设置 overflow: auto;，可以实现横向滚动效果。

8. 创建按钮导航：行内块元素可以用于创建按钮导航，使按钮水平排列在页面上，用作页面内的跳转或操作按钮。

4.Flex 弹性盒子

是 CSS3 中引入的一种布局模型，用于在容器中进行灵活的布局。通过设置容器的 display: flex; 属性，容器内的子元素可以按照一定的规则自动排列和调整大小，实现响应式的布局效果。

特点：

1. 灵活性：Flexbox 提供了灵活的布局方式，可以轻松实现各种复杂的布局结构。
2. 自适应性：Flexbox 可以根据容器的大小和内容的变化自动调整布局，实现响应式设计。
3. 对齐和分布：Flexbox 提供了多种对齐和分布子元素的方式，如居中对齐、平均分布等。
4. 顺序控制：可以通过 order 属性控制子元素的排列顺序，实现灵活的布局调整。

用法： 

1. 主轴和交叉轴：Flex 容器内部有一个主轴和一个交叉轴，主轴默认是水平方向，交叉轴默认是垂直方向。
2. 弹性子元素：Flex 容器内的子元素可以根据设定的规则自动调整大小和位置，实现灵活的布局。
3. 对齐方式：可以通过设置 justify-content 和 align-items 属性来控制子元素在主轴和交叉轴上的对齐方式。
4. 空间分配：可以通过设置 flex-grow、flex-shrink 和 flex-basis 属性来控制子元素在分配剩余空间时的行为。
5. 顺序调整：可以通过设置 order 属性来改变子元素的排列顺序。

示例代码：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    flex: 1;
}

以上代码展示了一个简单的 Flex 弹性盒子布局，容器内的子元素会水平居中并均匀分配空间。

5.grid

CSS Grid（网格布局）是一种强大的布局系统，可以用来创建复杂的网格结构，具有以下特点和用法：

特点：

1. 二维布局：CSS Grid 是一个二维布局系统，可以同时控制元素在行和列上的布局。
2. 自适应性：Grid 布局可以根据容器的大小自适应地调整布局，适用于响应式设计。
3. 网格线：可以通过定义网格线来创建网格布局，包括行和列的网格线。
4. 网格单元格：元素可以放置在网格的单元格中，可以跨越多个单元格。
5. 对齐和间距：可以通过 Grid 布局实现元素的对齐和间距控制，包括水平和垂直方向的对齐。
6. 重叠和层叠：Grid 布局支持元素的重叠和层叠效果，可以更灵活地控制元素的显示顺序。

用法：

1. 网站布局：Grid 布局是用来设计网站布局的强大工具，可以创建复杂的网格结构，实现各种页面布局需求，包括响应式设计。

2. 栅格系统：Grid 布局可以用于创建栅格系统，使页面元素按照网格布局对齐，保持页面整洁有序。

3. 卡片布局：可以利用 Grid 布局创建卡片式布局，将内容分割成多个卡片并按照网格排列，适用于展示产品、文章等信息。

4. 导航菜单：Grid 布局可以用来设计水平或垂直导航菜单，使菜单项按照网格布局排列，实现统一的导航风格。

5. 图片画廊：可以利用 Grid 布局创建图片画廊，将多张图片按照网格布局排列，实现美观的图片展示效果。

6. 表单布局：Grid 布局可以用来设计表单布局，将表单元素按照网格布局排列，使表单结构清晰易读。

7. 响应式设计：Grid 布局适用于响应式设计，可以根据不同的屏幕尺寸和设备类型调整布局，实现适配不同设备的页面显示效果。

8. 网格动画：可以利用 Grid 布局结合 CSS 动画实现网格元素的动态排列和变换效果，增强页面的交互性和视觉吸引力。

总的来说，CSS Grid 布局在前端开发中有广泛的应用，可以帮助开发者快速实现各种复杂布局需求，提升页面的可读性和用户体验。

6.隐藏元素 none

• display : none 可以隐藏元素。隐藏之后仿佛消失了，位置会被后面的元素占上
• visibility:hidden; 也可以隐藏元素。但是隐藏之后还是会占这个位置（空着一块）

 

块级元素block：

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

行内元素inline：

• <span>
• <a>
• <img>