2018-04-02 布局套路

image.png

原则
不到万不得已，不要写死 width 和 height
尽量用高级语法，如 calc、flex
如果是 IE，就全部写死

1、浮动布局

image.png

image.png

行高和高度一样——常用单行文字居中方法

.clearfix:after{
content: '';
display: block;
clear: both;
} /IE8支持/
.clearfix{
zoom: 1;
} /让IE6支持的/

用float做平均布局，

方法一：

image.png

这种IE不兼容

方法二：用负margin（IE兼容）

image.png

平均布局还可以用flex
flex
老子加 display: flex
老子加 justify-content: space-between;
如果宽度不够，可以用 margin: 0 -4px;

image.png

image.png

image.png

或

image.png

image.png

手机端布局
1、加meta:vp
2、加查询

image.png

image.png

问题：在手机端的时候，宽度变小了，但是高度没变，图片会变形
不用img标签就不会变形

image.png

如果一定要图片1:1显示，搜“固定比例的div”

市面上的网页布局
看下淘宝的页面