Question

所以可以说我想要80％的页面红色，20％的页面蓝色。可以。

但是，如果我向其中任何一个添加1px边框，则该边框会损坏。

 .left {
        float:left; 
        width: 80%;
        background-color: red;
        height: 400px;
        border-right:1px solid black;

    }

.right {
float: right;
    background-color: blue;

    height: 400px;
    width: 20%;
}

JSfiddle：http://jsfiddle.net/38w4pLg0/

我可以有一个不破坏边界的边框吗？

Answer 1

box-sizing: border-box

在框上设置此属性。现在，框的总大小将包括边框。

默认情况下，此属性设置为content-box，该属性仅计算框的内部-填充+边框从计算中排除。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

问题示例：

.left {
    box-sizing: border-box;
    border-right: 1px solid black;
}

或者，最好为所有框添加一个新类：

.box {
    box-sizing: border-box;
}

Answer 2

添加了box-sizing: border-box;

它的作用是不会使边框在框上增加宽度/高度并将其包含在框内。

jsfiddle：

http://jsfiddle.net/38w4pLg0/6/

1px边框弄乱了100％宽度的拆分页面

2 个答案: