CSS布局套路

CSS布局

布局套路

image.png

浮动布局

image.png

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

举例

推荐阅读更多精彩内容

  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...
    ooocoo阅读 390评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,590评论 1 82
  • 这篇笔记的目的是记录分别应用float和flex布局的方法。主要是对遇到的问题进行总结。 1.float布局 总结...
    qfstudy阅读 48评论 0 0
  • 如果一个元素既有left,又有right,它的left起作用,一般这种情况是你想后者CSS样式覆盖前者,但是没有效...
    海狗菌hisen阅读 71评论 0 1
  • 在学生时代,我读过一篇文章,上面描述了一个作家的日常,里面有一句话我记忆犹新:“读的书多了就忍不住要写……”...
    殇夜魅影阅读 74评论 0 0