面试时遇到这样一个题,题目要求:分为左中右三列,左右两边固定宽度,均为200px;中间宽度自适应。当时没太明白,甚至把几个元素混为一谈了。得空了便来捋一捋。
我们先设这三块分别为left、middle、right。
1、浮动法(float与absolute区别在第二点)
浮动法的原理:
对左右块使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素在正常文档流中。
注意:
middle位置要求:middle块一定要放在left和right之后,因为它占据文档流位置,所以一定要放在最后
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 浮动</title>
<style type="text/css">
#box{
height: 200px;
}
#left {
width: 200px;
height: 200px;
float: left;
background-color: #ffe6b8;
}
#right{
width: 200px;
height: 200px;
float: right;
background-color: #ffe6b8;
}
#middle{ background-color: #a0b3d6;height: 200px;}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">middle</div> <!--注意middle块的位置,虽然写在right后面,但是在布局效果中出现在中间 -->
</div>
</div>
</body>
</html>
效果如下:
2、绝对定位
这种方法就是利用了绝对定位absolute,让左右两块脱离文档流,此时left和right与文档流无关,不占据空间。定位的元素和其他元素重叠。此处的left是叠在middle上的。
方法1和2的区别:
在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别:
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置(即在文档流中占位置),环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它(不占位置)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 左右绝对定位absolute</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
#left{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 0;
left: 0; //注意这里
}
#middle{
height: 200px;
background: red;
text-align: center;
}
#right{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
right: 0; //注意这里
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</body>
</html>
3、marign负值法
该方法在网站布局中非常常见,也是面试常考点,优点是三栏相互关联,有一定的抗性。
要求:在middle外部再加一个div。此div需要设置float属性使其形成一个BFC(请自行百度点击跳转),并设置宽度,并且这个宽度要和left块的margin负值进行配合。看代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 marign负值法</title>
<style type="text/css">
#div{
width: 100%;
height: 200px;
background: green;
float: left; /*记得是包含middle外层的div写啊*/
}
#middle{
height: 100%;
background: red;
}
#right,#left{
width: 200px;
height: 200px;
float: left; /*左右块浮动*/
}
#left{
background: yellow;
margin-left: -100%; /*-100%是因为相对来说它偏移到下一行去了*/
}
#right{
background: blue;
margin-left: -200px; /*这里的宽度一定要设置成等于负的包含middle的那个块的宽度*/
}
</style>
</head>
<body>
<div id="div">
<div id="middle">middle</div> <!-- middle必须放在最前面 -->
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
4. css3新属性flex方法
flex相关的请移步flex属性简介
写一个<`div>,在flex中类似于容器,
将left、right、middle全部包进去
并设div的display:flex。
flex :auto相当于 1 1 auto,flex元素在需要的时候既可以拉伸也可以收缩
flex-grow 按比例分配空间(放大比例),以·flex-basis为基础,沿主轴方向增长尺寸
flex-shrink 元素收缩
flex-basis 该元素空间大小,flex里除了元素所占的空间意外其余的元素就是可用空间。默认auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 css3新属性flex方法</title>
<style type="text/css">
#box{
width: 100%;
height: 200px;
display: flex;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
flex: auto;
background: skyblue;
/* 注: flex属性是flex-grow(项目放大比例), flex-shrink(缩小比例) 和 flex-basis(定义该元素空间大小)的简写,默认值为0 1 auto。后两个属性可选*/
}
</style>
</head>
<body>
<!-- 写一个的div包含left、right、middle,设置为display:flex;并将middle设置flex:1; -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>
补充:实现下图效果
<style>
body{
margin:0;
padding: 0;
}
#top{
width: 100%;
height: 60px;
border:2px solid blue;
margin-bottom: 30px;
}
#content{
width:100%;
height: 400px;
display: flex;
}
#left {
width: 100px;
border:2px solid blue;
margin-right: 30px;
}
#middle{
border:2px solid blue;
flex: 1;
}
#right{
width: 60px;
border:2px solid blue;
margin-left: 30px;
}
</style>
<div id="top">A区域 </div>
<div id="content">
<div id="left">B区域</div>
<div id="middle">C区域</div>
<div id="right">D区域</div>
</div>
浏览器上显示效果如下图