您的位置:首页 > Web前端 > CSS

css布局

2015-07-25 22:35 447 查看
  科技在高速的发展,技术日新月异,不断的进步促使科学技术的发展,各项技术也在不同领域发展的很快,在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的宽度进行微调
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: