【前端学习】CSS元素显示模式

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #html

文章探讨了HTML元素的显示模式，包括块元素、行内元素以及行内块元素。重点讨论了如何通过转换元素显示模式实现内容的布局调整，特别是针对居中对齐的策略，提到了需使行高与盒子高度一致以消除上下空隙，达到文字居中的效果。

元素显示模式

块元素

在这里插入图片描述

    <p>
        <div>这里有问题</div>
    </p>
    <!-- 实际上显示的是 -->
    
    <p></p>
    <div>这里有问题</div>
    <p></p>

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

总结

在这里插入图片描述

元素显示模式转换

在这里插入图片描述

注意事项

默认是置顶，所以为了居中就得让行高和盒子高度一致

行高由上空隙、文字本身高度、下空隙组成。

行高的上下空隙把文字挤到中间了
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

linpangmu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS的元素显示模式

m0_64365419的博客

11-23

1418

特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。比如：想要增加的触发范围。转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块元素:display:inline-block;举例：

参与评论您还未登录，请先登录后发表或查看评论

CSS技术解析：元素显示模式与背景属性的应用指南

02-11

适合人群：初学者或有一定前端基础知识希望深入掌握 CSS 显示模式和背景特性的网页设计师、前端开发工程师。使用场景及目标：帮助学习者理解不同类型HTML元素的基本特征并熟练运用它们构建灵活美观的网页布局；熟悉...

认识CSS之元素显示模式

榕城候佳人的博客

03-10

1088

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。所以元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，一行可以放多个等。HTML主要分为块元素和行内元素😃。

CSS：元素显示模式与背景

博客网站 https://async-area.com

12-21

1438

讲解CSS中的元素显示模式，背景属性

CSS 的元素显示模式简单学习

m0_74012211的博客

09-21

636

CSS 的元素显示模式简单学习

前端开发学习——CSS定位

2302_80311379的博客

09-04

2033

1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动代码：position:absolute;需配合方位属性实现移动默认相对于浏览器可视区域进行移动在页面中不占位置——脱标应用场景配合绝对定位组CP（子绝父相）/* 绝对定位。

前端CSS：CSS块状元素

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-25

1400

块状元素是在HTML文档中以块级形式显示的元素，它们通常占据所在容器的全部宽度，并且在页面上形成独立的新行。常见的块状元素包括等。

前端CSS学习笔记（2）

2301_80981878的博客

11-10

1448

【代码】前端CSS学习笔记。

CSS显示模式

小何代码咖啡馆

04-18

1212

元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。

【前端】CSS

最新发布

qq_43494013的博客

12-05

401

【JavaWeb】CSS_三种引入方式

DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构

m0_37613794的博客

12-04

806

本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题

CSS Animation 详解

Irene1991的博客

12-04

864

本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。

主题切换（2）：CSS 变量（自定义属性）

Z_Wonderful的博客

12-01

1066

系统主题切换。在大型项目中，为了更好地组织 CSS 变量（自定义属性）、主题切换，通常会将变量定义在单独的文件中，然后在需要的地方引入。这样可以实现全局变量的统一管理，同时保持代码的可维护性。

通过js动态更新css变量

qq_65084229的博客

12-02

111

【代码】通过js动态更新css变量。

CSS选择器详解：从复合到伪类，及元素显示模式

该文件主要介绍了Web前端开发中CSS选择器的使用，包括复合选择器、元素显示模式以及背景属性。 1. 复合选择器 - **后代选择器**：通过空格分隔，选择器1表示父元素，选择器2表示后代元素，用于选择指定父元素的...