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;
}
最佳实践
-
选择合适的display值:
- 文本和小型内联元素用inline
- 需要设置尺寸的内联元素用inline-block
- 自适应布局用flex
- 复杂的二维布局用grid
-
响应式设计考虑:
@media (max-width: 768px) {.flex-container {flex-direction: column;}.grid-container {grid-template-columns: 1fr;} } -
性能优化:
- 避免不必要的嵌套
- 合理使用display: none
- 考虑使用visibility: hidden替代display: none
常见问题解决
-
元素无法并排显示
- 检查是否误用了block
- 考虑使用flex或inline-block
-
flex布局子元素大小不一
- 使用flex-grow和flex-shrink控制
- 设置min-width或max-width限制
-
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(块级元素)2. inline(行内元素)3. inline-block(行内块级元素)4. flex(弹性布局)5. grid(网格布局&…...
【机器学习篇】K-Means 算法详解:从理论到实践的全面解析
网罗开发 (小红书、快手、视频号同名) 大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、Harmony OS、Java、Python等…...
IntelliJ IDEA远程开发代理远程服务器端口(免费内网穿透)
IntelliJ IDEA远程开发代理远程服务器端口(免费内网穿透)(JetBrains家的其他IDE应该也支持) 之前看到宇宙第一IDE VS Code好像默认代理了远程的端口,但是一直没找到IDEA的同类功能,这次终于发现了 以Intell…...
内核定时器3-用户空间定时器
用户空间定时器与内核定时器的关系 虽然用户空间定时器和内核定时器在实现上各自独立,但用户空间定时器通常依赖于内核定时器提供的基础设施。以下是具体关系: 依赖性 用户空间定时器的实现基于内核定时器。 例如,POSIX 定时器使用内核的 h…...
C++ 字面量深度解析:从基础到实战进阶
在 C 开发中,字面量(Literal)不仅是基础语法的一部分,更是提升代码可读性、安全性和性能的关键工具。本文将深入探讨 C 字面量的高级特性、最新标准支持(C11/14/17/20)以及实际开发中的应用技巧,…...
论文paper(更新...)
目录 是否rebuttal?rebuttal 技巧 是否rebuttal? 如果不rebuttal 肯定会拒稿,编辑也会给审稿人发信息,如下: Comment: Thanks for your efforts in reviewing this paper. The authors have neither submitted a rebu…...
变形金刚多元宇宙
1 涉及的公司 1.1 孩之宝HasBro 孩之宝与Takara签订协议后,孩之宝开始使用Takara的专利进行研发。 1.2 日本特佳丽Takara公司 特佳丽Takara Diaclone可变形恐龙的机器人玩具 Microman可变形汽车的机器人玩具 1.3 日本东映TOEI ANIMTION 1.4 美国漫威 为了推广玩具…...
HTTP协议的无状态和无连接
无连接 ①无连接的含义 这里所说的无连接并不是指不连接,客户与服务器之间的HTTP连接是一种一次性连接,它限制每次连接只处理一个请求,当服务器返回本次请求的应答后便立即关闭连接,下次请求再重新建立连接。这种一次性连接主要考…...
ASP.NET代码审计 SQL注入篇(简单记录)
sql注入,全局搜索 Request QueryString ToString() select select * aspx是设计页面,而aspx.cs是类页面,也就是说设计页面用到的类信息在这个页面里面,其实就是把设计和实现分离开来。 源码 using System; using System.Collect…...
毫秒级响应的VoIP中的系统组合推荐
在高并发、低延迟、毫秒级响应的 VoIP 场景中,选择合适的操作系统组合至关重要。以下是针对 Ubuntu linux-lowlatency、CentOS Stream kernel-rt 和 Debian 自定义 PREEMPT_RT 的详细对比及推荐: 1. 系统组合对比 特性Ubuntu linux-lowlatencyCentO…...
w186格障碍诊断系统spring boot设计与实现
🙊作者简介:多年一线开发工作经验,原创团队,分享技术代码帮助学生学习,独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...
shell -c
个人博客地址:shell -c | 一张假钞的真实世界 shell -c {string}:表示命令从-c后的字符串读取。在需要使用管道或者重定向需要sudo时很有用,如下: $ sudo find ../*/exportFiles -mtime 15 -name "*" | xargs -I {} r…...
(笔记+作业)书生大模型实战营春节卷王班---L1G3000 浦语提示词工程实践
学员闯关手册:https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频:https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档:https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业:htt…...
文献学习笔记:中风醒脑液(FYTF-919)临床试验解读:有效还是无效?
【中风醒脑液(FYTF-919)临床试验解读:有效还是无效?】 在发表于 The Lancet (2024 年 11 月 30 日,第 404 卷)的临床研究《Traditional Chinese medicine FYTF-919 (Zhongfeng Xingnao oral pr…...
Chapter2 Amplifiers, Source followers Cascodes
Chapter2 Amplifiers, Source followers & Cascodes MOS单管根据输入输出, 可分为CS放大器, source follower和cascode 三种结构. Single-transistor amplifiers 这一章学习模拟电路基本单元-单管放大器 单管运放由Common-Source加上DC电流源组成. Avgm*Rds, gm和rds和…...
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(绘图设备封装)
目录 图像层的底层抽象——绘图设备抽象 如何抽象一个绘图设备? 桥接绘图设备,特化为OLED设备 题外话:设备的属性,与设计一个相似函数化简的通用办法 使用函数指针来操作设备 总结一下 图像层的底层抽象——绘图设备抽象 在…...
Android学习19 -- 手搓App
1 前言 之前工作中,很多时候要搞一个简单的app去验证底层功能,Android studio又过于重型,之前用gradle,被版本匹配和下载外网包折腾的堪称噩梦。所以搞app都只有找应用的同事帮忙。一直想知道一些简单的app怎么能手搓一下&#x…...
pytorch基于GloVe实现的词嵌入
PyTorch 实现 GloVe(Global Vectors for Word Representation) 的完整代码,使用 中文语料 进行训练,包括 共现矩阵构建、模型定义、训练和测试。 1. GloVe 介绍 基于词的共现信息(不像 Word2Vec 使用滑动窗口预测&…...
SpringCloud篇 微服务架构
1. 工程架构介绍 1.1 两种工程架构模型的特征 1.1.1 单体架构 上面这张图展示了单体架构(Monolithic Architecture)的基本组成和工作原理。单体架构是一种传统的软件架构模式,其中所有的功能都被打包在一个单一的、紧密耦合的应用程序中。 …...
背包问题和单调栈
背包问题(动态规划) 动态五步曲 dp数组及下标索引的含义递推公式dp数组如何初始化遍历顺序打印dp数组 01背包:n种物品,有一个,二维数组遍历顺序可以颠倒,(滚动数组)一维数组遍历顺序不可颠倒…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
