box-sizing失效的原因

最新推荐文章于 2025-06-06 17:08:38 发布
最新推荐文章于 2025-06-06 17:08:38 发布
阅读量9.2k 收藏 4
点赞数 6
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： box-sizing失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010047432/article/details/103633256
本文深入探讨了CSS布局中目标元素高度或宽度失效的问题，并提出了有效的解决策略，即通过设定固定的高度或宽度来避免布局异常，确保网页设计的一致性和稳定性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

分析：如果目标元素的高度（或宽度）只由其内容、padding、border确定的情况下，则会存在失效情况。

解决方法：对目标元素设置固定高度（或宽度）

【CSS疑难点汇总】1.bor-box失效情况总结以及高宽设置为auto的情况
kakaai77的博客
04-09 841
box-sizing是改变盒子宽高的计算方式，一般使用bor-box，消除padding和border对整个盒子的影响，但在没有明确给出宽高的情况下，box-sizing是没有效果的。如上图，我们并没有给box设置box-sizing：border-box，但box的高度被撑开了，宽度依旧和父元素相同，并没有被撑开，因为box继承了父亲的宽度，wdith为auto。现在明白宽度的继承和设置100%的区别了吧，设置了100%相当于明确给了子元素的宽度的数值。如上图，很明显，当box的宽度和高度为auto时。
CSS基础知识day8 box-sizing、resize、box-shadow、opacity、背景属性、border-radius、渐变、字体图标、2D、3D变换、过渡、动画、伸缩盒模型、BFC
2301_77358195的博客
11-11 533
CSS3在未来会按照。
box-sizing失效情况
Superman_peng的博客
03-14 8026
box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 分析；如果目标元素的高度（或宽度）只由其内容、padding、border确定的情况下，则会存在失效情况。 解决方法：对目标元素设置固.
CSS 中的 `box-sizing` 属性详解
最新发布
weixin_43991457的博客
06-06 540
box-sizing是CSS控制元素宽高计算方式的属性，决定padding和border是否计入宽高。它有两个主要取值：content-box（默认值，宽高仅含内容区域）和border-box（宽高包含padding和border）。content-box需要手动计算总宽度，而border-box更直观实用，因此开发中常全局设置box-sizing: border-box以避免布局问题。该属性还有inherit值可继承父元素设置。实际项目中推荐使用border-box简化布局计算。
IE11 下使用 flex 布局 box-sizing 失效的问题
beijixing333y的博客
02-04 2170
问题场景： 解决 IE11 下 使用 flex 布局 box-sizing 失效的问题 问题描述： 采用 flex 布局方式，每行呈现四个元素，超过个数就换行显示。布局大概如下图： <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> &
box-sizing不生效的问题 与 底部固定结构上面滚动结构打造
情随事迁个人博客
04-03 743
Page{ width: 100%; height: 100%; } .root{ padding: 20rpx; display: flex; height: 100%; box-sizing: border-box; flex-direction:column; align-items: center; } .top{ width:100%; flex: 1; displ...
微信小程序ios真机调试 css 中的 box-sizing 居然不管用
xinshou1_0的博客
01-23 325
这是我的一个wxss中一个view的的样式，其中border是2px，如果使用box-sizing 应该会把border的宽度包含进去，在真机调试的时候，android端是没有问题的，但是ios确会出现box-sizing不会生效的问题，好在此框体本身没有什么作用，且是透明的，我就把border改为了0px。分享一下最近给客户修复的一个bug，在使用微信小程序原生开发时，wxss中。这里分享下，可以帮助看到的开发朋友，当出现类似的问题可以马上定位到此问题。我的微信基础库版本是2.30.3。
web前端练习5----css 的 display: flex，box-sizing: border-box;
翟浩浩Android专栏
11-30 1169
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为&amp;amp;quot;弹性布局&amp;amp;quot;，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 1子元素水平摆放,...
box-sizing: border-box;失效
08-19
失效的问题，可能有以下几个原因和解决方法： 1. CSS 层级问题：确保你的样式表中没有其他规则覆盖了box-sizing属性。例如，如果你在一个全局样式文件中设置了box-sizing为content-box，而在另一个地方又设置为...
box-sizing: border-box;横向失效
01-21
### CSS `box-sizing: border-box` 在横向布局中的应用 当处理CSS布局时，`box-sizing: border-box` 是一种常用的方法来控制元素的实际尺寸计算方式。此属性使得宽度和高度包含了 padding 和 border 的值[^1]。 ...
小程序中的button按钮 设置box-sizing:border-border;不起作用
weixin_41081367的博客
09-25 7494
解决方案 设置after，具体案例如下 index.wxml &lt;button class='mpbutton'&gt;按钮&lt;/button&gt; index.wxss .mpbutton{ background: #fff; color:rgba(111,133,255,1); box-sizing: border-box; //设置内边框 font-size...
box-sizing: border-box；失效问题
前端一线搬运工的博客
07-26 5139
当前标签用了position:relative;且子标签用了position:absolute; 导致盒子失效了
box-sizing在什么情况下会失效
weixin_30480583的博客
12-05 2197
众所周知，box-sizing是将w3c盒模型与IE盒模型相互转换的利器，但是有时候也会失效，那么在什么情况下回失效呢，MD在没设置高度的时候回失效的透透的，所以一定记得需要转换的时候设置个高度！！！ 转载于:https://www.cnblogs.com/mmykdbc/p/7988201.html...
box-sizing的问题
qq_37744343的博客
12-30 393
遇到box-sizing的坑 第一次写博客 第一次写博客，还不知道怎么在优快云上写东西，现在只是算给自己一个学习笔记的地方吧。 发现问题 本人前端小白，现在学习阶段。前段时间再次学习一遍CSS内容（之前为了抓紧看懂项目代码，粗略的学习一下，现在发现好多东西自己都不会，也不用，记不住。所以就再次好好学习）。 这两天在网上面看到有个用CSS画太极图的Demo，于是，我就学着自己敲一遍。首先说明的是，...
当flex布局和box-sizing同时使用失效怎么办
晨曦开发的秘密基地
12-23 590
当flex布局和box-sizing同时使用失效怎么办
css盒子模型 padding不占用盒子之外的空间 box-sizing: border-box
hzxOnlineOk的博客
01-23 1495
-moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; /*W3C标准...
css之盒子模型box-sizing属性
haha_hello的博客
02-23 588
一，box-sizing属性，自适应盒子元素的宽高的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>52-盒子box-sizing.html</title> <style> .content{ width: 300px;
CSS.box-sizing属性（让你看到不同的解释，直达问题本质）
记录 分享 成就
05-15 1226
前言 css中width属性经常用，但这个属性本来就含义不清楚，如果没有边框和填充当然没问题，如果设置了，再不明白box-sizing样式就容易出问题。搜了几篇文章，讲的各种糊涂。 下面请你看完，你才能明白box-sizing属性的设计最初思想， 一次性搞懂再也不管了。 实际场景 物流体积计算冲突 想一个场景：物流按照体积计费，那这个宽高按照啥计费呢？如下图：如果按照外边计费消费者亏了，如果按照里边计费，物流商占不到便宜。 差距在哪呢：纸箱子的厚度和里边填充的泡沫的厚度 运输的两种场景 .
关于box-sizing
feifantiantang的博客
04-30 518
box-sizing 不支持 margin-box，只有当元素没有水平 margin 时候，box-sizing 才能真正无计算，而“宽度分离”等策略则可以彻底解决所有的宽度计算的问题唯一离不开 box-sizing:border-box 的就是原生普通文本框&lt;input&gt;和文本域&lt;textarea&gt;的 100%自适应父容器宽度。拿文本域&lt;textarea&gt;举例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值