html / css底部邊框缺失
[英]html/css bottom border missing
問題描述
.block1 div和.block2的底部邊框丟失。 .header具有所有邊框，我嘗試使用.block並具有邊框，但是那兩個都缺少底部。 我不知道。 這是為什么？
<!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>
2 個解決方案
解決方案1
4 2014-06-16 20:13:10
歡迎使用CSS Box模型！
這是因為邊框將添加到您在元素上設置的寬度/高度（填充）。
由於.block的高度為300px，而.block1和.block2為100％，且邊框為1px，因此它們的高度實際上為302px。
並且由於您有overflow:hidden在.block ，因此剪切了邊框。
box-sizing:border-box使框模型和尺寸調整行為更具邏輯性。
解決方案2
3 已采納
更改
overflow: hidden;
至：
overflow: visible;
在.block更改
.block1和.block2的邊界302px為302px因此您也可以將.block的高度更改為302px或更高
JSFiddle：
HTML CSS 神秘底部邊框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.