*{margin: o;
padding: 0;
box-sizing: border-box;}
.main{
margin: 0 auto;
width: 800px;
height: 400px;
border: 5px solid red ;
}
-
*：选中页面里所有元素。
-
margin:0; padding:0; ：清除浏览器默认的内外边距，避免不同浏览器显示差异。
-
box-sizing: border-box; ：最关键的一句！
-默认情况下，盒子的 width/height 只包含内容区，边框和内边距会额外撑大盒子。
-加上这句后， width/height 会把边框、内边距一起算进去，盒子尺寸就不会乱掉了。
main
- margin: 0 auto; ：让这个大盒子在页面里水平居中。
- width:800px; height:400px; ：规定整个布局的总宽度和总高度。
- border:5px solid red; ：给整个布局加一圈红色外边框，就是你截图里最外面的红框。
.bettwen{
height: 100px;
overflow: hidden;
border-bottom: 5px solid red ;}
height:100px; ：规定上排区域的高度，和里面的 .left .right 高度一致。
overflow: hidden; ：清除浮动！- 因为 .left 和 .right 都设置了 float ，会脱离文档流，父容器会“塌陷”。加上这句后，父容器就能正常包裹住浮动的子元素，不会影响下面的 .bottom 盒子。
border-bottom: 5px solid red; ：给上排底部加一条红色横线，把上排和下排分隔开。
.left {
float: left;
height: 100px;
width: 300px;
border-right: 5px solid red;
}
.right {
float: right;
height: 100px;
width: 490px;
/* border: 5px solid red; */
}
-
float: left; ：让这个盒子向左浮动，脱离普通文档流，和右边的盒子并排显示。
-
height:100px; ：和父容器 .bettwen 高度一致，撑满整个上排高度。
-
width:300px; ：左侧盒子的宽度，是你设定的尺寸。
-
border-right: 5px solid red; ：给右侧加一条红色竖线，和右边的盒子分隔开。
-
float: right; ：让这个盒子向右浮动，和左边的盒子并排显示。
-
height:100px; ：同样撑满上排高度。
-
width:490px; ：右侧盒子的宽度，这里是 800 - 300 - 10 计算出来的，减去了左侧盒子宽度和中间的边框宽度，刚好能放下。
.bottom { height: 290px; }-
height:290px; ：下排盒子的高度，是总高度减去上排高度和分隔线高度算出来的： 400 - 100 - 10= 290，这里用了290px，留了一点间距，确保不会超出总高度。
-
它不需要设置浮动，因为上排的父容器已经清除了浮动，它会正常在文档流里，排在 .bettwen 下面。
总代码：
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框划分区域</title>
<style>
*{margin: o;padding: 0;box-sizing: border-box;}
.main{
margin: 0 auto;
width: 800px;
height: 400px;
border: 5px solid red ;
}
.bettwen{
height: 100px;
overflow: hidden;
border-bottom: 5px solid red ;
}
.left{
float: left;
height: 100px;
width: 300px;
border-right: 5px solid red ;
}
.right{
float: right;
height: 100px;
width: 490px;
border: 5px solid red ;
}
.bottom{
height: 290px;
}
</style>
</head>
<body>
<div class="main">
<div class="bettwen">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号