CSS布局

布局套路

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

用 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;
}

举例