*{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>```
知识点
1·
margin:0; padding:0：清除浏览器默认自带内外边距（ul、div、body 等自带默认 margin/padding）
box-sizing: border-box：怪异盒模型
2·
边框 border 布局分割
border: 5px solid red
简写语法：边框宽度 线型 颜色
单边边框：border-right / border-bottom 只给单侧加边框做分割线
盒模型影响：开启border-box后边框不超出设置宽高
3·
浮动 float 布局（核心）
1. float:left / float:right
float:left：元素向左浮动，多个浮动元素从左到右并排
float:right：元素向右浮动，多个浮动元素从右往左排
浮动特性：脱离标准文档流，块级元素失去独占一行特性，可横向并排
overflow: hidden--消除浮动
浙公网安备 33010602011771号