[css]css中的常见布局面试题

楼主^#

更多发布于：2018-09-12 17:19

双飞翼和圣杯布局区别可参考：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布局（神奇用法，简单好用）
html：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
.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;
}

</style>
<body>
<div class="container">
   <div class="left">left</div>
   
   <div class="right">right</div>
</div>
</body>
</html>

[琴妹8于2018-12-18 15:06编辑了帖子]

喜欢1