1、绝对定位两栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位两栏布局</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
overflow-y: hidden;
}
.left {
position: absolute;
left: 0;
right: 0;
width: 300px;
height: 100%;
background-color: green;
}
.right {
height: 100%;
margin-left: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
效果图：
2、圣杯布局-三栏布局
要解决的问题：两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
原理：
- 利用浮动搭建完整的布局框架
- margin 为负值，调整旁边两列的位置(使三列布局到一行上)
- 使用相对定位，调整旁边两列的位置（使两列位置调整到两头）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
.header,.footer{
width: 100%;
height: 30px;
text-align: center;
background: gray;
}
.container{
overflow: hidden;
padding: 0 200px;
}
.middle, .left, .right{
padding-bottom: 10000px;
margin-bottom: -10000px;
float: left;
}
.middle{
width: 100%;
background: pink;
}
.left{
position: relative;
left: -200px;
margin-left: -100%;
width: 200px;
background: yellow;
}
.right{
position: relative;
right: -200px;
margin-left: -200px;
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果图：
3、双飞翼布局
要解决的问题：两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
原理：
- 利用浮动搭建完整的布局框架
- margin 为负值，调整旁边两列的位置(使三列布局到一行上)
- 把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>双飞翼布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
/*头部 脚部样式*/
.header,.footer{
width: 100%;
height: 30px;
text-align: center;
background: green;
}
/*三列的伪等高布局*/
.middle, .left, .right{
padding-bottom:10000px ;
margin-bottom: -10000px;
/* height: 50px;
line-height: 50px; */
float: left;
}
/*双飞翼布局*/
.container{
overflow: hidden;
}
.middle{
width: 100%;
background: deeppink;
}
.middle .middle-content{
padding: 0 200px;
}
.left,
.right {
background: pink;
width: 200px;
text-align: center;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">
<div class="middle-content">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果图如下：
4、伪等高布局
要解决问题：内容多列的高度相同
原理：
- 利用浮动使元素全部左浮动
- 利用padding-bottom将内容高度撑大，一般设置为10000px
- 利用margin-bottom的负值，将下边界收回到原来的位置，一般是-10000px
- 父元素用overflow：hidden；把超出部分隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪等高布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 700px;
margin: 0 auto;
overflow: hidden;
}
#wrap .left{
float: left;
width: 200px;
background: pink;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#wrap .right{
float: left;
width: 500px;
background: deeppink;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
/* 清除浮动 */
.clearfix{
*zoom: 1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="wrap" class="clearfix">
<div class="left">
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
left <br />
</div>
<div class="right">
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
</div>
</div>
</body>
</html>
效果图如下：
5、绝对定位模拟固定定位
解决问题：由于ie6不支持fix定位，需要用绝对定位来模拟固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用绝对定位来模拟固定定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 禁止系统默认滚动条 */
html{
overflow: hidden;
height: 100%;
}
/* 给body加滚动条 */
body{
overflow: auto;
height: 100%;
}
/* 绝对定位来模拟固定定位 */
#test{
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="test"></div>
<div style="height: 1000px;">
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
csjkahcjk <br />
</div>
</body>
</html>
————————————————
智一面|前端面试必备练习题