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”
市面上的网页布局
看下淘宝的页面
网友评论