请问网页的盒子怎么做到左右各一个，并且分别占网页的一半面积？
html 和 body 设置 margin: 0;
两个div 设置 float: left;和width: 50%;
代码如下：{如果对你有帮助，可以给我个采纳吗，谢谢!! 点击我这个回答右上方的【采纳】按钮}。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#div1 {
float: left;
width: 50%;
background-color: #ff6;
height: 100%;
}
#div2 {
float: left;
width: 50%;
background-color: #6ff;
height: 100%;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
body 设置 margin: 0px;padding:0px;
然后用flex弹性布局，外层一个容器div，内层的元素则因为flex布局（未声明column相关样式），而变成同一行
100vh的高度则表示铺满整个可视区域的高度，flex:1则设置该元素为弹性布局元素，自动伸缩以适应布局，这样就可以在整个屏幕上，左右两个盒子各占50%面积了
<html>
<body style="margin:0px;padding:0px;">
<div style="display:flex;">
<div style="flex:1;background:red;height:100vh;"></div>
<div style="flex:1;background:blue;height:100vh;"></div>
</div>
</body>
</html>Float设置left 和right 然后宽各设置50%