CSS布局

布局套路

image.png

浮動(dòng)布局

image.png

• 寬度百分比浮動(dòng)布局
  http://js.jirengu.com/yobiq/1/edit?html,css,output
• 帶logo的導(dǎo)航欄
  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
圖片平均布局 用 負(fù)margin ,由于父親元素，定位，所以不能動(dòng)用父親元素，而是在父親元素加一個(gè)div包裹兒子元素,來(lái)擴(kuò)大額外的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

廣告布局，父親定寬，兒子百分比，廣告一和廣告二的間隔如何來(lái)寫(xiě)？

image.png

1.兒子使用calc
2.不改變?cè)瓉?lái)的布局，在兒子里面加一個(gè)div,通過(guò)margin-right來(lái)增加間隔
3.使用felx ,justify-content:space-between
http://js.jirengu.com/qaxan/1/edit?html,css,output

手機(jī)布局

http://js.jirengu.com/qaxan/1/edit?html,css,js,output
問(wèn)題:banner圖片可能會(huì)變形，怎么辦？
不要用img標(biāo)簽
url的形式
問(wèn)題：如果我就想要圖片是1:1或者1:2形式顯示，
搜索：固定比例div

看看市面上的網(wǎng)頁(yè)

原則

不到萬(wàn)不得已，不要寫(xiě)死 width 和 height
盡量用高級(jí)語(yǔ)法，如 calc、flex
如果是 IE，就全部寫(xiě)死

口訣

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

舉例