- 负边距在让元素产生偏移时和position: relative有什么区别?
-
position:relative,元素偏移后脱离的文档流，但元素原来的位置仍然占据文档流中，不会影响之前的文档流，其之后的元素仍然会认为定位元素在文档流中而跟随在后面。
position:relative -
负margin：元素偏移后并没有脱离文档流，位置变化影响了文档流，之后的元素按文档流的排列特征也会跟着偏移
负margin - 使用负 margin 形成三栏布局有什么条件?
1 必须设置浮动
2 父容器下有三个块级元素
3 中间的子元素宽度设置为父容器宽度的100%
4 左右两栏的子元素设置负边距 - 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
-
圣杯布局是一个两边在父容器里顶宽，中间自适应的布局并且中间主内容首先渲染。设置三个div浮动，左右两栏加上负margin使其与中间栏并排。然后中间栏设置左右padding，再对两个边栏使用position: relative属性并设置left定位使其不遮挡中间栏。
1 写好一个三栏HTML结构
圣杯布局HTML结构
2 使用浮动与负margin写好一个三栏并排的布局
三栏并排
3 给父容器设置左右padding，然后给两个边栏设置position: relative; 并设置left值定位到父容器的两边顶宽。
圣杯布局
4 设置圣杯布局的两栏布局只需要删除父容器的右内边距
删除父容器右内边距形成圣杯两栏布局
- 双飞翼布局的原理? 实现步骤?
-
双飞翼布局也是一个两边在父容器里顶宽，中间自适应的布局并且中间主内容首先渲染。设置三个div浮动，左右两栏加上负margin使其与中间栏并排的布局。区别在于双飞翼布局中间的div设置了子div来放置内容，在这个子div里设置了margin来给两边的div留出了位置。
1 写好一个三栏HTML结构，与圣杯不同的是在主内容里增加一个子div
双飞翼HTML结构
2 使用浮动与负margin写好一个三栏并排的布局
双飞翼三栏并排
3 给中间栏设置左右margin值形成双飞翼布局
给中间栏设置左右margin值形成双飞翼布局
4 双飞翼布局形成两栏布局只需要删除一边侧栏并且删除主内容的一边外边距
删除一栏和一侧外边距
代码
1 用浮动、负边距实现如下效果 参考
2 使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
3 使用圣杯布局的思路实现如下两栏布局
4 使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
5 使用双飞翼布局的思路实现如下两栏布局
本博客版权归 本人和饥人谷所有，转载需说明来源
