width 和 height 不失效，而是受 box-sizing（默认 content-box）、display 类型（如 inline 元素不支持）、flex/grid 布局（如 flex-shrink）及父容器高度塌陷等因素影响。

width 和 height 被 padding 或 border 吃掉了

默认 box-sizing 是 content-box，这意味着你写的 width: 200px 只算内容区宽度，加上 padding 和 border 后，元素实际占位会更大。浏览器没“不生效”，只是你没算进去。

• 检查是否设置了 padding 或 border，哪怕只有 1px
• 加一句 box-sizing: border-box;，让 width 和 height 包含 padding 和 border
• 全局重置推荐：

  *, *::before, *::after { box-sizing: border-box; }

display 类型不支持 width/height

行

• 确认元素的 display 值：用开发者工具看 computed 样式里的 display
• 需要设宽高就改显示类型：display: inline-block; 或 display: block;
• 慎用 display: inline; —— 即使强行设了 width，也不会生效

父容器约束或 flex/grid 布局干扰

在 flex 或 grid 容器里，子项的 width 和 height 可能被 flex-grow、min-width、align-items 等覆盖，尤其当没显式设 flex-shrink: 0 时。

• Flex 子项默认会收缩（flex-shrink: 1），即使写了 width: 300px 也可能被压缩
• 临时调试可加：flex: none; 或 flex-shrink: 0; width: 300px;
• Grid 中注意 grid-template-columns 是否用 fr 或 auto 覆盖了显式 width

height 在块级元素中“看起来”不生效

纯文本内容的块级元素（如空 div 或只含换行符的 p），设 height 会生效，但若内部没有内容撑开、又没设 min-height 或 overflow，可能视觉上“看不见变化”。更常见的是子元素浮动或绝对定位导致父容器高度塌陷。

立即学习“前端免费学习笔记（深入）”；

• 检查父容器是否高度为 0：用开发者工具选中元素，看 layout 面板的 actual height
• 浮动子元素必须清除：overflow: hidden; 或 ::after { content: ""; display: table; clear: both; }
• 绝对定位子元素不参与文档流，不会撑开父容器高度 —— 此时 height 是独立设定，但父容器可能仍表现为“无高度”

# css  # 浏览器  # 工具  # 绝对定位  # overflow  # auto  # display  # padding  # border  # flex  # table  # bug  # 的是  # 不支持  # 这是  # 一句  # 更大  # 这两个  # 掉了  # 写了  # 你没  # 表现为 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  如何快速搭建高效服务器建站系统？  javascript日期怎么处理_如何格式化输出  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Laravel如何处理和验证JSON类型的数据库字段  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  lovemo网页版地址 lovemo官网手机登录  微信小程序 五星评分(包括半颗星评分)实例代码  昵图网官网入口 昵图网素材平台官方入口  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  独立制作一个网站多少钱,建立网站需要花多少钱？  Android GridView 滑动条设置一直显示状态(推荐)  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  b2c电商网站制作流程,b2c水平综合的电商平台？  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  如何用JavaScript实现文本编辑器_光标和选区怎么处理  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  如何快速生成专业多端适配建站电话？  Laravel中的Facade(门面)到底是什么原理  手机软键盘弹出时影响布局的解决方法  Python正则表达式进阶教程_复杂匹配与分组替换解析  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  如何基于PHP生成高效IDC网络公司建站源码？  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  零服务器AI建站解决方案：快速部署与云端平台低成本实践  手机网站制作与建设方案,手机网站如何建设？  Windows Hello人脸识别突然无法使用  如何在香港免费服务器上快速搭建网站？  Swift中循环语句中的转移语句 break 和 continue  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  Laravel如何与Pusher实现实时通信？（WebSocket示例）  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  网站制作价目表怎么做,珍爱网婚介费用多少？  PHP正则匹配日期和时间(时间戳转换)的实例代码  详解jQuery中基本的动画方法