CSS Display 属性的常见取值及其作用

最新推荐文章于 2025-07-27 18:02:09 发布
最新推荐文章于 2025-07-27 18:02:09 发布
阅读量89 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PixelDyno/article/details/133358343
编程 专栏收录该内容
350 篇文章 ¥29.90 ¥99.00
订阅专栏
本文介绍了CSS Display属性的常用取值，包括block、inline、inline-block、none、flex、grid和table，详细阐述了它们的作用和应用场景，帮助开发者更好地理解和运用Display属性实现各种布局效果。

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

CSS 的 Display 属性用于控制元素的显示方式，它可以决定元素在页面中的呈现方式以及与其他元素的交互方式。下面是一些常见的 Display 属性取值及其作用。

  1. block：将元素呈现为块级元素。块级元素会独占一行，并且默认情况下会在上下文中创建一个新的块级框。常见的块级元素包括 <div>、<p>、<h1> 到 <h6> 等。示例代码如下：
<div style="display: block;<
了解本专栏 订阅专栏 解锁全文
css中display属性的值及作用
France_CG
04-08 1054
display 的属性值 常用：none|inline|block|inline-block 其他：list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit 常用的有none、inline、block、inline-block。分别的意
CSS中的display属性有哪些值及其作用
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-08 1708
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。属性的不同值，我们可以创建更加动态和响应式的网页布局。这样的元素不会独占一行，也不会影响其他元素的位置。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，的不同值以及它们各自的行为，对于创建复杂且响应式的布局至关重要。属性的各个值，包括它们的基本概念、作用以及如何使用它们来构建更高效的网页布局。属性是至关重要的，它决定了元素如何在页面上呈现以及与其他元素的关系。
display有哪些值？说明他们的作用?
wangxuanyang_zer的博客
10-19 908
display属性用于控制元素的外部盒模型（外观）以及元素在文档中的布局。它有多个不同的值，每个值都会影响元素的呈现方式和行为。以下是一些常见的displaydisplayblockinlinedisplaydisplay。
CSS 中 `display` 属性的值及其作用：全面详解
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-25 2907
CSS 中 `display` 属性的值及其作用：全面详解
CSS display属性
lh11223326的博客
04-17 2749
在CSS中我们可以使用display属性来控制元素的布局，我们可以通过display来设置元素的类型。在不设置的时候很多元素都有对应的display属性值，如常见的它默认的display属性就是block块元素)，还有默认的display属性是inline行内元素)，我们可以使用display属性来设置元素。其display值说明none隐藏元素。block将元素设置为块级元素。inline将元素设置为内联元素。list-item。
【CSS 面经】display 属性值及其作用详解
lph159的博客
12-08 2729
display属性用于设置一个元素的显示行为。根据不同的值，元素的显示方式可以大不相同。例如，某些元素可能表现为块级元素，而其他元素则可能表现为行内元素或其他特殊布局形式。掌握display属性的不同取值，对于完成各种布局设计至关重要。
【CSS】display 属性
小秀的博客
07-24 870
将元素呈现为内联块级元素。内联块级元素在一行内排列，并可以设置宽度和高度等样式，类似于块级元素。是 CSS 属性，用于控制元素的显示类型（display type）。：将元素呈现为块级元素。：将元素呈现为弹性容器。弹性容器允许子元素通过弹性布局进行排列和对齐。常见的用于构建响应式布局的属性。：将元素呈现为网格容器。：将元素呈现为内联元素。内联元素不会独占一行，而是在一行内尽可能地排列。后，元素不会在页面中占据空间，也不会显示出来。属性，我们可以控制元素在页面中的排列和布局，实现不同的页面结构和样式效果。
CSS之display属性
qq_36507046的博客
08-31 741
display属性值很多，但在开发中比较常用的属性值一般是none、block、inline、inline-block。
CSS-display属性详解
52HZ的鱼
02-16 857
1.根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。display常用属性值1. none：隐藏。2.块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。
CSS基础：display的3个常见属性值详解
u013179804的博客
04-19 3700
display属性用于控制元素的显示方式：是否显示/如何显示元素。大多数元素的display属性有两种状态：块级元素（Block）和 内联元素（Inline）。除了这两种常见的状态外，还有一些其他的display属性取值，如flexgrid等，用于实现更灵活的布局和样式效果。因为，对于新手，其他属性相对复杂，本次呢，我们么主要来介绍display的 3 个基础常用的属性值。
css display属性
05-26
CSS中的display属性用于控制元素的显示方式，常见的取值如下： 1. block：将元素显示为块级元素，即在父元素中单独占据一行或一块，可以设置宽度、高度、内边距和外边距等属性。 2. inline：将元素显示为行内元素...
element-plus 组件 ElMessage、ElLoading 弹框 和加载css 样式展示异常总结
_1531613221
07-24 279
本文总结了解决Vue3+TS项目中Element Plus组件引入问题的三种方案：1)删除手动引入后可能出现报错但项目可运行；2)修改vite.config.ts配置，调整AutoImport设置解决组件不显示问题；3)推荐安装sass-embedded解决CSS样式异常。方案二详细提供了vite配置代码，包括自动导入样式文件和API式组件的处理；方案三强调需优先安装sass-embedded。三种方案逐步深入，最终彻底解决组件引入和样式问题。
网络安全第三次作业
abrspo的博客
07-22 331
【代码】网络安全第三次作业。
17. 如何修改 flex 主轴方向
weixin_64684095的博客
07-25 637
在 Flex 布局中，默认的主轴（main axis）方向是 水平向右（即 ）。 通过设置 属性，可以灵活改变主轴的方向，从而控制子元素的排列方式。
CSS 盒子模型学习版的理解
宇宙第一小趴菜的博客
07-25 533
CSS 盒子模型学习版的理解
CSS 基础
qq_68630091的博客
07-23 848
设置某一个方向的边框：border-top: 1px solid #000；设置边框：border：1px solid #000；写在独立的.css 文件中，在html 文件中引入外部的.css 文件。写在 head 标签中的 style 标签里，对当前页面所有元素生效。text-align ：设置块级元素内文本的水平对齐方式。解决方案：给父元素设置 overflow:hidden；边框圆角： border-radius: 100px；特点：随着当前页面加载而加载，加载速度快，首页常用。
Web开发系列-第1章 HTML-CSS
最新发布
weixin_66095070的博客
07-27 385
HTML:HyperText Markup Language，超文本标记语言。由标记构成。可写入文字、图片、音频、视频等内容。Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
深入掌握CSS Grid布局：每个属性详解与实战示例
前端结城的博客
07-24 834
CSS Grid布局的核心在于灵活性和控制力。通过这篇文章，你应该已经掌握了Grid的每个核心属性及其用法，从到minmax()，都能信手拈来。想彻底吃透Grid？修改上面的2×3网格，尝试用fr单位、minmax()和auto-fill调整布局。自己实现一个博客主页，包含头部、侧边栏、内容区和底部，用规划。打开MDN的Grid文档，查阅和等简写属性，扩展你的知识。希望这篇指南让你对Grid布局信心满满！多写代码，多调试，Grid会成为你的布局好帮手！🚀。
[CSS]让overflow不用按shift可以滚轮水平滚动(纯CSS)
斯幽柏雷科技
07-25 960
本文介绍了一种无需JavaScript即可实现鼠标滚轮横向滚动的CSS技巧。通过将竖向排列的overflow容器旋转90度变为横向，同时利用writing-mode: sideways-rl保持文本方向不变，实现了原生平滑的横向滚动效果。相比JS方案，这种方法更加高效流畅，避免了滚动距离计算和卡顿问题，特别适合移动端和大量标签展示场景。关键点在于使用aspect-ratio保持正方形比例，结合旋转和文字方向控制，完美实现了浏览器原生的横向滚动体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值