css中的常见布局面试题 - 好文

双飞翼和圣杯布局区别可参考：https://www.cnblogs.com/imwtr/p/4441741.html

一、固定布局

二、自适应布局

宽度随着网页大小的改变而改变；

三、常见类型

1、两列布局：

1.1 左边宽度固定，右边宽度自适应（左边浮动，下一个元素就会占据位置，并排一行）
.
main {/*外层的样式：父级元素的水平居中*/ width: 95%; margin-left:auto; margin-right:auto;/*
左右居中 */ } /*左边设置固定宽度以及左浮动（为了不占一行）*/ .left { float: left; width: 200px; height:
600px; background: red; } /*右边设置自适应宽度，最小宽度，margin-left，把左边固定宽度的元素的位置留出来就好了*/
.right { min-width: 400px; /* 最小宽度 */ margin-left:
210px;//不设置margin，左边栏和右边栏会有重合部分 height: 600px; background: blue; }
html：
<div class="main"> <div class="left"></div> <div class="right"></div> </div>
1.2、右边宽度固定，左边宽度自适应：左右都浮动（左边自适应元素设置外层div
100%宽度，这样会占一行，然后里层设置右边的margin，把右边元素位置空出来）

//左边父级设置100%宽度，左浮动 .left-fa { width: 100%;//占一行 float: left; }
//左边子元素设置margin-right .left { margin-right: 310px;//把右边固定宽度的元素位置留出来 height:
600px; background: red; } /*右边固定宽度的元素左浮动，和margin-left负的本身大小*/ .right { width:
300px; height: 600px; background: yellow; float: left; margin-left: -300px;
//设置本身宽度的负值，是为了和左边元素占一行，不设置就被挤在下一行 }
2、三列布局

2.1 定位法：（左右边设置绝对定位，设置一个最外级div（给父级设置relative，相对最外层定位)）
.main {//最外层 width: 95%; margin-left:auto; margin-right:auto;/* 左右居中 */
height: 300px; *zoom: 1; position: relative; } /*左边固定元素定位*/ .left{ position:
absolute; top: 0; left: 0; width: 200px; height: 100%; background-color: cyan;
} /* 中间自适应，设置的margin左右距离为左右二边固定宽度元素的大小*/ .center-fa{ width: 100%; height:
100%; } .center{ height: 100%; min-width: 400px; margin-left: 210px;
margin-right: 210px; background-color: chocolate; } .right{ position: absolute;
top: 0; right: 0; width: 200px; height: 100%; background-color: rgb(255, 0,
221); }

html:
<div class="main"> <div class="left"></div> <div class="center-fa"> <div
class="center"></div></div> <div class="right"></div> </div>

2.1 双飞翼布局（对比圣杯如何呢？？）：（三栏都浮动，中间自适应元素设置外层div
100%宽度，以防独占一行，里层需要设置左右固定二栏的margin宽度，把左右二栏的位置空出来；另外，三栏排成一排，左右二栏需要设置负margin自身宽度）

.main { width: 95%; margin-left:auto; margin-right:auto;/* 左右居中 */ height:
300px; overflow: hidden; *zoom: 1; } .left{ float: left; width: 200px; height:
100%; margin-right: -200px;/*负margin自身宽度，为了并排一行。不然下面的会一直被挤下去*/
background-color: cyan; } .center-fa{ float: left; width: 100%; height: 100%; }
.center{ height: 100%; min-width: 400px; margin-left: 210px;/*为了给左右二栏空出位置*/
margin-right: 210px; background-color: chocolate; } .right{ margin-left:
-200px;/*负margin自身宽度，为了并排一行*/ float: left; width: 200px; height: 100%;
background-color: rgb(255, 0, 221); }
html:
<div class="main"> <div class="left"></div> <div class="center-fa"> <div
class="center"></div> </div> <div class="right"></div> </div>
3、grid布局

css:
.container{ display: grid; grid-template-columns: 1fr
100px;/*左自适应，右固定；右自适应，左固定反之即可*/ /*grid-template-columns:100px 1fr 100px;*/
/*左右固定，中间自适应*/ height: 200px; } .container div{ text-align: center; } .left{
background: pink; } .right{ background: yellowgreen; } .middle{ background:
orchid; }
html:
<div class="container"> <div class="left">left</div>  <div class="right">right</div>
</div>

热门工具换一换