1.两栏布局（左边宽度固定，右边宽度自适应）
①浮动（定位）+外边距
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.left{
width:100px;
height:200px;
background-color:blueviolet;
float:left;
}
.right{
height:200px;
margin-left:100px;//外边距值等于左边固定宽度的值，不能给右边自适应元素写width
background-color:yellowgreen;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
②自身浮动+自适应元素负边距
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.left{
width:100px;
height:200px;
background-color:blueviolet;
float:left;
}
.right{
float:left;
width:100%;//width写给父元素
margin-left:-100px;
}
.inner{
margin-left:100px;
height:200px;//height写给子元素
background-color:yellowgreen;
}
</style>
<body>
<div class="left"></div>
<div class="right">
<div class="inner">123</div>
</div>
</body>
③自身浮动+固定元素负边距
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.left{
width:100px;
height:200px;
background-color:blueviolet;
float:left;
margin-right:-100%;
}
.right{
float:left;
width:100%;
}
.inner{
margin-left:100px;
height:200px;
background-color:yellowgreen;
}
</style>
<body>
<div class="left">13123</div>
<div class="right">
<div class="inner">123</div>
</div>
</body>
④用BFC实现
什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域。只有Block-level-box参与，它规定了内部的Block-level-box如何布局，并且与这个区域外部毫不相干。
触发BFC的条件
- float的值不为none;
- overflow的值为scroll,auto或hidden;
- display的值为table-cell,table-caption或inline-block;
- position的值不为relative或static。
BFC的规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.left{
width:100px;
height:200px;
background-color:blueviolet;
float:left;
}
.right{
height:200px;
background-color:yellowgreen;
overflow:hidden;
}
</style>
<body>
<div class="left">13123</div>
<div class="right">2333</div>
</body>
⑤flex实现
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.wrap{
display:flex;
width:100%;
}
.left{
flex:0 0 100px;
background-color:blueviolet;
}
.right{
flex:auto;//auto表示 1 1 auto;
height:200px;
background-color:yellowgreen;
}
</style>
<body>
<div class="wrap">
<div class="left">13123</div>
<div class="right">2333</div>
</div>
</body>
2.三栏布局
①圣杯布局
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.header,.footer{
width:100%;
height:50px;
background-color:blueviolet;
}
.wrap{
padding-left:100px;
padding-right:100px;
overflow:hidden;
}
.left{
width:100px;
margin-left:-100%;
float:left;
height:200px;
background-color:black;
position:relative;
left:-100px;
top:0;
}
.main{
width:100%;
height:200px;
background-color:red;
float:left;
}
.right{
width:100px;
height:200px;
margin-left:-100px;
float:left;
background-color:yellowgreen;
position:relative;
right:-100px;
top:0;
}
</style>
<body>
<div class="header"></div>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
②双飞翼布局
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.header,.footer{
width:100%;
height:50px;
background-color:blueviolet;
clear:both;
}
.left{
width:100px;
margin-left:-100%;
float:left;
height:200px;
background-color:black;
}
.right{
width:100px;
height:200px;
margin-left:-100px;
float:left;
background-color:yellowgreen;
}
.wrap{
float:left;
width:100%;
}
.main{
margin-left:100px;
margin-right:100px;
height:200px;
background-color:blanchedalmond;
}
</style>
<body>
<div class="header"></div>
<div class="wrap">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
③用flex布局实现
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.header,.footer{
width:100%;
height:50px;
background-color:blueviolet;
clear:both;
}
.wrap{
display:flex;
}
.main{
flex:auto;
background-color:yellowgreen;
height:200px;
}
.left{
width:100px;
height:200px;
background-color:black;
}
.right{
width:100px;
height:200px;
background-color:royalblue;
}
</style>
<body>
<div class="header"></div>
<div class="wrap">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
如何实现绝对居中布局
①已知div的宽度高，采用position绝对定位的方式来实现居中
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.inner{
width:200px;
height:200px;
background-color:greenyellow;
position:absolute;
margin-left:-100px;
margin-top:-100px;
top:50%;
left:50%;
}
</style>
<body>
<div class="inner"></div>
</body>
利用position:absolute;绝对定位，可以让元素脱离文档流，然后利用top,right,bottom,left四个属性来对元素进行定位，注意：position:absolute;会有一个定位参考的父元素，它是相对于最近的，已经定位的，position不是static的元素进行定位的，如果没有，就是相对于根元素，也就是html来进行定位（因为这里没有设置父元素的定位，就是相对于根元素进行定位的）。然后在设置它的左margin和上margin为div宽度的一半就可以实现绝对居中了。
②已知div的宽高，实现绝对居中的另一种写法
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
}
.inner{
width:200px;
height:200px;
background-color:greenyellow;
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
<body>
<div class="inner"></div>
</body>
③用flex布局实现
<style type="text/css" rel="stylesheet">
body{
margin:0;
padding:0;
display:flex;
height:600px;
background-color:blanchedalmond;
justify-content:center;
align-items:center;
}
.inner{
width:200px;
height:200px;
background-color:greenyellow;
}
</style>
<body>
<div class="inner"></div>
</body>
