常见网页布局的介绍
2020-04-07 本文已影响0人
mm_tang
左侧固定，右侧自适应
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="right">右侧的盒子</div>
</div>
1. 使用flex实现
.parent {
display: flex;
}
.left {
width: 200px;
border: 1px solid red;
margin-right: 10px;
}
.right {
flex: 1; // 相当于 flex： 1 1 0 填充满剩余空间
border: 1px solid black;
}
_____________________________________________________________________________
2.使用传统的浮动实现
.parent {
height: 500px;
border: 1px solid red;
}
.left {
float: left; // 左侧固定的盒子，宽高写死，并且浮动
height: 460px;
width: 200px;
border: 1px solid green;
margin: 20px;
}
.right {
height: 460px; // 右侧不写宽度，直接用margin-left挤出距离
border: 1px solid blue;
margin: 20px 20px 20px 260px;
}
右侧固定，左侧自适应
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="right">右侧的盒子</div>
</div>
1.使用flex实现
.parent {
display: flex;
}
.left {
flex: 1; // flex: 1 1 auto;
border: 1px solid red;
margin-right: 10px;
}
.right {
width: 200px;
border: 1px solid blue;
}
_____________________________________________________________________________
2. 使用传统的浮动实现
<div class="parent">
<div class="right">右侧的盒子</div>
<div class="left">左侧的盒子</div>
</div>
.parent {
border: 1px solid black;
}
.left { // div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度
margin-right: 220px;
border: 1px solid red;
}
.right {
float: right; // html中right必须放在left盒子之前
width: 200px;
border: 1px solid blue;
}
圣杯布局（左右固定，中间自适应）
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="center">中间的盒子</div>
<div class="right">右侧的盒子</div>
</div>
1.flex布局
.parent {
display: flex;
}
.left {
border: 1px solid red;
flex: 0 0 100px; // 这里左右盒子甚至的宽度是100px
}
.center {
flex: 1;
border: 1px solid blue;
}
.right {
flex: 0 0 100px;
border: 1px solid red;
}
_____________________________________________________________________________
2.使用浮动+margin实现
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="right">右侧的盒子</div> // 浮动的盒子要放到标准流盒子的右侧
<div class="center">中间的盒子</div>
</div>
.left, .center, .right{
height: 200px;
}
left {
width: 200px;
border: 1px solid red;
float: left; // 左右盒子都写死宽高并浮动
}
.center {
margin-left: 220px; // 使用左右margin值挤出自己的位置
margin-right: 220px;
border: 1px solid blue;
}
.right {
width: 200px;
float: right;
border: 1px solid red;
}
_____________________________________________________________________________
3.使用margin 负边距+padding来实现
<div class="parent">
<div class="center">中间的盒子</div>
<div class="left">左侧的盒子</div>
<div class="right">右侧的盒子</div>
</div>
.parent {
padding-left: 100px; // 给左右两个盒子留出位置
padding-right: 100px;
}
.left,.center,.right {
float: left;
position: relative;
}
.left {
margin-left: -100%; // 因为浮动关系，就把左边块上移到了[center]左侧，与其交织在一起，这样可以让left回到上一行最左侧
left: -100px; // 回到父元素预留的左侧padding的位置
width: 100px;
border: 1px solid red;
}
.center {
width: 100%;
border: 1px solid blue;
}
.right {
margin-left: -100px; // 右侧移动的是自己的宽度
right: -100px; // 回到父元素预留的右侧的padding的位置
width: 100px;
border: 1px solid red;
}
中间固定 两侧自适应
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="center">中间的盒子</div>
<div class="right">右侧的盒子</div>
</div>
1. 使用flex实现
.parent {
display: flex;
}
.left {
flex: 1;
border: 1px solid red;
}
.center {
width: 200px;
border: 1px solid black;
}
.right {
flex: 1;
border: 1px solid red;
}
_____________________________________________________________________________
2.通过绝对定位和预留padding值来实现
.parent {
position: relative;
box-sizing: border-box;
}
.left,.right {
width: 50%;
float: left;
border: 1px solid red;
}
.left {
padding-right: 100px; // 这是预留给中间盒子宽度的二分之一
}
.center { // 中间的盒子要水平居中到最中间，相当于是叠在左右两个盒子的上方
width: 200px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
}
.right {
padding-left: 100px;
}
_____________________________________________________________________________
3.使用calc()函数计算实现
.parent {
height: 200px;
}
.left,.right {
float: left;
height: 100%;
width: calc(50% - 100px); // 左右两边通过calc计算实现，减去的是中间容器宽度的一般
border: 1px solid red;
}
.center {
width: 200px;
float: left;
height: 100%;
border: 1px solid black;
}
等分布局
等分布局其实就是我们常用的百分比布局，宽度自适应，高度写死，但是这样布局不能百分比的去还原设计图，一些小的icon也需要写死，一些图片需要保持等比例缩放。
多列等高布局（依据padding占用空间）
<div class="parent">
<div class="left">左侧的盒子</div>
<div class="right">右侧的盒子</div>
</div>
1. 使用flex布局
// 由于flex的align-items的默认值是stretch，所以高度是等高的
// 假如想通过flex布局实现子项目的高度自适应，可以将align-items设置成flex-start
.parent {
display: flex;
}
.left,.right {
border: 1px solid red;
margin-right: 10px;
width: 100px;
}
_____________________________________________________________________________
2. 使用负边距抵消
.parent {
width: 300px;
border: 1px solid blue;
overflow: hidden;
}
.left,.right {
float: left;
width: 100px;
border: 1px solid red;
padding-bottom: 2000px; // 其他比这列矮的列，会用它们的padding-bottom来补偿这部分高度差
margin-bottom: -2000px; // 设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom
}
当我们在进行移动端开发的时候，这些页面布局是会经常使用的，希望这些小例子可以帮助大家理解~ 动动手 敲敲代码会更容易理解哦~😊
