日夜谈——负边距、三栏布局

作者: Sheldon_Yee | 来源:发表于2016-10-31 21:57 被阅读41次

日夜谈——负边距、三栏布局
前端基础（问答9）
我的布局实例
CSS样式布局
圣杯布局和双飞翼布局
CSS布局奇淫巧计之-强大的负边距
css学习笔记
task12-负边距、三栏布局
负边距、三栏布局
负边距、三栏布局

task12.png

首先，无论是圣杯布局还是双飞翼布局，负边距都起着非常重要的作用，我写在这里是为了提醒自己。

1.负边距在让元素产生偏移时和position: relative有什么区别?

对相邻元素的影响
<li>负边距移动时，它自身整个文档位置也会跟着偏移，以至于后面的元素也会做出相应调整。
<li>使用position:relative进行偏移时，它还会占着原来的位置，后面元素的位置不会受影响。

定位方式
<li>首先边距的定位是从规定元素的border到父元素或者相邻元素的距离，所以负边距的偏移是以父元素/相邻元素的边框为参考线。
<li>position:relative则以自身原来位置做参考线。

2.使用负 margin 形成三栏布局有什么条件?

1.左侧边栏，中间内容区域，右侧边都要添加左浮动。
2.中间main自适应父元素宽度。
3.父元素添加padding为左右侧边栏预留空位。（圣杯布局）
4.在中间元素添加一个子元素，并且子元素左右设置边距。（双飞翼布局）

3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

原理：
圣杯布局其特性是，左右侧边宽度固定，中间main自适应父元素宽度，而父元素设置左右padding为左右侧边栏预留位置的一种布局。
实现步骤：
1：
html写出父元素container，子元素main，aside，extra。
css设置aside，extra固定宽度，main宽度自适应。

步骤1.png

2:
main，aside，extra设置左浮动，然后在父容器使用伪元素after清除浮动。

步骤2.png

3:
aside设置margin-left:-100%;，extra设置margin-left:-200px;父元素设置左右padding:200px;

步骤3.png

4
aside设置position:relative; right:200px
extra设置position:relative; left:200px

步骤4.png

4.双飞翼布局的原理? 实现步骤?

双飞翼布局原理
双飞翼布局原理是在main外层添加wrap父容器，然后通过设置wrap的左右margin，从而达到布局效果。

步骤：
1.设置container父容器，子元素main，aside，extra，然后在main再设置一个子元素warp。
2.同样main自适应父元素宽度，aside，extra有固定宽度，然后都左浮动。
3.使用伪元素after清除浮动，然后左侧栏负边距设置为-100%，右侧栏负边距为其宽度的相反数。
4.设置warp左右边距大于或者等于asider和extra即可。