新手提问CSS box-sizing:border-box问题

新手才开始学css没多久，所以提的问题比较基础

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档 div{font-size:24px; text-align:center; border:4px solid ; width:400px; } .one{ border-color:#F00; padding:30px; box-sizing:border-box;} .two{ border-color:#3FF;}

the first test

the second test

图片说明

加上box-sizing:border-box;后第一个div框还是变大，哪里出了问题呢？

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
babyFat_ 2017-04-26 05:12
关注
楼主，你想让box1和box2显示一样的宽度（也就是400px），得在.one的css样式中加上width：332px; 因为一个div的真实宽度=width+2*border+padding-left+padding-right,所以，不想div框变大，就得用400px减去2倍的border再减去2倍的padding,也就是332px

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

box-sizing:border-box的一个问题？ css javascript
2016-01-07 07:38

回答 2 已采纳我已经解决了，(～ o ～)~zZ
为什么我的box-sizing:border-box只能固定宽度， css
2022-01-21 13:49

回答 2 已采纳高度少了px;
移动端flex-wrap: wrap;不起作用? css 前端
2021-12-24 11:26

回答 4 已采纳你的模拟器使用414*736 还设置89%，这样不规范吧一般默认一个固定宽度 375，设计图按照375设计
CSS3 box-sizing属性详解
2020-12-13 05:06

box-sizing属性包括content-box（default），border-box，padding-box。 1、content-box，border和padding不计算入width之内 2、padding-box，padding计算入width内 3、border-box，border和padding计算入...
border-collapse: collapse 在tbody中横向无效果请教! css3 vue.js 前端
2023-03-04 16:23

回答 6 已采纳该回答引用ChatGPT 根据你提供的代码和描述，border-collapse: collapse 在 tbody 中没有生效的原因是因为你的 tbody 具有 display: block 属
前端学习遇到的问题2：css用html来进行选择设置和用body来进行选择设置有区别么? css html 前端
2022-09-04 08:54

回答 1 已采纳你可以放在一起
请问uni-app中的css嵌套着写会报错能调整吗？ vue.js 前端小程序
2022-03-11 21:00

回答 1 已采纳多了一个}，删除一个
详解CSS3中的box-sizing（content-box与border-box）
2020-12-14 04:26

CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
关于js拖拽位置出错的问题 javascript 前端
2022-05-15 17:31

回答 1 已采纳这里的参数写错了应该用 const y = e.pageY - content.offsetTop 还有和建议这两条属性替换成这个不然你的主页面的登录按钮会显示出来
前端怎么解决页面浏览器大小造成元素大小不合理的问题？ css html5
2021-06-23 02:07

回答 2 已采纳试试用百分比布局。或者禁止缩放
html css 中div的元素不在div标签内 css html5 前端有问必答
2021-07-28 11:47

回答 1 已采纳 .div_xc>div是浮动的，清除浮动就行，下面2个用其中一个就行。有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~这样 .div_xc { paddi
从box-sizing:border-box属性入手，来了解盒模型
2018-06-20 14:02

lilly呀的博客从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局...
现在是动画出场方式，怎么能把动画删除,我删了动画huaxui-animate-slide-up和huaxui-animate-fade-in标签整个页面就不显示了 css 前端
2022-08-23 18:05

回答 1 已采纳这两个类型删掉
box-sizing: border-box；box-sizing:content-box；讲解
2022-11-20 11:10

极客李华的博客本文讲解box-sizing: border-box;两个语法的计算公式，与应用场景。
box-sizing:border-box的理解和作用
2021-06-25 13:30

Leeeeeer的博客盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）可以把每一个容器，比如div，都看做是一个盒子模型比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又...
CSS属性box-sizing:border-box 用法
2021-03-04 19:30

韦_恩的博客下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距...
CSS怪异盒模型box-sizing:border-box
2022-03-20 15:36

OGoodness的博客文章目录CSS怪异盒模型box-sizing:border-box不设定box-sizing:border-box效果设定box-sizing:border-box效果 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。 1.也就是说，如果你将一个...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2020-12-13 10:17

有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。... box-sizing: content-box|border-box|inherit; 值描述 conte
没有解决我的问题, 去提问

悬赏问题

¥20 sub地址DHCP问题
¥15 delta降尺度计算的一些细节，有偿
¥15 Arduino红外遥控代码有问题
¥15 数值计算离散正交多项式
¥30 数值计算均差系数编程
¥15 redis-full-check比较两个集群的数据出错
¥15 Matlab编程问题
¥15 训练的多模态特征融合模型准确度很低怎么办
¥15 kylin启动报错log4j类冲突
¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大

新手提问CSS box-sizing:border-box问题

2条回答 默认 最新

悬赏问题

2条回答默认最新