定位
两大元素
块级元素：div h1~h6 ul li ol table p 等等
内联元素：a span img input等等
<style>
*{
padding: 0;
margin: o;
}
.test{
width:100px;
height: 100px;
background:red ;
margin-right: 10px;
}
</style>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<span class="test"></span>
<span class="test"></span>
<span class="test"></span>
按标准流排序的话，div按一行一行排列，而span排在一行，排不满才换下一行
定位属性position
position属性决定了元素将如何定位
通过top，right、bottom，left实现位置
static 默认排列
relative 相对
可以通过left，top，right，bottom来改变位置
.test{
width:100px;
height: 100px;
background:red ;
position:relative;
left:0;
top:100px;
相当于增加离左边和上边的距离
}
但如果是right和bottom则相反：
absolute 绝对
脱离了文档流，是绝对的位置定位，left和top方向大小都类似。相对于整个文档
一般用父级relative，子级用absolute
fixed
脱离正常文档流，固定元素
inherit
继承
.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
left: 200px;
top: 200px;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
left: 100px;
top: 100px;
}
子元素继承父元素的fixed，进行固定定位
所有带有定位属性的元素都是有层级的
z-index可以改变定位元素的层级，默认是为0的
.per{
width: 300px;
height: 300px;
background:red;
position:fixed;
z-index:-1;
}
.son{
width:100px;
height:100px;
background: blue;
position: inherit;
z-index:1;
}
盒子模型和定位的区别：
盒子模型是通过改变margin和padding来实现元素的移动。
定位是通过元素的位置来移动
.login{
width: 360px;
height: 360px;
background: url("login.png"）no-repeat;
position:fixed;
/*实现水平居中*/
left: 50%;
top:50%;
margin-left:-180px; 宽度的一半
margin-top: -180px; 高度的一半
}
实现网页小案例网页跟随
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
*{
padding: 0;
margin: 0;
}
.page{
width: 100%;
height: 4043px;
background: url("mooc.png") center top no-repeat;
}
.nav{
width: 160px;
height: 205px;
position: fixed;
left: 0;
top: 50%;
margin-top: -103px;
font-family: 'Miscrosoft YaHei';
}
.nav-li{
width: 160px;
height: auto;
border-bottom: 1px solid #FFF;
background: #333;
text-align: center;
line-height: 40px;
color: #FFF;
font-size: 16px;
cursor: pointer;
}
.tit{
width: 160px;
height: 40px;
}
.nav-li:hover ul{
display: block;
}
.nav-li ul{
width: 160px;
height: auto;
background: #FFF;
display: none;
}
.nav-li ul li{
width: 160px;
height: 40px;
border-bottom: 1px dashed #666;
color: #333;
text-align: center;
line-height: 40px;
position: relative;
}
.nav-li ul li:hover .list-3{
display: block;
}
.list-3{
width: 160px;
height: auto;
position: absolute;
left: 160px;
top: 0px;
display: none;
}
.list-3Dom{
width: 160px;
height: 40px;
background: #444;
border-bottom: 1px solid #FFF;
text-align: center;
line-height: 40px;
color: #FFF;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<div class="tit">yh网的标题</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">yg网的标题</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">yg的标题</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">33网的标题</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">6756的标题</div>
<ul>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
<div class="list-3Dom">三级栏目</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
NEXT:
页面布局：
多行布局，多列布局，圣杯布局，双飞翼布局。
