Question

缺少.block1 div和.block2的下边框。 .header有所有边框，我试过.block并且它有边框，但是那些2只缺少底部。我无法弄明白。那是为什么？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.header
{
width: 1500px;
height: 100px;
border: 1px solid;
margin: 50px;
font-size: 36pt;
text-align: center;
}

.block
{
width: 1500px;
height: 300px;
margin: 80px 80px 80px 50px;
overflow: hidden;
}

.block1
{
width: 950px;
height: 100%;
border: 1px solid;
margin-right: 80px;
font-size: 12pt;
text-align: left;
float: left;
}

.block2
{
width: auto;
height: 100%;
border: 1px solid;
overflow: hidden;

font-size: 9pt;
}
</style>
</head>
<body>
<div class="header">
Header (36pt)
</div>

<div class="block">
    <div class="block1">
    Block1 (12pt)
    </div>

    <div class="block2">
    Block2 (9pt)
    </div>
</div>

</body>
</html>

Answer 1

欢迎使用CSS Box模型！

这是因为边框添加到您在元素上设置的宽度/高度（填充）。

因为.block高300像素，.block1和.block2是100％，1px边框，实际上是302px高。

由于overflow:hidden上有.block，因此它会剪切边框。

box-sizing:border-box使得框模型和尺寸更符合逻辑。

http://css-tricks.com/the-css-box-model/

Answer 2

更改

overflow: hidden;

要：

overflow: visible;

在.block

中更改

.block1和.block2与他们的边界相关联302px，因此您也可以将.block的高度更改为302px或更高

的jsfiddle：

here

html / css底部边框丢失

2 个答案: