- 负边距在让元素产生偏移时和position: relative有什么区别?
负边距让元素产生偏移会影响普通流；position: relative;让元素产生偏移后会保留元素偏移前的空间，不会对结构下面的元素产生影响。
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid;
margin: 30px auto;
}
.one{
width: 50px;
height: 50px;
background-color: #f00;
position: relative;
}
.two{
width: 50px;
height: 50px;
background-color: #f00;
}
.con{
width: 50px;
height: 50px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="fa">
<div class="box">
<div class="one"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="two"></div>
<div class="con"></div>
</div>
</body>```
偏移代码
.one{top: -20px;}
.two{margin-top: -20px; }```
偏移后
- 使用负 margin 形成三栏布局有什么条件?
- 两侧定宽，中间自适应；
- 三个块元素在同一个容器内且子元素都需要浮动；
- 设置负边距后下面的元素可以上去。
- 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局和双飞翼布局的区别在于解决被覆盖区域的方式不同。圣杯布局是两侧栏在父元素的帮助下改变被覆盖者，“你的地盘太多了，我要收回一部分（padding），然后悄悄地给了另外一个或两个孩子”；双飞翼布局是被覆盖者主动求变，“看在兄弟的情分上，我让你们留下，并且会给你们封地（margin），但是，普天之下莫非王土，地契是我的”。- 原理：负边距+定位。margin-left为负值，且两个元素不在一行的时候（可以用元素
float:left,width:100%实现）margin-left可以吃掉兄弟元素的margin。position: relative可以让元素相对自身进行偏移。 - 步骤：
- 给父元素设置
padding-left、padding-right分别等于左右栏对应宽度，中间栏自适应； - 利用负边距
margin-left: -100%以及margin-left: -侧边栏宽度，让下面元素上去； - 两侧栏设置
position: relative调整左右距离实现两栏或三栏布局。
- 给父元素设置
- 原理：负边距+定位。margin-left为负值，且两个元素不在一行的时候（可以用元素
- 双飞翼布局的原理? 实现步骤?
- 原理：负边距+被覆盖内容添加子div，并设置左右margin值。
- 步骤：使用负margin使下面的div浮动上来，再给被覆盖内容的栏的内部使用一个div，给这个div设置
margin-left或margin-right为左栏或右栏的宽度，实现两栏或三栏布局。
