一、负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距在让元素产生偏移的时候其自身位置将会被其后元素所占据
-
position:relative在让元素产生偏移的时候会保留其自身位置
比如如下图所示
负边距和position:relative偏移时的不同
二、使用负 margin 形成三栏布局有什么条件?
- 使用负margin形成三栏布局条件如下：
- 三栏布局中的三个区块都要设置左浮动，并且在包容它们的父元素中清除浮动的影响
- 左右两个区块设置margin-left的值，其中左边区块设置为margin-left:-100%；右边区块设置为margin-left:-width，width是自身的宽度
- 左右两个区块宽度固定；中间区块宽度为自适应
- 父容器中设置padding，左右区块都设置通过position:relative来偏移
比如如下代码
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>练习</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
width: 500px;
height:500px;
padding: 0 150px;
margin: 0 auto;
border:1px solid black;
}
.center:after{
content: "";
display: block;
clear: both;
}
.center>div{
text-align: center;
}
.box1{
width: 500px;
height: 300px;
background-color: pink;
float: left;
}
.box2{
width: 150px;
height: 300px;
background-color: orange;
margin-left: -100%;
float: left;
position: relative;
left: -150px;
}
.box3{
width: 150px;
height: 300px;
background-color: olive;
float: left;
margin-left: -150px;
position: relative;
left: 150px;
}
</style>
</head>
<body>
<div class="center">
<div class="box1">主区块</div>
<div class="box2">左栏</div>
<div class="box3">右栏</div>
</div>
</body>
</html>
效果图如下所示
三栏布局
三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤？
- 圣杯布局的原理是通过利用float和负margin，将元素摆放至我们将其设定的位置
- 圣杯布局具体步骤如下：
- 写出页面布局的html，如下
<div class="center">
<div class="main">主区块</div>
<div class="left_aside">左栏</div>
<div class="right_aside">右栏</div>
</div>
- 设置各栏的宽度，如下
.center{
width: 80%;
margin: 0 auto;
border: 1px solid black;
}
.main{
width: 100%;
height: 300px;
background-color: pink;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
}
- 通过设置三栏的float和左右两栏的负margin，使左右两栏上到.main上，并在父元素中清除浮动，如下
.center{
width: 80%;
margin: 0 auto;
border: 1px solid black;
}
.center::after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 300px;
background-color: pink;
float: left;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
float: left;
margin-left: -100%;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
float: left;
margin-left: -200px;
}
- 在父容器中设置左右的padding，其值为左右两栏的宽度；对左右两栏设置相对定位，左右偏移值为其自身宽度，如下
.center{
width: 80%;
margin: 0 auto;
padding: 0 100px;
border: 1px solid black;
}
.center::after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.left_aside{
width: 100px;
height: 100px;
background-color: orange;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right_aside{
width: 100px;
height: 100px;
background-color: olive;
float: left;
margin-left: -100px;
position: relative;
left: 100px;
}
最终呈现的效果图如下图
圣杯布局效果图
四、双飞翼布局的原理? 实现步骤?
- 双飞翼布局没有圣杯布局中设置父容器的padding和通过相对定位来实现左右两栏的偏移，其在中间主区块下设置了新的子元素，通过子元素的左右margin达到布局的目的
- 双飞翼布局的具体步骤如下：
- 写出页面布局的html，如下
div class="center">
<div class="main">
<div class="wrap"></div>
</div>
<div class="aside1"></div>
<div class="aside2"></div>
</div>
- 设置三栏的css样式，通过float和负margin值使左右两栏上到.main上，并在父元素中清除浮动，如下
.center{
margin: 0 auto;
border:1px solid black;
}
.center:after{
content: "";
display: block;
clear: both;
}
.main{
width: 100%;
height: 300px;
float: left;
}
.aside1{
width: 150px;
height: 300px;
background-color: orange;
margin-left: -100%;
float: left;
}
.aside2{
width: 150px;
height: 300px;
background-color: olive;
float: left;
margin-left: -150px;
}
- 在.main的子元素上设置左右外边距即可，如下
.main .wrap{
height: 300px;
margin-left: 170px;
margin-right: 170px;
background-color: purple;
}
最终效果图如下
双飞翼布局效果图
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
网友评论