首页 > Web开发 > 详细

学习css布局

时间:2015-07-25 22:43:53      阅读:311      评论:0      收藏:0      [点我收藏+]

  科技在高速的发展,技术日新月异,不断的进步促使科学技术的发展,各项技术也在不同领域发展的很快,在web前端也在不断出现新的布局方法,这里就简单介绍圣杯布局法和负边距布局法;

  各种布局的技术实现,被经常使用的三种技术:
  1.浮动 float
  2.负边距 negative margin
  3.相对定位 relative position
  利用浮动元素的负边距来定位
  利用相对定位调整位置

  布局是页面重构中最重要的东西,骨架有了,其他都好办……

  1、负边距布局法:

    1. 两栏式布局法(两边栏不动,中间动效果)
       2. 三栏式布局法;

    3.都是通过magin来实现

   2、圣杯布局法 
        1. 中间三栏布局div排列顺序是中→左→右;
        2. 首先要三栏设置padding,作用是将左右的位置腾出来
        3. 其中两边距离是等于需要插入的div的宽度,
        4. 左边的就用负边距margin-left:-100%;并且right=边距
        5. 右边就用margin-right:-边距;
        5. 需要在三栏设置相对定位;并且全部浮动,并且padding-bottom-/+10000px;overflow:hidden;
        6. 为防止浏览器放大缩小对边框影响;设置缩小最小宽度:在全局中设置min-width最小值 ;并且最小值需要根据left和right的宽度进行微调

 

学习css布局

原文:http://www.cnblogs.com/gong-ping/p/4676728.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!