《三》CSS 中的 display 属性

本文深入解析CSS中的display属性,探讨其如何控制元素的显示类型,包括块级、行内、行内块及各种布局模式(如flex、grid)。同时,文章对比了display属性的不同值在元素布局上的差异,并介绍了display在table系列显示类型中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

display 属性可以设置元素的外部和内部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现(块级或行内元素);元素的内部显示类型可以控制其子元素的布局(flex、grid 等)。

块级元素、行内元素、行内块元素的区别:

  1. 块级元素:独占一行,元素前后都会自动换行。设置宽高起作用。如 <div>、<p>、<hn>、<ul>、<li> 等。
  2. 行内元素:不会换行,与其他行内元素位于同一行,设置宽高不起作用。如 <span>、<a>、<em>、<u>、<i>、<b> 等。
  3. 行内块元素:它们既能够并排显示,也能够设置宽高。如 <img>、表单元素等。

行内元素设置上下外边距无效,左右外边距有效。
在这里插入图片描述
行内元素设置上下内边距,只对自身有效,不会撑开父元素,也不会对周围元素的布局产生任何影响。设置左右内边距有效。

<div>我是顶部顶部顶部顶部</div>
<span style="padding: 20px;">行内元素</span>
<div>我是底部底部底部底部</div>

请添加图片描述

常规情况下,块级元素和内联元素的嵌套规则:

  1. 块级元素,可以嵌套块级元素,也可以嵌套内联元素。
<div><div></div></div> // 正确(块级嵌套块级)
<div><span></span></div>   // 正确(块级嵌套内联)
  1. 行内元素,只能嵌套内联元素,不能嵌套块级元素。
<span><a></a></span>  // 正确(内联嵌套内联)
<span><div></div></span>   // 错误(内联嵌套块级)
  1. 部分块级元素,不能嵌套块级元素,只能嵌套内联元素。如 p、hn。
<p><div></div></p> // 错误,在浏览器上不会嵌套,而是展开显示,且下面会多出来一个空白的 p 标签(特殊块级标签只能嵌套内联标签)

但是,标准毕竟只是标准,不规范的写法也是可能通过浏览器认证的。

display: none;

隐藏元素,元素不会被显示,不占据文档空间。

visibility: hidden;,也可以隐藏元素,但是仍然占据文档空间。

display: block;

将元素转换为块级元素。

display: inline;

将元素转换为行内元素。

display: inline-block;

将元素转换为行内块元素。

将对象呈现为 inline 对象,但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

display: flex;

将对象作为弹性伸缩盒显示。

 .parent {
   display: flex;
 }
 .children {
   width: 100px;
   height: 100px;
   background: antiquewhite;
 }
 
<div class="parent">
  <div class="children"></div>
</div>

在这里插入图片描述

display: inline-flex;

将对象作为内联块级弹性伸缩盒显示。

display: flexdisplay: inline-flex 的区别:

 .parent {
   display: inline-flex;
 }
 .children {
   width: 100px;
   height: 100px;
   background: antiquewhite;
 }
  
<div class="parent">
  <div class="children"></div>
</div>

在这里插入图片描述

display:grid;

网格布局。

display:table;

目前,在大多数开发环境中,已经基本上不用 <table> 元素来做网页布局了,取而代之的是 div+css

使用 <table> 布局很有多的缺点:

  1. div+css 编写的文件大小比用 <table> 写出来的要小;
  2. <table> 必须在页面完全加载后才显示,没有加载完毕前, <table> 为一片空白;而 div 是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示;
  3. 非表格内容用 <table> 来装,不符合标签语义化要求,不利于 SEO;
  4. <table> 的嵌套性太多,用 div 代码会比较简洁。

display:table 系列几乎是和 table 系的元素相对应的:

  1. display:table:此元素会作为块级表格来显示,表格前后带有换行符,类似于 <table>
  2. display:inline-table:此元素会作为内联表格来显示,表格前后没有换行符,类似于 <table>
  3. display:table-caption:此元素会作为一个表格标题来显示,类似于 <caption>
  4. display:table-header-group:此元素会作为一个或多个行的分组来显示,类似于 <thead>
  5. display:table-footer-group:此元素会作为一个或多个行的分组来显示,类似于 <tfoot>
  6. display:table-row-group:此元素会作为一个或多个行的分组来显示,类似于 <tbody>
  7. display:table-column-group:此元素会作为一个或多个列的分组来显示,类似于 <colgroup>
  8. display:table-row:此元素会作为一个表格行显示,类似于<tr>
  9. display:table-column:此元素会作为一个表格列显示,类似于<col>
  10. display:table-cell:此元素会作为一个表格单元格显示,类似于<td>
.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid #484952;
  padding: 5px;
  display: table-cell;
}

<div class="table">
  <div class="row">
    <div class="cell">小马</div>
    <div class="cell">小猪</div>
  </div>
  <div class="row">
    <div class="cell">小狗</div>
    <div class="cell">小羊</div>
  </div>
</div>

在这里插入图片描述

display:list-item;

将元素作为列表来显示。

.list {
  display: list-item;
  list-style:inside square;
}

<div class="list">1111111</div>
<div class="list">2222222</div>

在这里插入图片描述

<think>我们正在讨论CSSdisplay属性。根据用户要求,需要详细介绍display属性的用法和功能,并参考提供的引用内容。 引用内容中提到了display属性的多种值,如none、block、inline、inline-block等,以及Flexbox和Grid布局。 我们需要按照系统指令,使用正确的LaTeX格式(行内用$...$,独立公式用$$...$$),但本问题可能不涉及数学公式,因此主要注意代码块和格式。 同时,需要生成相关问题。 结构安排: 1. 开头介绍display属性的基本概念和重要性。 2. 分别介绍常用的属性值:none, block, inline, inline-block, flex, grid等,并给出示例代码。 3. 结合引用内容,强调其重要性和应用场景。 4. 生成相关问题。 注意:引用标识要自然地添加在引用内容的末尾。由于我们参考了提供的引用,但用户提供的引用并不是真正的引用来源,我们按照要求,在相关内容后添加引用标识(如[^1])即可。 由于用户要求使用中文,以下用中文回答。</think>### CSS display属性详解 `display`属性CSS中最核心的布局属性之一,它决定了元素在文档流中的显示方式和布局行为。通过改变display值,可以完全改变元素的渲染方式,实现从简单文本流到复杂网格布局的各种效果[^1][^2]。 #### 一、基本功能与核心值 1. **`display: block`**(块级元素) - 独占一行,宽度默认撑满父容器 - 可设置宽高、内外边距 - 常见元素:`<div>`、`<p>`、`<h1>~<h6>` ```css .block-example { display: block; width: 80%; margin: 10px auto; padding: 15px; } ``` 2. **`display: inline`**(行内元素) - 不独占一行,与其他行内元素并排 - 不可设置宽高,垂直边距无效 - 常见元素:`<span>`、`<a>`、`<strong>` ```css .inline-example { display: inline; color: red; padding: 0 5px; /* 水平有效 */ } ``` 3. **`display: inline-block`**(行内块) - 兼具行内和块级特性 - 可并排显示,同时支持宽高设置 - 典型应用:导航按钮、图标列表 ```css .inline-block-example { display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center; } ``` 4. **`display: none`**(隐藏元素) - 完全从文档流中移除 - 不占据任何空间(与`visibility: hidden`区别) ```css .hidden-element { display: none; /* 彻底隐藏 */ } ``` #### 二、现代布局模式 5. **`display: flex`**(弹性盒子) - 一维布局模型,自动分配子元素空间 - 主轴/交叉轴控制,响应式利器 ```css .flex-container { display: flex; justify-content: space-between; align-items: center; } ``` 6. **`display: grid`**(网格布局) - 二维布局系统,行列精确控制 - 适合复杂响应式布局 ```css .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; } ``` #### 、特殊值与应用 7. **`display: table`系列** - 模拟表格行为(`table-cell`, `table-row`等) - 经典应用:垂直居中 ```css .vertical-center { display: table-cell; vertical-align: middle; height: 200px; } ``` 8. **新实验值** - `display: contents`(穿透容器) - `display: flow-root`(创建BFC) - `display: subgrid`(嵌套网格继承) #### 四、使用要点 1. **继承性**:display属性不可继承 2. **层叠影响**:可能改变盒模型计算方式 3. **布局流程**: ```mermaid graph LR A[设置display] --> B[确定显示类型] B --> C[生成盒模型] C --> D[参与格式化上下文] ``` 4. **响应式应用**: ```css /* 移动端优先 */ .responsive-item { display: block; width: 100%; } @media (min-width: 768px) { .responsive-item { display: inline-block; width: 49%; } } ``` > 关键原则:display属性定义了元素**参与格式化上下文的方式**,直接影响文档流计算和渲染性能[^3][^4]。现代CSS布局已从基于浮动的方案转向Flexbox和Grid,这些布局模式都依赖于display属性的正确设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值