问答:
1.负边距在让元素产生偏移时和position: relative有什么区别?
- 使用负边距进行偏移时文档流中位置已经改变 后面的元素会补位过来
Paste_Image.png
- 使用position: relative进行相对偏移的时候，文档流中位置不变，后面的元素位置不会改变。
Paste_Image.png
2.使用负 margin 形成三栏布局有什么条件?
- 三栏放在一个容器中，并且浮动
- 中间窗体设置100%宽度，左右两栏设置固定宽度
- 两栏设置负边距
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
1.HTML布局：三栏放在同一个container容器中，其中main（中间窗体）放在前面，aside（左边栏）extra（右边栏）放在后面
2.全部设置浮动（以左浮动为例子），其中中间部分宽度设置100%，左右两栏设置固定宽度
3.container容器设置左右padding 为左右边栏的宽度
4.aside（左边栏）设置 margin-left:-100%,extra（右边栏）设置margin-left：本身宽度乘以-1；
5.左边栏设置position:relative; left:左边栏宽度乘以-1
6.右边栏设置position:relative;left:右边栏宽度
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
.container{
height: 500px;
padding: 0 200px;
}
.container>div{
float:left;
height: 100%;
}
.container .main{
width: 100%;
background-color: #ccc;
}
.container .aside{
background-color: red;
width: 200px;
height: 300px;
margin-left: -100%;
position: relative;
left:-200px;
}
.container .extra{
background-color: blue;
width: 200px;
height: 300px;
margin-left: -200px;
position:relative;
left: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<p>
</p>
</div>
<div class="aside">
我是左边栏 我做了
margin-left: -100%;
position:relative;
left:-200px;
</div>
<div class="extra">
我是右边栏 我做了
margin-left: -200px;
position:relative;
left:100px;
</div>
</div>
</body>
</html>
效果
Paste_Image.png
4.双飞翼布局的原理? 实现步骤?
1.HTML布局：三栏放在同一个container容器中，其中main（中间窗体）放在前面，aside（左边栏）extra（右边栏）放在后面
2.全部设置浮动（以左浮动为例子），其中中间部分宽度设置100%，左右两栏设置固定宽度
4.aside（左边栏）设置 margin-left:-100%,extra（右边栏）设置margin-left：本身宽度乘以-1；
5.在main中加一个content content设置左右边距，margin-left:左边栏宽度 margin-right:右边栏宽度
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
.container{
height: 500px;
border: 1px solid;
}
.container>div{
float:left;
height: 100%;
}
.container .main{
width: 100%;
}
.container .aside{
background-color: red;
width: 200px;
margin-left: -100%;
}
.container .extra{
background-color: blue;
width: 200px;
margin-left: -200px;
}
.container .content{
height: 100%;
margin-left: 210px;
margin-right: 210px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">
我是content 我的父亲是main
main和aside、extra是兄弟
我比main小 我做了
margin-left: 210px;
margin-right: 210px;
</div>
</div>
<div class="aside">
我是左边栏 我做了
margin-left: -100%;
</div>
<div class="extra">
我是右边栏 我做了
margin-left: -200px;
</div>
</div>
</body>
</html>
效果
Paste_Image.png
本教程版权归本博主和饥人谷所有，转载须说明来源
