当前位置: 首页 > 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;网格布局&…...

【机器学习篇】K-Means 算法详解:从理论到实践的全面解析

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

IntelliJ IDEA远程开发代理远程服务器端口(免费内网穿透)

IntelliJ IDEA远程开发代理远程服务器端口&#xff08;免费内网穿透&#xff09;&#xff08;JetBrains家的其他IDE应该也支持&#xff09; 之前看到宇宙第一IDE VS Code好像默认代理了远程的端口&#xff0c;但是一直没找到IDEA的同类功能&#xff0c;这次终于发现了 以Intell…...

内核定时器3-用户空间定时器

用户空间定时器与内核定时器的关系 虽然用户空间定时器和内核定时器在实现上各自独立&#xff0c;但用户空间定时器通常依赖于内核定时器提供的基础设施。以下是具体关系&#xff1a; 依赖性 用户空间定时器的实现基于内核定时器。 例如&#xff0c;POSIX 定时器使用内核的 h…...

C++ 字面量深度解析:从基础到实战进阶

在 C 开发中&#xff0c;字面量&#xff08;Literal&#xff09;不仅是基础语法的一部分&#xff0c;更是提升代码可读性、安全性和性能的关键工具。本文将深入探讨 C 字面量的高级特性、最新标准支持&#xff08;C11/14/17/20&#xff09;以及实际开发中的应用技巧&#xff0c…...

论文paper(更新...)

目录 是否rebuttal&#xff1f;rebuttal 技巧 是否rebuttal&#xff1f; 如果不rebuttal 肯定会拒稿&#xff0c;编辑也会给审稿人发信息&#xff0c;如下&#xff1a; Comment: Thanks for your efforts in reviewing this paper. The authors have neither submitted a rebu…...

变形金刚多元宇宙

1 涉及的公司 1.1 孩之宝HasBro 孩之宝与Takara签订协议后&#xff0c;孩之宝开始使用Takara的专利进行研发。 1.2 日本特佳丽Takara公司 特佳丽Takara Diaclone可变形恐龙的机器人玩具 Microman可变形汽车的机器人玩具 1.3 日本东映TOEI ANIMTION 1.4 美国漫威 为了推广玩具…...

HTTP协议的无状态和无连接

无连接 ①无连接的含义 这里所说的无连接并不是指不连接&#xff0c;客户与服务器之间的HTTP连接是一种一次性连接&#xff0c;它限制每次连接只处理一个请求&#xff0c;当服务器返回本次请求的应答后便立即关闭连接&#xff0c;下次请求再重新建立连接。这种一次性连接主要考…...

ASP.NET代码审计 SQL注入篇(简单记录)

sql注入&#xff0c;全局搜索 Request QueryString ToString() select select * aspx是设计页面&#xff0c;而aspx.cs是类页面&#xff0c;也就是说设计页面用到的类信息在这个页面里面&#xff0c;其实就是把设计和实现分离开来。 源码 using System; using System.Collect…...

毫秒级响应的VoIP中的系统组合推荐

在高并发、低延迟、毫秒级响应的 VoIP 场景中&#xff0c;选择合适的操作系统组合至关重要。以下是针对 Ubuntu linux-lowlatency、CentOS Stream kernel-rt 和 Debian 自定义 PREEMPT_RT 的详细对比及推荐&#xff1a; 1. 系统组合对比 特性Ubuntu linux-lowlatencyCentO…...

w186格障碍诊断系统spring boot设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…...

shell -c

个人博客地址&#xff1a;shell -c | 一张假钞的真实世界 shell -c {string}&#xff1a;表示命令从-c后的字符串读取。在需要使用管道或者重定向需要sudo时很有用&#xff0c;如下&#xff1a; $ sudo find ../*/exportFiles -mtime 15 -name "*" | xargs -I {} r…...

(笔记+作业)书生大模型实战营春节卷王班---L1G3000 浦语提示词工程实践

学员闯关手册&#xff1a;https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频&#xff1a;https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业&#xff1a;htt…...

文献学习笔记:中风醒脑液(FYTF-919)临床试验解读:有效还是无效?

【中风醒脑液&#xff08;FYTF-919&#xff09;临床试验解读&#xff1a;有效还是无效&#xff1f;】 在发表于 The Lancet &#xff08;2024 年 11 月 30 日&#xff0c;第 404 卷&#xff09;的临床研究《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的图形显示框架(绘图设备封装)

目录 图像层的底层抽象——绘图设备抽象 如何抽象一个绘图设备&#xff1f; 桥接绘图设备&#xff0c;特化为OLED设备 题外话&#xff1a;设备的属性&#xff0c;与设计一个相似函数化简的通用办法 使用函数指针来操作设备 总结一下 图像层的底层抽象——绘图设备抽象 在…...

Android学习19 -- 手搓App

1 前言 之前工作中&#xff0c;很多时候要搞一个简单的app去验证底层功能&#xff0c;Android studio又过于重型&#xff0c;之前用gradle&#xff0c;被版本匹配和下载外网包折腾的堪称噩梦。所以搞app都只有找应用的同事帮忙。一直想知道一些简单的app怎么能手搓一下&#x…...

pytorch基于GloVe实现的词嵌入

PyTorch 实现 GloVe&#xff08;Global Vectors for Word Representation&#xff09; 的完整代码&#xff0c;使用 中文语料 进行训练&#xff0c;包括 共现矩阵构建、模型定义、训练和测试。 1. GloVe 介绍 基于词的共现信息&#xff08;不像 Word2Vec 使用滑动窗口预测&…...

SpringCloud篇 微服务架构

1. 工程架构介绍 1.1 两种工程架构模型的特征 1.1.1 单体架构 上面这张图展示了单体架构&#xff08;Monolithic Architecture&#xff09;的基本组成和工作原理。单体架构是一种传统的软件架构模式&#xff0c;其中所有的功能都被打包在一个单一的、紧密耦合的应用程序中。 …...

背包问题和单调栈

背包问题&#xff08;动态规划&#xff09; 动态五步曲 dp数组及下标索引的含义递推公式dp数组如何初始化遍历顺序打印dp数组 01背包&#xff1a;n种物品&#xff0c;有一个,二维数组遍历顺序可以颠倒&#xff0c;&#xff08;滚动数组&#xff09;一维数组遍历顺序不可颠倒…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)

零、关于开发思路 (一)拿到工作任务,先理清楚需求 1.逻辑部分 不放过原型里说的每一句话,有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分(含国际化) 整体看过需要开发页面的原型后,分类一下哪些组件/样式可以复用,直接提取出来使用 (时间充分的前提下,不…...

window 显示驱动开发-如何查询视频处理功能(三)

​D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针&#xff0c;该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...