Question

如果使用box-sizing:border-box;，则根据this边框应包含在元素的高度中。

在下面的示例中，我更改了border-top，并且元素的高度已更改

无论边框宽度如何，如何保持元素的尺寸不变？

$('.title').on('click', function(){
  $(this).addClass('titleact');
});

.title{
box-sizing:border-box;
border-top: 2px solid blue;
padding:9px;
}

.titleact{
border-top:10px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>lorem</div>

Answer 1

像GolezTrol一样，您需要明确设置高度。或者，您可以从顶部填充中提取额外的边框空间，以防止内容“跳”（2px + 9px == 10px + 1px）：

$('.title').on('click', function(){
  $(this).toggleClass('titleact');
});

.title{
  box-sizing: border-box;
  border-top: 2px solid blue;
  padding: 9px;
}

.titleact{
  border-top: 10px dashed red;
  padding-top: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">lorem</div>

Answer 2

您根本没有指定尺寸。 box-sizing用于指示您明确设置的宽度或高度，包括边框或不包括边框。在这种情况下，没有明确设置尺寸，元素将随其内容缩放。

-编辑-

如果像您评论的那样，您不能设置特定的高度，这也意味着您不能在解决方案中使用像这样的边框。但是，您可以使用占位符来欺骗它。在下面的示例中，我使用了::before伪元素来代替边框。元素固定为10px，根据给定的类别，边框将为2px或10px。 .title元素的其余内容仍可以根据需要垂直缩放。

也许可以比这做得更优雅一些，但至少我希望您能想到。

$('.title').on('click', function(){
  $(this).toggleClass('titleact');
});

.title {
  padding: 0 9px 9px 9px;
}

.title::before{
  box-sizing:border-box;
  border-bottom: 2px solid blue;
  height: 10px;
  margin-bottom: 9px;
  content: "";
  display: block;
  overflow: hidden;
}

.titleact::before {
  border-bottom:10px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>lorem</div>

Answer 3

另一种想法是使用背景和渐变重新创建相同的对象，而您不会有任何问题：

$('.title').on('click', function() {
  $(this).addClass('titleact');
});

.title {
  background:linear-gradient(blue,blue) top/100% 2px no-repeat; 
  padding: 10px;
}

.titleact {
  background:repeating-linear-gradient(to right,red 0, red 15px,transparent 15px, transparent 25px) top/100% 10px no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title'>lorem</div>

不论边框宽度如何，保持元素的尺寸不变

3 个答案: