一、负边距在让元素产生偏移时和position: relative有什么区别?
- 设置-margin的元素，不会占用文档流空间，即在它后面的元素会上去；
- 设置position: relative的元素，其自身原来位置仍然占用空间，身后的元素原位不动，不会改变；
负margin和position:relative的区别
二、使用负 margin 形成三栏布局有什么条件?
- 页面结构上主板块放在首位，width设置为100%；两个侧边栏放后面，分别设置width三栏都要进行float设置；然后设置两个侧边栏的负margin，第一个设置margin-left:-100%，第二个设置margin-left: "自身的宽度"；
三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- main板块设置
width:100%; - 两个侧边栏都要设置想要的宽度
- 三个板块都要进行float设置
- 此时main板块占满一整行，我们要把左右边栏拉到main的左右两侧，利用margin:-100%和margin:自身width；拉至main的两侧紧贴main的内border
- 此时main两侧内容被侧边栏覆盖，要把main拉出来，给最外层content添加左右padding值要>=侧边栏的width（不能加在main身上由于它自身width:100%;设置padding那两边都被挤出去了）
- 设置好padding后，就要把两边侧边栏利用相对定位将其拉至两边padding造成的空挡
圣杯布局.png
四、双飞翼布局的原理? 实现步骤?
- main板块设置
width:100%; - 两个侧边栏都要设置想要的宽度
- 三个板块都要进行float设置
- 此时main板块占满一整行，我们要把左右边栏拉到main的左右两侧，利用负margin
- 此时main两侧内容被侧边栏覆盖，要把main拉出来，这里用的方法是给main里加一个wrap容器来包裹具体要写的内容，这时就可以把main的颜色去掉，并且给wrap设置左右margin
双飞翼布局.png
本博客版权归本人和饥人谷所有，转载需说明来源
