css页面布局
回顾复习css页面布局
三栏布局
左右固定中间自适应：
html部分同一如下
<div class='box1'></div>
<div class="box2"></div>
<div class="box3">
中间自适应
</div>style方法一：
div {
height: 300px;
}
.box1 {
float: left;
width: 300px;
background: red;
}
.box2 {
float: right;
width: 300px;
background: blue;
}
.box3 {
background: yellow;
}原理：利用第一和第二个盒子的左右浮动，使得与第三个盒子在一行
缺点：当宽度小于600px时，会繁发生换行；以及中间高度大于300px时，会有两边覆盖（其实中间的div宽度就是width：100%;可以利用overflow: hidden解决）
style方法二：
div {
height: 300px;
}
.box1 {
width: 300px;
background: red;
position: absolute;
left: 0;
}
.box2 {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 500px;
position: absolute;
left: 300px;
right: 300px;
}原理：利用绝对定位，来实现left=300px; right=300px
优点：当中间自适应的高度大于两边时不会发生重叠；但是当视窗大小小于600px时，中间会发生重叠，不换行
style方法三：
<style>
.wrap {
display: flex;
}
.box {
height: 300px;
}
.box1 {
width: 300px;
background: red;
}
.box2 {
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 500px;
flex: 1;
}
</style>
</head>
<body>
<div class="wrap">
<div class='box box1'></div>
<div class="box box3">
中间自适应
</div>
<div class="box box2"></div>
</div>
</body>原理：外部flex布局；中间利用flex: 1;即flex-basis： 0宽度中间取其容器最大
优点：自适应强，宽度小于600时，会缩小两边宽度；
缺点：低版本浏览器对flex兼容性不好；
style方法四：
.wrap {
display: table;
width: 100%;
}
.box {
height: 300px;
display: table-cell;
}
.box1 {
width: 300px;
background: red;
}
.box2 {
width: 300px;
background: blue;
}
.box3 {
background: yellow;
height: 300px;
}原理：利用table布局，来达到自使用，外部divwidth：100%，不然无法填充
优点：自适应强
缺点：中间高度改变会影响两边
style方法五：
.wrap {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
.box3 {
background: blue;
}原理：利用网格布局
优点：编写简单，自适应较强
两栏布局：
同理上面的·方法：
方法一 网格布局：
.wrap {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto
}
.box1 {
background: red;
}
.box2 {
background: yellow;
}
.box3 {
background: blue;
/* height: 500px; */
}方法二table布局
.wrap {
display: table;
width: 100%;
}
.box {
display: table-cell
}
.box1 {
width: 100px;
background: red;
}
.box2 {
background: blue;
}方法三flex布局
.wrap {
display: flex;
}
.box1 {
width: 100px;
background: red;
}
.box2 {
background: blue;
flex: 1;
}方法四绝对定位
.box1 {
width: 300px;
position: absolute;
left: 0;
background: red;
height: 100px;
}
.box2 {
background: blue;
position: absolute;
left: 300px;
right: 0;
}方法五浮动布局：
.box1 {
width: 300px;
float: left;
background: red;
height: 100px;
}
.box2 {
background: blue;
/* overflow: hidden; */
} 相关推荐
Ladyseven 2020-10-22
李鴻耀 2020-08-17
yaodilu 2020-08-03
luofuIT成长记录 2020-09-22
Mynamezhuang 2020-09-18
zhoujiyu 2020-06-28
89510194 2020-06-27
CaiKanXP 2020-06-13
MaureenChen 2020-06-12
Phoebe的学习天地 2020-06-07
淡风wisdon大大 2020-06-06
buttonChan 2020-06-06
xtuhcy 2020-05-20
AlisaClass 2020-05-18
赵家小少爷 2020-05-16
nicepainkiller 2020-05-05