div+css的自动居中一列布局
1.三个技能:
- 标准文档流
- 块级元素
- margin属性
2.一个注意：
如果父层要设置margin的auto，那么就不能设置float和绝对定位。
3.一个简单的一列式布局样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding:0px;
}
p{
text-align: center;
padding-top: 40px;
}
.whole{
100%;
height: 700px;
background-color: gray;
}
.top{
100%;
height: 100px;
background-color: black;
color: white;
}
.body{
80%;
height: 500px;
background-color: white;
color: white;
margin: 0px auto;
}
.foot{
80%;
height: 100px;
background-color: blue;
color: white;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="whole">
<div class="top">
<p>这是头部</p>
</div>
<div class="body">
<p>这是身体</p>
</div>
<div class="foot">
<p>这是底部</p>
</div>
</div>
</body>
</html>
2.横向两列布局
1.一个技能：
float属性可以使块级元素横向排列。
2.一些注意点：
- 如果设置了浮动，但是么有设置宽度值，那么元素会随内容的变化而变化。
- 受到影响的元素是紧邻之后的元素。
3.清除浮动的两种方法：
- clear：both（clear：left ）：清除紧邻之后的元素
- width：100%+overflower：hidden
4.基础的横向布局代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding:0px;
}
p{
text-align: center;
padding-top: 40px;
}
.whole{
100%;
height: 700px;
background-color: gray;
}
.top{
100%;
height: 100px;
background-color: black;
color: white;
}
.body{
80%;
height: 500px;
background-color: white;
color: white;
margin: 0px auto;
overflow: hidden;
}
.body_top{
80%;
height: 250px;
background-color: pink;
float: left;
}
.body_right{
20%;
height: 500px;
background-color: orange;
float: right;
}
.body_buttom{
80%;
height: 250px;
background-color: yellow;
float: left;
}
.foot{
80%;
height: 100px;
background-color: blue;
color: white;
margin: 0px auto;
}
}
</style>
</head>
<body>
<div class="whole">
<div class="top">
<p>这是头部</p>
</div>
<div class="body">
<!-- 排列的顺序非常重要，如果挑换top，right和buttom的顺序，将会得到不一样的结果，这是由渲染的顺序决定的 -->
<div class="body_top">
</div>
<div class="body_right">
</div>
<div class="body_buttom">
</div>
</div>
<div class="foot">
<p>这是底部</p>
</div>
</div>
</body>
</html>
3.绝对布局定位
1.3种定位形式：
相对定位，绝对定位 ，静态定位（static fixed absolute raletive） //absolute和fixed都是绝对定位
2.对三种的形式的讨论
relative：它的偏移是相对于原点的。会产生空间的层堆叠。
绝对定位：脱离绝对文档流。宽度随内容变化。会参照祖先来定位。
3.简单的定位的演示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.whole{
100%;
height: 1000px;
background-color: gray;
}
.outer{
background-color: red;
50%;
height: 500px;
position:relative;
top: 100px;
left: 100px;
}
.inner{
background-color: pink;
50%;
height: 250px;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="whole">
<div class="outer">
<div class="inner">
</div>
</div>
</div>
</body>
</html>