css中的常见布局面试题

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

1、固定布局

2、自适应布局

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

3、常见类型

一、两列布局：

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.二、右边宽度固定，左边宽度自适应：左右都浮动（左边自适应元素设置外层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.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>