- 负边距在让元素产生偏移时和
position: relative
有什么区别?-
负边距让元素产生偏移会影响后面的元素,因为它不占有原来的位置
-
.div:nth-child(2) {
margin-top: -30px;
margin-left: -20px;
}
很明显看出当第二个div移动的时候,后面的元素跟随着一起移动,说明它不占有原来的位置
-
position: relative;
还占有原来的位置,相对原来的位置定位
.div:nth-child(2) {
position: relative:
top: 30px;
left: 50px;
}
- 使用负 margin 形成三栏布局有什么条件?
假设三栏布局中的中间一栏为main,左边栏为left,右边栏为right- 在html结构中,必须main在前面
<div class="contain"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
- 三栏布局中的三个块必须先浮动,因为div的默认是垂直一个接一个放置的,必须让left和right跟随在main的后面
- 中间块必须
width: 100%;
因为:- float之后div的宽度是内容宽度
- 因为三栏布局中的中间一栏需要自适应
- 必须把left和right顶到下一行
- left的
margin-left: -100%;
,right的margin-left的值为本身宽度的负数
- 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局的目的是使中间栏的内容得以先渲染,原理是利用浮动加负margin来实现三栏布局,然后在#contain上加padding,再把两个边栏用相对定位移到正确的位置- 先写好html的结构,注意中间栏要在两个边栏的前面
<div id="header"></div> <div id="contain"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div> <div id="footer"></div>
- 设置main的宽度100%,三个div左浮动
#contain>div { height: 300px; float: left; } .main { width: 100%; background-color: #e65454; } .sub,.extra { width: 200px; }
3. 把两个边栏移动到正确的位置
```
.sub {
background-color: #03A9F4;
margin-left: -100%;
}
.extra {
background-color: #4CAF50;
margin-left: -200px;
}
```
4. 让内容能正确显示不被两个边栏覆盖
```
#contain {
overflow: hidden;
padding: 0 200px;
}
.sub {
background-color: #03A9F4;
margin-left: -100%;
position: relative;
left: -200px;
}
.extra {
background-color: #4CAF50;
margin-left: -200px;
position: relative;
left: 200px;
}
```
- 双飞翼布局的原理? 实现步骤?
双飞翼布局的目的是使中间栏的内容得以先渲染,原理是利用浮动加负margin来实现三栏布局,相比圣杯布局,双飞翼布局的区别在于最后正确显示内容的方式- 写html结构,注意双飞翼布局在main下还有一个显示内容的div
<div id="header"></div> <div id="contain"> <div class="main"> <div class="content"></div> </div> <div class="sub"></div> <div class="extra"></div> </div> <div id="footer"></div>
-
和圣杯布局一样利用浮动+负外边距得到三栏布局
- 让内容能正确显示不被两个边栏覆盖,这里是圣杯布局和双飞翼布局的区别,双飞翼布局不适用main来显示内容,而是在main下新建一个div,设置属性margin-left和margin-right来达到正确显示内容的目的
.content { margin-left: 200px; margin-right: 200px; }