在html中 常用布局方法 有三种：标准流（顺序、默认）、浮动（float）、定位（position）
元素：块级元素（一行一个），内联元素（一行多个）
定位：position,脱离标准流
可选参数：
static(标准流)
relative（处于标准流）:通过更改属性：left、right、top、bottom；后写的元素层级大于先写元素，会出现
相互覆盖
需注意
修改left和top
修改right和bottom
absolute（脱离文档流）：通过更改属性top、left、right、bottom；后写的元素层级大于先写元素，会出现
相互覆盖
一旦设置绝对定位，就会脱离文档流，父层如果没设高度其高度就会为0；
absolute需要搭配属性使用，否则没有效果
需注意（定位按照窗口的大小，不是文档流的大小）
修改left
修改right
修改top
修改bottom
fixed(脱离文档流)：通过更改属性top、left、right、bottom；与绝对定位的属性位置相同；是相对于窗口进行的
定位（绝对定位时相对于父级）
inherit （继承）：继承父级定位
层级（z-index）：所有带有定位属性的元素，都是有层级的；普通的文档流中也有层级关系
层级大的覆盖层级小的，依赖层级定位层级为auto不参与层级比较层级为负数则会被标准流中的元素覆盖必须是定位的元素即有position
注意
其中父元素的层级比相邻元素层级大，不管子元素的层级有多低，都会将相邻元素覆盖，因为受其父元素的影响!
***************************************************************************************************
盒子模型和定位
盒子模型：通过改变内边距和外边距来定位子元素的位置
定位：通过改变元素的left、right、top、bottom元素来确定位置
***************************************************************************************************
几种较常见布局
自适应布局
一、margin法左固定右自适应
开始简单的布局（left和right都设高度 宽度左边设成固定值，右边设成100%）
<style> .head{background: #5BC0DE;} .content{} .left{background: #EBCCD1;width: 100px;height: 200px;} .right{background: #F7E1B5;width: 100%;height: 400px;} .footer{background: #5BC0DE;} </style><body> <div class="head">head</div> <div class="content"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body>效果
↓
加上浮动并清除（为了使左右在一行，但此时的效果是一样的与上面，不要着急，着重点是加的东西）
<style> .head{background: #5BC0DE;} .content{} .left{background: #EBCCD1;width: 100px;height: 200px;float: left;} .right{background: #F7E1B5;width: 100%;height: 400px;float: left;} .footer{background: #5BC0DE;} .clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }.clearfix { 机灵的巨人: 1; } </style> </head> <body> <div class="head">head</div> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="clearfix"></div> </div> <div class="footer">footer</div> </body>↓
最后在外容器上加padding-left 在左块上加margin-left
<style> .head{background: #5BC0DE;} .content{padding-left: 100px;} .left{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-left: -100px;} .right{background: #F7E1B5;width: 100%;height: 400px;float: left;} .footer{background: #5BC0DE;} .clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }.clearfix { 机灵的巨人: 1; } </style> </head> <body> <div class="head">head</div> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="clearfix"></div> </div> <div class="footer">footer</div> </body>至此效果图（注：左右位置不能换）右固定左自适应同理
两边固定中间自适应
<style> .head{background: #5BC0DE;} .content{padding: 0 100px;} .left{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-left: -100px;} .right{background: #EBCCD1;width: 100px;height: 200px;float: left;margin-right: -100px;} .center{background: #F7E1B5;width: 100%;height: 400px;float: left;} .footer{background: #5BC0DE;} .clearfix::after { content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; }.clearfix { 机灵的巨人: 1; } </style> </head> <body> <div class="head">head</div> <div class="content"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> <div class="clearfix"></div> </div> <div class="footer">footer</div> </body>下划线重点看
效果
二、常见的三栏布局
圣杯布局
解释：两边固定，中间自适应
代码：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> *{padding: 0px;margin: 0px;list-style: none;} body,html{width: 100%;height: 100%;} .container{padding: 0 200px;} .main,.left,.right{min-height: 150px;float: left;position: relative;} .main{background: #245269;width: 100%;} .left{background: #C0A16B;width: 200px;margin-left: -100%;left: -200px;} .right{background: #CE8483;width: 200px;margin-left: -200px;right: -200px;} </style> </head> <body> <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body></html>双飞翼布局
解释：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。
代码：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style> *{padding: 0px;margin: 0px;list-style: none;} body,html{width: 100%;height: 100%;} .main,.left,.right{min-height: 150px;float: left;} .main{background: pink;width: 100%;} .left{background: #C0A16B;width: 200px;margin-left: -100%;} .right{background: #CE8483;width: 200px;margin-left: -200px;} .content{margin: 0 200px;} </style> </head> <body> <div class="container"> <div class="main"><div class="content">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body></html>区别标注了。
效果一样
***************************************************************************************************