1

代码：

HTML

<body>
    <div class="wrap">
        <div class="box">???</div>
    </div>
</body>

CSS

.wrap {
    background-color: #0000FF;
    display: block;
    height: 600px;
    margin: 0px auto;
    padding: 0px;
    width: 600px;
}

.box {
    border: solid 20px #FF0000;
    color: #FFFFFF;
    display: block;
    height: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    width: 100%;
}

JSFiddle：http:
//jsfiddle.net/5k0ddtdn/4/

考虑到这不是border-box.

为什么不这样做？

4

2 回答 2

1

像这样更新你的盒子：

.box {
    border: solid 20px #FF0000;
    color: #FFFFFF;
    display: block;
    height: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

现场演示

于 2015-02-27T08:22:37.837 回答
1

添加box-sizing: border-box;到.box.

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

http://jsfiddle.net/5k0ddtdn/8/

在您的代码中，内部元素的宽度为 600px + 40px 边框，父元素（.wrap总共有 640px）。您需要更改box-model或为内部元素 ( width: 560px; height: 560px;) 设置正确的大小。您可以删除width内部元素并仅设置height: 560px;.

http://jsfiddle.net/5k0ddtdn/10/

于 2015-02-27T08:24:19.430 回答