1.负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距在让元素产生偏移时，相邻元素的位置也会跟着它移动。
- 而position: relative让元素产生偏移时，只是改变自身的位置，它在文档流中原本占用的空间不会改变，不会影响其他元素。
2.使用负 margin 形成三栏布局有什么条件?
- 1.父容器需要设置内边距padding;父容器要清除浮动;
- 2.父容器下的所有子元素都需要设置左浮动;
- 3.主要区块应写在最前面，保证优先被渲染,宽度要设为100%;
- 4.左侧栏的margin-left应设置为-100%,右侧栏margin-left设置为-100px。
- 5.用position:relative给左右侧边栏调整位置;左侧栏的left应设置为-100px,右侧栏left设置为100px;
如下图所示:
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤?
- 圣杯布局主要是运用了负边距，浮动和相对定位去完成一个三栏布局。
- 实现圣杯布局的步骤:
-
1.先设置好三栏，主内容放在最上面两侧边栏放在下面，使他们三栏进行左浮动，父元素清除浮动。主内容的宽度设置为100%;两个侧边栏的宽度比如设置为100px;如下图所示:
-
2.设置两个侧边栏的负边距,左侧边栏为margin-left:-100%，右侧边栏为margin-left:-100px;如下图所示:
- 3.由于两个侧边栏遮挡住了主内容，我们需要露出主题内容，我们可以设置父元素
<div class="content">的左右padding。如下图所示:
-
4.最后使用position：relative把侧边栏从主内容栏移出即可。如下图所示:
-
4.双飞翼布局的原理? 实现步骤?
- 双飞翼布局是在主内容块中设置一个子元素，再对这个子元素设置外边距的值来形成三栏。
-
实现步骤如下图所示:
