个人中心
gpt4 book ai didi

css - 为什么 box-sizing : border-box still show the border with a width of 0px?

转载 作者：技术小花猫 更新时间：2023-10-29 10:20:20 28 4
gpt4 key购买 nike

<分区>

在 CSS 中使用 box-sizing: border-box 时，我假设元素的总宽度将在其“width”值中定义。所以如果我说一个分区的宽度是 20px，右边框是 10px，我最终会得到一个占据 20px 空间的盒子，其中一半是右边框。将它推到我将宽度设置为 10px 和右边框的位置，如下所示:

#box {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}
<div id="box"></div>

该框将仅由红色边框组成。当我将宽度设置为 0px 时会发生什么？我以为它会让整个事情消失，但是没有，结果和上面的一模一样:

#box-1 {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  margin-bottom: 10px;
  background: black;
  border-right: 10px solid red;
}

#box-2 {
  overflow: hidden;
  width: 0px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}
<div id="box-1"></div>
<div id="box-2"></div>

View on jsFiddle

我的问题是这是否是预期的行为。对我来说似乎不一致。我想让一个盒子消失，只控制宽度/高度。

28 4 0
文章推荐： css - IE 的输入标签上的占位符属性？
文章推荐： ios - Cordova 如何在 iOS 上删除 "Push notification"
文章推荐： css - 图像 "display: block"的缺点？
文章推荐： css - 根据字符串长度调整字体大小
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com