[英]html/css bottom border missing
The bottom border for the .block1 div and .block2 is missing. .block1 div和.block2的底部边框丢失。 The .header has all borders, I tried .block and it has borders, but those 2 are missing just the bottom.
.header具有所有边框,我尝试使用.block并具有边框,但是那两个都缺少底部。 I can't figure it out.
我不知道。 Why is that?
这是为什么?
<!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>
Welcome to CSS Box Model! 欢迎使用CSS Box模型!
This is because borders ADD TO the width/height you have set on elements (as does padding). 这是因为边框将添加到您在元素上设置的宽度/高度(填充)。
since .block
is 300px tall, and .block1
and .block2
are 100%, with the 1px border, they are actually 302px tall. 由于
.block
的高度为300px,而.block1
和.block2
为100%,且边框为1px,因此它们的高度实际上为302px。
and since you have overflow:hidden
on .block
it is clipping the border. 并且由于您有
overflow:hidden
在.block
,因此剪切了边框。
box-sizing:border-box
makes box model and sizing behave more logically. box-sizing:border-box
使框模型和尺寸调整行为更具逻辑性。
http://css-tricks.com/the-css-box-model/ http://css-tricks.com/the-css-box-model/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.