科技在高速的发展,技术日新月异,不断的进步促使科学技术的发展,各项技术也在不同领域发展的很快,在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的宽度进行微调
时间: 2024-10-06 16:49:39