1、负边距在让元素产生偏移时和position: relative有什么区别?
1.负边距会改变元素在文档流中的位置，而且相邻的元素位置也会被改变。
2.position:relative相对定位，会使自身元素发生偏移，但是之前占用的文档流位置继续保留，相邻元素的位置不受影响。
2、使用负 margin 形成三栏布局有什么条件?
子容器都要设置浮动；
位于左边栏的盒模型设置margin值为负的父容器宽度，然后在相对位移一个左边栏的宽度；
位于右边栏的盒模型设置margin值为负的子盒模型的宽度，然后在相对位移一个右边栏的宽度；
中间区域需要设定宽度为100%与父容器宽度保持一致；
父容器需要清除浮动，并设置一个相当于边栏宽度的padding值；
3、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
1.原理:圣杯布局是指左右两边侧边栏宽度固定，中间主内容区块宽度自适应的布局方式。左右侧边栏区块和中间主内容区块均设置浮动，然后中间主内容区块设置padding，使两边留出空白。左侧边栏区块设置margin-left:-100%，右侧边栏区块设置margin-left值为区块本身的宽度再配合相对定位（position:relative）即可。
第1步：先写出圣杯布局的DOM结构（三个块级元素包裹在父容器中，两边的侧边栏宽度固定，中间的主内容区块宽度自适应）。
第2步：父容器中的三个块级元素设置浮动,并设置父容器清理浮动。
第3步：设置第二个子元素margin-left:-100%，第三个子元素margin-left:-100px，侧边栏的两个子元素会往上覆盖中间主区块元素。
第4步：设置父容器的padding:0 100px，再分别设置左侧边栏相对定位position:relative;left:-100px;右侧边栏相对定位position:relative;left:100px。这样圣杯布局就完成了。
QQ截图20160828234032.jpg
4双飞翼布局的原理? 实现步骤?、
原理:双飞翼布局与圣杯布局的不同点在于，它不是用主区块中设置padding来形成三栏的方式，而是在主区块中设置一个子元素，再对这个子元素设置外边距的值来形成三栏。
QQ截图20160829080629.jpg
网友评论