缺少html/css底部边框_Html_Css_Border

缺少html/css底部边框

html css

缺少html/css底部边框,html,css,border,Html,Css,Border,缺少.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;

缺少.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>

改变

致：

换个位子。街区

.block1和.block2及其边框的高度为302px，因此您也可以将.block的高度更改为302px或更高

JSFiddle：

改变

致：

换个位子。街区

.block1和.block2及其边框的高度为302px，因此您也可以将.block的高度更改为302px或更高

JSFiddle：

欢迎使用CSS盒模型

这是因为边框会像填充一样添加到元素上设置的宽度/高度

由于.block是300px高，.block1和.block2是100%，加上1px的边框，它们实际上是302px高

由于您有溢出：hidden on.block，它正在剪裁边框

长方体大小：边框长方体使长方体模型和大小调整行为更具逻辑性

欢迎使用CSS盒模型

这是因为边框会像填充一样添加到元素上设置的宽度/高度

由于.block是300px高，.block1和.block2是100%，加上1px的边框，它们实际上是302px高

由于您有溢出：hidden on.block，它正在剪裁边框

长方体大小：边框长方体使长方体模型和大小调整行为更具逻辑性

overflow: hidden;

overflow: visible;