常用布局方法
table
float+margin
inline-block
flexbox
table
非常方便的布局方案,属于传统布局方案,
display table table-row table-cell 跟表格布局相似
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="table"> <div class="table-row"> <div class="left table-cell">左</div> <div class="right table-cell">右</div> </div> </div> <style> .left{ background:red; } .right{ background:blue; } .table{ display: table; width:800px; height:100px; } .table-row{ display: table-row; } .table-cell{ vertical-align: center; display: table-cell; } </style>
盒子模型
content/width/height/padding/border/margin
display/position
display block/inline-block/inine
position static/relative/absolue/fixed
absolute/fixed 脱离文档流
区别
absolute是相对于上一个relative/absolute
fixed是相对于屏幕
z-index 层叠
flexbox
弹性盒子
盒子是并列的
可以指定宽度
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="container"> <div class="flex red">1</div> <div class="flex blue">2</div> <div class="flex red">3</div> </div> <style><!-- .red{ background:red;} .blue{ background:blue; } .container{ display:flex; height:100px; width:800px; } .flex{ flex:1 } </style>
flexbox在低版本浏览器不兼容 但是可以在移动端使用
foat
元素"浮动"
脱离文档流
但是不脱离文本流
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .container{ background:blue; width:300px; margin:20px; } .p1{ background:red; float:left; width:100px; height:50px; } </style> <div class="container"> <span class="p1">float </span> <div class="p2">学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float学习float</div> </div>
看出float脱离了文档流,但是不能脱离文本流。p1不占据空间,但时把文字排挤出去了
对自身的影响
形成“快” BFC
可以设置宽高
位置尽量靠上
位置尽量靠左(右)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> .container{ background:red; width:300px; } .p1{ background:blue; float:left; width:150px; height:50px; } </style> <div class="container container2"> <span>学习float</span> <span class="p1"> float </span> <span class="p1"> float </span> </div>
可以看出float位置尽量靠上、尽量靠左(右)我们可以设置宽度过大或者宽度过小会发生什么?
对兄弟元素的影响
上面可能贴非float元素
旁边贴float元素
不影响其他块级元素位置
但是不影响其他块级元素的文本流
对父级元素的影响
从布局上“消失”
高度塌陷
上一个代码案例可以看出父级元素高度是span的高度
解决
父级元素 overflow
::after{}伪元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.clear::after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
如何使用float实现两栏和三栏布局
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .container{ width: 400px; height:50px; } .left,.right{ height:100%; } .left{ width: 150px; background: red; float: left; } .right{ width: 250px; background: blue; float: right; } </style> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .container{ width: 400px; height:50px; } .left,.right,.middle{ height:100%; } .left{ width: 50px; background: red; float: left; } .middle{ width: 100px; background: green; margin-left: 50px; margin-right: 250px; } .right{ width: 250px; background: blue; float: right; } </style> <div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>
我们根据代码可以看出right掉下来了,也就是说浮动的元素尽量靠上靠右,但是right绕不开middle元素
因为float不影响其他元素的位置,此刻middle元素是块级元素
解决
设置middle为inline-block
还有middle和right位置对换可以解决
inline-block
像文本一样排block元素
没用清除浮动等问题
但是需要处理间隙
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> .container{ width: 400px; height:50px; } .left,.right{ height:100%; } .left{ width: 150px; background: red; display: inline-block; } .right{ width: 250px; background: blue; display: inline-block; } </style> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div>
我们看出left和right不在一起,我们修改right宽度设置为240px
我们发现left和right之间有空隙
造成这个间隙是left和right之间的空白
解决
left和right元素在html同一行
left和right之间的空白使用注释
container 设置font-size:0
响应式布局和设计
在不同设备上正常使用
主要处理屏幕大小问题
主要方法: 隐藏+折行+自适应空间
rem/viewport/media query