我的前端学习笔记12——负边距与三栏布局

“就赌我会死，反正你逢赌必输嘛 哈哈”

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

• 负边距：边距是元素本身的一部分，不是移动。并且负边距会影响文档流的整体变化，其后的元素会跟着一起移动。
• position:relative是不脱离文档流的情况下（元素原有空间不会被挤占），让元素针对自身位置进行移动。

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

• 元素在同一个父容器内并且同方向浮动；
• 左侧边栏margin为-100%，右侧边栏margin为-自身宽度，中间部分宽度为父元素宽度；
• 父容器清除浮动后左右内边距设为对应的左右侧边栏宽度，左右侧边栏相对定位（圣杯布局），或者把中间栏子容器的左右外边距设为对应的左右侧边栏宽度（双飞翼布局）。

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

• 原理：利用负margin使浮动元素分别居中间栏两侧，通过相对定位实现圣杯布局。
• 实现步骤如下图：

圣杯布局 html

圣杯布局 css

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

• 原理：在圣杯布局基础上，不采用设置左右padding的方法，在中间栏建一个子容器，给子容器设置宽度，左右外边距。
• 实现步骤如下图：

双飞翼 html

双飞翼 css

这一别，成永别