1. 负边距在让元素产生偏移时和position: relative有什么区别?
- 文档流中的位置是否保留
- 使用负边距偏移的元素，下一个元素会追随其后
- 使用position:relative的元素，下一个元素不会跟随
- 参考线或是参考点不同
- 边距规定元素的border到父元素/相邻元素边框的距离，所以负边距的偏移是以父元素/相邻元素的边框为参考线
- position:relative则是以元素原在位置的四个顶点为参考点进行偏移
2. 使用负 margin 形成三栏布局有什么条件?
使用负margin实现三栏布局的条件：
- 两个侧边栏需要添加浮动属性
- 中间的main部分的宽度要自适应父元素宽度
- 父容器需要添加左右padding为sidebar预留空间
3. 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局原理
圣杯布局是三栏布局之一，基本特性是左右侧边栏宽度固定，中间main宽度自适应，独特之处是父容器添加padding-left和right撑开其宽度而为2个侧边栏预留放置空间。一般中间主内容首先渲染有利于SEO
实现步骤
step1:写好三栏结构
Paste_Image.png
step2:设置好初始样式: (main元素也要浮动，否则不起作用！)
Paste_Image.png
step3: 设置外容器左右padding和边栏的负margin:
Paste_Image.png
tep4:设置相对位置 :
Paste_Image.png
step5:如果想改成两栏布局,只需删除多余的部分:
Paste_Image.png
4. 双飞翼布局的原理? 实现步骤?
原理:
双飞翼布局也是一个两边在父容器里固定宽度，中间自适应的布局.一般中间主内容首先渲染有利于SEO。
设置三个浮动div，左右两栏加上负margin 100%使其和中间栏顶端的边缘重合。中间栏用一个内置的div来放置内容，在这个子div里设置了margin来给两边的div留出了位置。
步骤:
step1:写好三栏结构,在主内容中增加一个内容区warp
0_1468275826270_upload-b5c5559a-16ae-418f-8abb-9ead344e1eff
step2:设置好初始样式:
0_1468276720403_upload-4bab0808-0923-4d6a-9df7-e4b7eea6bb88
step3:设置warp的margin留出边栏位置,设置边栏负margin:
0_1468277209341_upload-a2225d29-9df5-45a2-b524-02543ab10bec
step4:如果想改成两栏布局,只需删除多余的部分:
0_1468277759101_upload-3d450c6e-f261-45ef-8944-0f458d63d7a2
网友评论