饥人谷-任务十二

一、负边距在让元素产生偏移时和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

本博客版权归本人和饥人谷所有，转载需说明来源