新手提问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什么意思?
2024-02-29 21:09

uebest的博客 box-sizing: border-box
现在是动画出场方式，怎么能把动画删除,我删了动画huaxui-animate-slide-up和huaxui-animate-fade-in标签整个页面就不显示了 css 前端
2022-08-23 18:05

回答 1 已采纳这两个类型删掉
从box-sizing:border-box属性入手，来了解盒模型
2018-06-20 14:02

lilly呀的博客从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局...
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.也就是说，如果你将一个...
没有解决我的问题, 去提问

悬赏问题

¥50 如何增强飞上天的树莓派的热点信号强度，以使得笔记本可以在地面实现远程桌面连接
¥15 MCNP里如何定义多个源？
¥20 双层网络上信息-疾病传播
¥50 paddlepaddle pinn
¥20 idea运行测试代码报错问题
¥15 网络监控：网络故障告警通知
¥15 django项目运行报编码错误
¥15 请问这个是什么意思？
¥15 STM32驱动继电器
¥15 Windows server update services