布局套路
image.png
浮动布局
image.png
- 宽度百分比浮动布局
http://js.jirengu.com/yobiq/1/edit?html,css,output - 带logo的导航栏
http://js.jirengu.com/qaxan/1/edit?html,css,output
flex布局
image.png
http://js.jirengu.com/gobeg/1/edit?html,css,output
用 float 做平均布局
图片平均布局 用nth-child
http://js.jirengu.com/zicib/1/edit?html,css,output
图片平均布局 用 负margin ,由于父亲元素，定位，所以不能动用父亲元素，而是在父亲元素加一个div包裹儿子元素,来扩大额外的8像素
<div class="banner"></div>
<div class="pictures clearfix">
<div class="xxx clearfix">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
</div>
http://js.jirengu.com/bepol/1/edit?css,output
使用 calc
http://js.jirengu.com/picec/1/edit?html,css,output
广告布局，父亲定宽，儿子百分比，广告一和广告二的间隔如何来写？
image.png
1.儿子使用calc
2.不改变原来的布局，在儿子里面加一个div,通过margin-right来增加间隔
3.使用felx ,justify-content:space-between
http://js.jirengu.com/qaxan/1/edit?html,css,output
手机布局
http://js.jirengu.com/qaxan/1/edit?html,css,js,output
问题:banner图片可能会变形，怎么办？
不要用img标签
url的形式
问题：如果我就想要图片是1:1或者1:2形式显示，
搜索：固定比例div
看看市面上的网页
原则
不到万不得已，不要写死 width 和 height
尽量用高级语法，如 calc、flex
如果是 IE，就全部写死
口诀
float
儿子全加 float: left （right）
老子加 .clearfix
flex
老子加 display: flex
老子加 justify-content: space-between;
如果宽度不够，可以用 margin: 0 -4px;
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
举例
