当前位置: 首页 > news >正文

CSS Display属性完全指南

CSS Display属性完全指南

    • 引言
    • 核心概念
    • 常用display值详解
      • 1. block(块级元素)
      • 2. inline(行内元素)
      • 3. inline-block(行内块级元素)
      • 4. flex(弹性布局)
      • 5. grid(网格布局)
    • 最佳实践
    • 常见问题解决
    • 总结
    • 参考资源

引言

CSS中的display属性是最重要的属性之一,它决定了一个元素如何在页面上展示。本文将深入探讨display属性的各个值及其实际应用场景,帮助你更好地掌握页面布局。

核心概念

display属性定义了元素的显示类型,主要包括:

  • 外部显示类型:决定元素如何参与流式布局
  • 内部显示类型:决定元素的子元素如何布局

常用display值详解

1. block(块级元素)

块级元素的特点:

  • 独占一行
  • 可以设置width和height
  • margin和padding的所有属性都有效
  • 默认宽度为父容器的100%

使用场景:

  • 段落布局(<p>
  • 区块划分(<div>
  • 文章节标题(<h1>-<h6>
.block-element {display: block;width: 100%;padding: 20px;margin: 10px 0;
}

2. inline(行内元素)

行内元素的特点:

  • 和其他元素在同一行
  • 不能设置width和height
  • 只能设置水平方向的margin和padding
  • 宽度由内容决定

使用场景:

  • 文本中的强调(<span>
  • 链接(<a>
  • 图片(<img>
.inline-element {display: inline;margin: 0 5px;padding: 0 10px;
}

3. inline-block(行内块级元素)

行内块级元素结合了块级和行内元素的特点:

  • 和其他元素在同一行
  • 可以设置width和height
  • 可以设置所有margin和padding
  • 宽度由内容决定,除非指定width

使用场景:

  • 导航菜单项
  • 图片列表
  • 按钮组
.inline-block-element {display: inline-block;width: 150px;height: 150px;margin: 10px;padding: 20px;
}

4. flex(弹性布局)

flex布局是现代Web布局的重要工具:

  • 容器可以调整子项目的宽度和高度
  • 可以改变项目的显示顺序
  • 支持双向布局(水平/垂直)
  • 子项目可以自动伸缩

使用场景:

  • 导航栏
  • 卡片列表
  • 居中布局
  • 响应式设计
.flex-container {display: flex;justify-content: space-between;align-items: center;gap: 20px;
}.flex-item {flex: 1;min-width: 200px;
}

5. grid(网格布局)

grid布局提供了二维布局系统:

  • 可以同时控制行和列
  • 支持区域划分
  • 支持显式和隐式网格
  • 强大的对齐功能

使用场景:

  • 页面整体布局
  • 照片墙
  • 仪表盘
  • 复杂的响应式布局
.grid-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;
}.grid-item {padding: 20px;
}

最佳实践

  1. 选择合适的display值:

    • 文本和小型内联元素用inline
    • 需要设置尺寸的内联元素用inline-block
    • 自适应布局用flex
    • 复杂的二维布局用grid
  2. 响应式设计考虑:

    @media (max-width: 768px) {.flex-container {flex-direction: column;}.grid-container {grid-template-columns: 1fr;}
    }
    
  3. 性能优化:

    • 避免不必要的嵌套
    • 合理使用display: none
    • 考虑使用visibility: hidden替代display: none

常见问题解决

  1. 元素无法并排显示

    • 检查是否误用了block
    • 考虑使用flex或inline-block
  2. flex布局子元素大小不一

    • 使用flex-grow和flex-shrink控制
    • 设置min-width或max-width限制
  3. grid布局响应式问题

    • 使用auto-fit和minmax
    • 配合media queries调整

总结

display属性是CSS布局的基石,掌握它对于前端开发至关重要。建议:

  • 深入理解每个值的特点
  • 多实践不同场景
  • 关注新特性(如subgrid)
  • 结合其他布局属性使用

参考资源

  • MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
  • CSS规范:https://www.w3.org/TR/css-display-3/

相关文章:

CSS Display属性完全指南

CSS Display属性完全指南 引言核心概念常用display值详解1. block&#xff08;块级元素&#xff09;2. inline&#xff08;行内元素&#xff09;3. inline-block&#xff08;行内块级元素&#xff09;4. flex&#xff08;弹性布局&#xff09;5. grid&#xff08;网格布局&…...

【C++】STL——vector底层实现

目录 &#x1f495; 1.vector三个核心 &#x1f495;2.begin函数&#xff0c;end函数的实现&#xff08;简单略讲&#xff09; &#x1f495;3.size函数&#xff0c;capacity函数的实现 &#xff08;简单略讲&#xff09; &#x1f495;4.reserve函数实现 &#xff08;细节…...

Docker Compose的使用

文章首发于我的博客&#xff1a;https://blog.liuzijian.com/post/docker-compose.html 目录 Docker Compose是什么Docker Compose安装Docker Compose文件Docker Compose常用命令案例&#xff1a;部署WordPress博客系统 Docker Compose是什么 Docker Compose是Docker官方的开源…...

11 3D变换模块(transform3d.rs)

transform3d.rs代码定义了一个名为 Transform3D 的 Rust 结构体&#xff0c;它用于表示一个3D变换矩阵。这个结构体是泛型的&#xff0c;包含三个类型参数&#xff1a;T、Src 和 Dst。其中&#xff0c;T 用于矩阵元素的数据类型&#xff0c;Src 和 Dst 用于表示变换的源和目标类…...

昆仑万维Java开发面试题及参考答案

进程和线程的区别是什么? 进程和线程都是操作系统中非常重要的概念,它们在多个方面存在显著的区别。 从定义上看,进程是操作系统进行资源分配和调度的基本单位。每个进程都有自己独立的内存空间,包括代码段、数据段、堆栈段等。例如,当你在电脑上同时打开浏览器和音乐播放…...

vscode命令面板输入 CMake:build不执行提示输入

CMake&#xff1a;build或rebuild不编译了&#xff0c;弹出:> [Add a new preset] , 提示输入发现settings.jsons设置有问题 { "workbench.colorTheme": "Default Light", "cmake.pinnedCommands": [ "workbench.action.tasks.configu…...

Fastdds学习分享_xtpes_发布订阅模式及rpc模式

在之前的博客中我们介绍了dds的大致功能&#xff0c;与组成结构。本篇博文主要介绍的是xtypes.分为理论和实际运用两部分.理论主要用于梳理hzy大佬的知识&#xff0c;对于某些一带而过的部分作出更为详细的阐释&#xff0c;并在之后通过实际案例便于理解。案例分为普通发布订阅…...

什么叫DeepSeek-V3,以及与GPT-4o的区别

1. DeepSeek 的故事 1.1 DeepSeek 是什么&#xff1f; DeepSeek 是一家专注于人工智能技术研发的公司&#xff0c;致力于打造高性能、低成本的 AI 模型。它的目标是让 AI 技术更加普惠&#xff0c;让更多人能够用上强大的 AI 工具。 1.2 DeepSeek-V3 的问世 DeepSeek-V3 是…...

【C#】Process、ProcessStartInfo启动外部exe

在C#中使用 Process 和 ProcessStartInfo 类启动外部 .exe 文件&#xff0c;可以按照以下步骤进行&#xff1a; 创建 ProcessStartInfo 实例&#xff1a;配置进程启动信息&#xff0c;包括可执行文件的路径、传递给该程序的参数等。 设置启动选项&#xff1a;根据需要配置 Pro…...

android 音视频系列引导

音视频这块的知识点自己工作中有用到&#xff0c;一直没有好好做一个总结&#xff0c;原因有客观和主观的。 客观是工作太忙&#xff0c;没有成段时间做总结。 主观自己懒。 趁着这次主动离职拿了n1的钱&#xff0c;休息一下&#xff0c;对自己的人生做一下总结&#xff0c;…...

Mac电脑上最新的好用邮件软件比较

在Mac电脑上&#xff0c;选择一款好用的邮件软件需要根据个人需求、功能偏好以及与系统生态的兼容性来决定。以下是基于我搜索到的资料&#xff0c;对当前市场上一些优秀的邮件客户端进行比较和推荐&#xff1a; 1. Apple Mail Apple Mail是Mac系统自带的邮件客户端&#xff…...

C#,入门教程(11)——枚举(Enum)的基础知识和高级应用

上一篇&#xff1a; C#&#xff0c;入门教程(10)——常量、变量与命名规则的基础知识https://blog.csdn.net/beijinghorn/article/details/123913570 不会枚举&#xff0c;就不会编程&#xff01; 枚举 一个有组织的常量系列 比如&#xff1a;一个星期每一天的名字&#xf…...

Spring 实现注入的方式

一、XML配置文件注入 概念&#xff1a;这是一种传统的依赖注入方式&#xff0c;通过在XML文件中配置bean的相关信息来实现依赖注入。在Spring框架中&#xff0c;需要在applicationContext.xml或spring-config.xml等配置文件中定义bean&#xff0c;并通过<property>标签或…...

【论文复现】粘菌算法在最优经济排放调度中的发展与应用

目录 1.摘要2.黏菌算法SMA原理3.改进策略4.结果展示5.参考文献6.代码获取 1.摘要 本文提出了一种改进粘菌算法&#xff08;ISMA&#xff09;&#xff0c;并将其应用于考虑阀点效应的单目标和双目标经济与排放调度&#xff08;EED&#xff09;问题。为提升传统粘菌算法&#xf…...

【LLM-agent】(task6)构建教程编写智能体

note 构建教程编写智能体 文章目录 note一、功能需求二、相关代码&#xff08;1&#xff09;定义生成教程的目录 Action 类&#xff08;2&#xff09;定义生成教程内容的 Action 类&#xff08;3&#xff09;定义教程编写智能体&#xff08;4&#xff09;交互式操作调用教程编…...

04树 + 堆 + 优先队列 + 图(D1_树(D10_决策树))

目录 一、引言 二、算法原理 三、算法实现 四、知识小结 一、引言 决策树算法是一种常用的机器学习算法&#xff0c;可用于分类和回归问题。它基于特征之间的条件判断来构 建一棵树&#xff0c;树的每个节点代表一个特征&#xff0c;每个叶节点代表一个类别或回归值。决策…...

JavaScript模块化

什么是JavaScript的模块化&#xff1f; JavaScript的模块化是指将代码分割成独立的、可重用的模块&#xff0c;每个模块具有自己的功能和作用&#xff0c;可以单独进行开发、测试和维护。不同的目的是提升代码的可维护性、可复用性和可扩展性&#xff0c;同时避免不同模块间的…...

排序算法--插入排序

插入排序是一种简单且稳定的排序算法&#xff0c;适合小规模数据或部分有序数据。 // 插入排序函数 void insertionSort(int arr[], int n) {for (int i 1; i < n; i) { // 从第二个元素开始int key arr[i]; // 当前需要插入的元素int j i - 1;// 将比 key 大的元素向后移…...

【C语言篇】“三子棋”

一、游戏介绍 三子棋&#xff0c;英文名为 Tic - Tac - Toe&#xff0c;是一款简单而经典的棋类游戏。游戏在一个 33 的棋盘上进行&#xff0c;两名玩家轮流在棋盘的空位上放置自己的棋子&#xff08;通常用 * 和 # 表示&#xff09;&#xff0c;率先在横、竖或斜方向上连成三个…...

【大模型理论篇】DeepSeek-R1:引入冷启动的强化学习

1. 背景 首先给出DeepSeek-V3、DeepSeek-R1-Zero、DeepSeek-R1的关系图【1】。 虽然DeepSeek-R1-Zero推理能力很强&#xff0c;但它也面临一些问题。例如&#xff0c;DeepSeek-R1-Zero存在可读性差和语言混杂等问题。为了使推理过程更具可读性&#xff0c;进而推出了DeepSee…...

Linux基础 ——tmux vim 以及基本的shell语法

Linux 基础 ACWING y总的Linux基础课&#xff0c;看讲义作作笔记。 tmux tmux 可以干嘛&#xff1f; tmux可以分屏多开窗口&#xff0c;可以进行多个任务&#xff0c;断线&#xff0c;不会自动杀掉正在进行的进程。 tmux – session(会话&#xff0c;多个) – window(多个…...

使用 Kotlin 将 Vertx 和 Springboot 整合

本篇文章目的是将 Springboot 和 Vertx 进行简单整合。整合目的仅仅是为了整活&#xff0c;因为两个不同的东西整合在一起提升的性能并没有只使用 Vertx 性能高&#xff0c;因此追求高性能的话这是在我来说不推荐。而且他们不仅没有提高很多性能甚至增加了学习成本 一、整合流…...

【单层神经网络】softmax回归的从零开始实现(图像分类)

softmax回归 该回归分析为后续的多层感知机做铺垫 基本概念 softmax回归用于离散模型预测&#xff08;分类问题&#xff0c;含标签&#xff09; softmax运算本质上是对网络的多个输出进行了归一化&#xff0c;使结果有一个统一的判断标准&#xff0c;不必纠结为什么要这么算…...

课题推荐——基于自适应滤波技术的多传感器融合在无人机组合导航中的应用研究

无人机在现代航空、农业和监测等领域的应用日益广泛。为了提高导航精度&#xff0c;通常采用多传感器融合技术&#xff0c;将来自GPS、惯性测量单元&#xff08;IMU&#xff09;、磁力计等不同传感器的数据整合。然而&#xff0c;传感器的量测偏差、环境干扰以及非线性特性使得…...

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f3af;1.登录-持久层 &…...

Mono里运行C#脚本40—mono_magic_trampoline函数的参数设置

前面介绍过跳板代码,它是用来切换托管代码与非托管的代码,以及运行时与C#代码的交互。实现从运行时切换到C#代码来运行,再从C#代码返回运行时。 要想理解整个切换的细节,那么就需要理解mono_magic_trampoline函数, 而要理解此函数,就必须了解这个函数的参数来源。 要理…...

Verilog基础(三):过程

过程(Procedures) - Always块 – 组合逻辑 (Always blocks – Combinational) 由于数字电路是由电线相连的逻辑门组成的,所以任何电路都可以表示为模块和赋值语句的某种组合. 然而,有时这不是描述电路最方便的方法. 两种always block是十分有用的: 组合逻辑: always @(…...

实际操作 检测缺陷刀片

号he 找到目标图像的缺陷位置&#xff0c;首先思路为对图像进行预处理&#xff0c;灰度-二值化-针对图像进行轮廓分析 //定义结构元素 Mat se getStructuringElement(MORPH_RECT, Size(3, 3), Point(-1, -1)); morphologyEx(thre, tc, MORPH_OPEN, se, Point(-1, -1), 1); …...

DeepSeek 阐述 2025年前端发展趋势

预测2025年前端的发展趋势。首先&#xff0c;我需要考虑当前的前端 技术发展情况&#xff0c;以及近几年的变化趋势。比如&#xff0c;框架方面&#xff0c;React、Vue、Angular这些主流框架的更新方向和社区活跃度。可能用户想知道未来哪些技术会更流行&#xff0c;或者需要学…...

Elasticsearch基本使用详解

文章目录 Elasticsearch基本使用详解一、引言二、环境搭建1、安装 Elasticsearch2、安装 Kibana&#xff08;可选&#xff09; 三、索引操作1、创建索引2、查看索引3、删除索引 四、数据操作1、插入数据2、查询数据&#xff08;1&#xff09;简单查询&#xff08;2&#xff09;…...

【Rust自学】17.3. 实现面向对象的设计模式

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 17.3.1. 状态模式 状态模式(state pattern) 是一种面向对象设计模式&#xff0c;指的是一个值拥有的内部状态由数个状态对象&#xff08…...

司库建设-融资需求分析与计划制定

当企业现金流紧张时&#xff0c;企业需要考虑外部融资&#xff0c;从财务营运角度来考虑和分析如何确定输入和输出&#xff0c;进行整体解决方案设计。 融资需求分析与计划制定 功能点&#xff1a; 现金流预测工具&#xff1a;集成历史数据和业务计划&#xff0c;自动生成未来1…...

2. 【.NET Aspire 从入门到实战】--理论入门与环境搭建--.NET Aspire 概览

在当今快速发展的软件开发领域&#xff0c;构建高效、可靠且易于维护的云原生应用程序已成为开发者和企业的核心需求。.NET Aspire 作为一款专为云原生应用设计的开发框架&#xff0c;旨在简化分布式系统的构建和管理&#xff0c;提供了一整套工具、模板和集成包&#xff0c;帮…...

【Elasticsearch】allow_no_indices

- **allow_no_indices 参数的作用**&#xff1a; 该参数用于控制当请求的目标索引&#xff08;通过通配符、别名或 _all 指定&#xff09;不存在或已关闭时&#xff0c;Elasticsearch 的行为。 - **默认行为**&#xff1a; 如果未显式设置该参数&#xff0c;默认值为 …...

26.useScript

在 Web 应用开发中&#xff0c;动态加载外部脚本是一个常见需求&#xff0c;特别是在需要集成第三方库或服务时。然而&#xff0c;在 React 应用中管理脚本加载可能会变得复杂。useScript 钩子提供了一种优雅的方式来处理外部脚本的加载、错误处理和清理&#xff0c;使得在 Rea…...

跨域问题和解决方案

跨域问题及解决方案 同源策略及跨域问题 同源策略是一套浏览器安全机制&#xff0c;当一个源的文档和脚本&#xff0c;与另一个源的资源进行通信时&#xff0c;同源策略就会对这个通信做出不同程度的限制。 简单来说&#xff0c;同源策略对 同源资源 放行&#xff0c;对 异源…...

springboot中路径默认配置与重定向/转发所存在的域对象

Spring Boot 是一种简化 Spring 应用开发的框架&#xff0c;它提供了多种默认配置和方便的开发特性。在 Web 开发中&#xff0c;路径配置和请求的重定向/转发是常见操作。本文将详细介绍 Spring Boot 中的路径默认配置&#xff0c;并解释重定向和转发过程中存在的域对象。 一、…...

【OS】AUTOSAR架构下的Interrupt详解(下篇)

目录 3.代码分析 3.1中断配置代码 3.2 OS如何找到中断处理函数 3.3 Os_InitialEnableInterruptSources实现 3.4 Os_EnableInterruptSource 3.5 DisableAllInterrupts 3.5.1Os_IntSuspendCat1 3.5.2 Os_InterruptDisableAllEnter 3.5.3 Disable二类中断 3.5.4 Disable一…...

基于遗传算法的256QAM星座图的最优概率整形matlab仿真,对比优化前后整形星座图和误码率

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; GA优化曲线&#xff1a; 优化前后星座图对比 优化前后误码率对比 仿真操作步骤…...

Android学习21 -- launcher

1 前言 之前在工作中&#xff0c;第一次听到launcher有点蒙圈&#xff0c;不知道是啥&#xff0c;当时还赶鸭子上架去和客户PK launcher的事。后来才知道其实就是安卓的桌面。本来还以为很复杂&#xff0c;毕竟之前接触过windows的桌面&#xff0c;那叫一个复杂。。。 后面查了…...

小程序越来越智能化,作为设计师要如何进行创新设计

一、用户体验至上 &#xff08;一&#xff09;简洁高效的界面设计 小程序的特点之一是轻便快捷&#xff0c;用户期望能够在最短的时间内找到所需功能并完成操作。因此&#xff0c;设计师应致力于打造简洁高效的界面。避免过多的装饰元素和复杂的布局&#xff0c;采用清晰的导航…...

【实践案例】基于大语言模型的海龟汤游戏

文章目录 项目背景提示词构建海龟汤主持人真相判断专家 具体实现流程文心一言大语言模型“海龟汤”插件参考 项目背景 “海龟汤”作为一种聚会类桌游&#xff0c;又称情境推理游戏&#xff0c;是一种猜测情境还原事件真相的智力游戏。其玩法是由出题者提出一个难以理解的事件&…...

基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究

一、引言 1.1 研究背景与意义 在数智化医疗飞速发展的当下,医疗人工智能(AI)已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术,能够处理和分析海量的医疗数据,从而辅助医生进行疾病诊断、制定治疗方案以…...

【Unity2D 2022:UI】创建滚动视图

一、创建Scroll View游戏对象 在Canvas画布下新建Scroll View游戏对象 二、为Content游戏对象添加Grid Layout Group&#xff08;网格布局组&#xff09;组件 选中Content游戏物体&#xff0c;点击Add Competent添加组件&#xff0c;搜索Grid Layout Group组件 三、调整Grid La…...

C++ Primer 多维数组

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

怀旧经典:1200+款红白机游戏合集,Windows版一键畅玩

​沉浸在怀旧的海洋中&#xff0c;体验经典红白机游戏的魅力&#xff01;我们为您精心准备了超过1200款经典游戏的合集&#xff0c;每一款都是时代的印记&#xff0c;每一场都是回忆的旅程。这个合集不仅包含了丰富的游戏资源&#xff0c;还内置了多个Windows版的NES模拟器&…...

【数据采集】案例02:基于Selenium采集豆瓣电影Top250的详细数据

基于Selenium采集豆瓣电影Top250的详细数据 Selenium官网:https://www.selenium.dev/blog/ 豆瓣电影Top250官网:https://movie.douban.com/top250 写在前面 实验目标:基于Selenium框架采集豆瓣电影Top250的详细数据。 电脑系统:Windows 使用软件:PyCharm、Navicat 技术需求…...

Spring 面试题【每日20道】【其二】

1、Spring MVC 具体的工作原理&#xff1f; 中等 Spring MVC 是 Spring 框架的一部分&#xff0c;专门用于构建基于Java的Web应用程序。它采用模型-视图-控制器&#xff08;MVC&#xff09;架构模式&#xff0c;有助于分离应用程序的不同方面&#xff0c;如输入逻辑、业务逻辑…...

算法设计-0-1背包动态规划(C++)

一、问题阐述 0-1 背包问题的目标是在给定背包容量 W 的情况下&#xff0c;从 n 个物品中选择一些物品放入背包&#xff0c;使得背包中物品的总价值最大。每个物品只能选择一次&#xff08;即要么放入背包&#xff0c;要么不放入&#xff09;。 二、代码 #include <iostr…...

【Java知识】使用Java实现地址逆向解析到区划信息

文章目录 1. 实现 FST1.1 定义 FST 节点1.2 定义 FST 2. 实现地址逆向查询2.1 定义区划信息2.2 构建 FST 3. 运行结果4. 代码说明5. 进一步优化6. 总结 实现一个 FST&#xff08;Finite State Transducer&#xff0c;有限状态转换器&#xff09; 并用于 地址逆向查询区划信息…...