带边框的百分比

Question

有一种方法可以使.teste宽度为100％（150px）吗？

<div class='debug'>
    <div class='debug'>
        <div class='teste'>Hello world!</div>
    </div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

.debug {
    min-height: 100px;
    width: 150px;
    border: 1px solid red;
}

.teste {
  /* width: 150px; */
}

http://jsfiddle.net/yxbwv62L/

计算出的大小为148px。为什么不是150px？

Answer 1

那是因为您正在使用box-sizing: border-box。这使得.debug宽度保持在150px并且边框位于div内。因此.teste的剩余宽度仅为148px。如果你想将两个宽度保持在150px，那么你可以切换这样的属性：

.debug {
  width: 150px;
}

.teste {
  width: 100%;
  min-height: 100px;
  border: 1px solid red;
} 

fiddle

Answer 2

给.teste边框大小的左右边距（在这种情况下为1px）。

.teste {
  margin-left: -1px;
  margin-right: -1px;
}