常用布局方法
table
float+margin
inline-block
flexbox
table
非常方便的布局方案，属于传统布局方案，
display table table-row table-cell 跟表格布局相似
<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现代布局
弹性盒子
盒子是并列的
可以指定宽度
<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
元素"浮动"
脱离文档流
但是不脱离文本流
<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>
原文：https://www.cnblogs.com/sonwrain/p/10497747.html
