负边距&三栏布局-Assignment
2016-05-29 本文已影响70人
犯迷糊的小羊
问答题
1.负边距在让元素产生偏移时和position: relative有什么区别?
- 参考线或是参考点不同
- 边距规定元素的border到父元素/相邻元素边框的距离，所以负边距的偏移是以父元素/相邻元素的边框为参考线
- position:relative则是以元素所在位置的四个顶点为参考点进行偏移
- 影响相邻元素的效果不同
- 使用负边距偏移的元素，紧随其后的元素会追随其后
- 使用position:relative的元素，紧随其后的元素不会跟随
使用负边距
使用position:relative
2.使用负 margin 形成三栏布局有什么条件?
使用负margin实现三栏布局的条件：
- 两个侧边栏需要添加浮动属性
- 中间的main部分的宽度要自适应父元素宽度
- 父容器需要添加左右padding为sidebar预留空间
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 圣杯布局原理
圣杯布局是三栏布局之一，基本特性是左右侧边栏宽度固定，中间main宽度自适应，独特之处是父容器添加padding-left和right撑开其宽度而为2个侧边栏预留放置空间 - 实现步骤
- 准备好布局的元素-父容器ctn/主体main/左右sidebar
【注意】中间的main宽度自适应父容器宽度
准备布局素材
2.main/2个sidebar添加float:left，并在父容器内使用.ctn:after清除浮动
布局1——浮动
3. 3个sidebar使用负margin-left进行二次布局
布局2——负margin
4.父容器添加左右padding为sidebar预留空间
父容器使用padding预留空间
5.二个sidebar使用相对定位偏移至预留空间
sidebar使用相对定位偏移至预留空间
4.双飞翼布局的原理? 实现步骤?
- 双飞翼布局原理
双飞翼布局原理是在main外层添加wrap父容器，然后通过设置wrap的左右padding，从而达到布局效果 - 实现步骤
1~3和圣杯布局一样
4.main内部添加子元素wrap，设置高度为父容器的高度后，添加左右margin为sidebar的宽度，最后设置wrap的背景色和去除main的背景色
main添加子元素wrap设置主体区
