第一步拆解页面布局:按照垂直方向进行划分 第二步拆解页面布局:按照水平方向进行分化 第三步拆解页面局部:垂直方向继续划分
布局名称 | 说明 |
---|---|
块布局 | 用来布置文件。块布局包含以文档为中心的功能。 |
行内布局 | 用来布置文本 |
表格布局 | 用来布置表格 |
定位布局 | 用来对那些与其他元素五交互的定位元素进行布置 |
弹性盒子布局 | 用来布置那些可以顺利调整大小的复杂页面。 |
网格布局 | 用来布置那些与一个固定网格相关的元素. |
一列定宽,一列自适应 关键在于自适应列
margin-left
)。
解决方案 :可以将margin-left
修改为overflow:hidden
(但依然存在问题:内容溢出隐藏)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 600px; height: 400px; border: 1px solid black; margin: 0 auto; } .left { width: 200px; height: 100%; background-color: lightcoral; /* 为左边div设置浮动 */ float: left; } .right { height: 100%; background-color: lightskyblue; /* 可以将外边距设置为 overflow:hidden */ margin-left: 200px; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html> table-cell
属性说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 600px; height: 400px; border: 1px solid black; margin: 0 auto; display: table; table-layout: fixed; } .left,.right{ display: table-cell; } .left { width: 200px; height: 100%; background-color: lightcoral; } .right { height: 100%; background-color: lightskyblue; margin-left: 200px; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
两列定宽,一列自适应
没有滚动条,布局根据窗口大小改变。
height:100%
,为子级元素设置height:100%
vh
单位,即设置height:100vh
即可实现方案1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
}
.top,
.content,
.bottom {
position: absolute;
}
.top {
width: 100%;
height: 50px;
background-color: lightcoral;
left: 0;
top: 0;
right: 0;
}
.content {
width: 100%;
/* height: 100px; */
background-color: lightgreen;
left: 0;
right: 0;
top: 50px;
bottom: 50px;
}
.left,
.right {
float: left;
position: relative;
}
.left {
width: 300px;
height: 100%;
background-color: lightskyblue;
z-index: 9999;
}
.right {
width: 100%;
height: 100%;
background-color: mediumorchid;
margin-left: -300px;
z-index: 0;
}
.bottom {
width: 100%;
height: 50px;
background-color: lightgray;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<!-- 全屏布局容器 -->
<div class="container">
<!-- 顶部栏 -->
<div class="top"></div>
<!-- 主体: 菜单+内容区 -->
<div class="content">
<!-- 菜单 -->
<div class="left"></div>
<!-- 内容区 -->
<div class="right"></div>
</div>
<!-- 底部栏 -->
<div class="bottom"></div>
</div>
</body>
</html>
实现方案2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化边距 */
body,
p {
margin: 0;
}
/* 初始化高度 */
body,
html,
.parent {
height: 100%;
}
/* 将上部 中部 下部 水平铺满 */
.top,
.middle,
.bottom {
position: absolute;
left: 0;
right: 0;
}
/* 顶部始终在上 */
.top {
top: 0;
height: 50px;
}
/* 底部始终在下 */
.bottom {
bottom: 0;
height: 50px;
}
/* 中部位置 */
.middle {
top: 50px;
bottom: 50px;
}
.left,
.right {
position: absolute;
top: 0;
bottom: 0;
}
/* 左 */
.left {
width: 100px;
}
/* 右 */
.right {
left: 120px;
right: 0;
overflow: auto;
}
.right-in {
height: 1000px;
}
</style>
</head>
<body>
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="top" style="background-color: lightblue;">
<p>top</p>
</div>
<div class="middle" style="background-color: pink;">
<div class="left" style="background-color: orange;">
<p>left</p>
</div>
<div class="right" style="background-color: lightsalmon;">
<div class="right-in">
<p>right</p>
</div>
</div>
</div>
<div class="bottom" style="background-color: lightgreen;">
<p>bottom</p>
</div>
</div>
</body>
</html>