第一章 课程介绍
- 学习css中的定位模型
- 使用定位模型来达到布局目的
第二章 position属性详解
staic 自然模型
首先理解什么是自然流/常规流？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: static;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<p>
<span>aaaa</span><a href="">mooc</a>
</p>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
这四个块就是以自然流的方式排版的，有行内元素,span和a就是以从左到右依次排列
(1)忽略掉偏移量（忽略掉top bottom left right 或z-index声明），让它置于自然流当中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: relative;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(2){
position: static;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
(2) 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: relative;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(1){
position: static;
margin: 10px;
border-color:green;
}
.block:nth-child(2){
position: static;
margin: 10px;
border-color:red;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
(3)具有固定width和height值的元素，如果把左右外边距都设置为auto，则左右外边距会自动扩大占剩余宽度。造成的效果就是这个块水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block {
position: relative;
top:10px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(1){
position: static;
margin: 10px;
border-color:green;
margin-left: auto;
margin-right: auto;
}
.block:nth-child(2){
position: static;
margin: 10px;
border-color:red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="block">
A
</div>
<div class="block">
B
</div>
<div class="block">
C
</div>
<div class="block">
D
</div>
</body>
</html>
relative 相对定位模型
作用:使元素成为containing-block（可定位的祖先元素）
其实就是说它的子元素可以以它为定位，别人用来定位的一个参照物，以他作为参照物。
(1)可以使用top/right/bottom/left/z-index进行相对定位------？相对的是谁？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position-relative</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid black;
text-align: center;
}
.block:nth-child(2){
position: relative;
top: 10px;
border-color: red;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>
相比于自己在原来常规流中位置向下了10个元素
（2）相对定位的元素不会离开常规流
（3）任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位——超好用
（4）可以使浮动元素发生偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position-relative</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid black;
text-align: center;
float: left;
}
.block:nth-child(2){
position: relative;
top: 10px;
left: 10px;
border-color: red;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
</body>
</html>
并控制他们的堆叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position-relative</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
.block{
position: relative;
top: 0;
left: 0;
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid black;
text-align: center;
float: left;
}
.block:nth-child(2){
position: relative;
top: 0px;
left: -80px;
border-color: red;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
</body>
</html>
absolute 绝对定位模型
（1）脱离常规流?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 2px solid black;
}
.block:nth-child(2){
position: absolute;
top:20px;
left: 20px;
border-color: red;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>
B跑出去了，A和C还是保持一个自然常规流
【注】在这里，absolute和relative有什么区别呢?
relative还给B保留了一地空间。aobulute中的B彻底出来。
（2）设置尺寸要注意：百分比比的是谁？—— 最近定位祖先元素
这里注意 (5)如果没有最近定位祖先元素，即认body为祖先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 2px solid black;
}
.block:nth-child(2){
position: absolute;
top:20px;
left: 20px;
width: 50%;
border-color: red;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>
想让红色块根据蓝色块定位
设置position: relative;这样蓝色块就是一个可以定位的元素了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: blue;
}
.child{
position: absolute;
width: 80px;
height: 80px;
background: red;
right: 0;
top:0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
.child{
position: absolute;
width: 80px;
height: 80px;
background: red;
right: -80px;
top:0;
}
后
广告中特别好用哈哈
（3）lrtb如果设置为0.它将对其到最近定位祖先元素的各边——可以用来居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: blue;
}
.child{
position: absolute;
/* width: 80px;
height: 80px;*/
background: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
再来看他的一个变种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: blue;
}
.child{
position: absolute;
width: 80px;
height: 80px;
background: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
(4)lrtb如果设置为auto，它将被打回原形，恢复到常规流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: blue;
}
.child{
position: absolute;
width: 80px;
height: 80px;
background: red;
top: auto;
bottom: auto;
left: auto;
right: auto;
margin:auto auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
（6）z-index可以控制堆叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-absolute</title>
<link rel="stylesheet" href="./reset.css">
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 2px solid black;
}
.block:nth-child(1){
position: absolute;
top:20px;
left: 20px;
border-color: blue;
z-index: 999999;
}
.block:nth-child(2){
position: absolute;
top:20px;
left: 20px;
border-color: red;
z-index: 1;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>
fixed 固定定位模型
首先看一下他和绝对定位的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position-fixed & absolute</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<style>
body{
height: 800px;
background-color: lightgray;
}
.block{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
border: 2px solid black;
}
.block:nth-child(1){
position: absolute;
top:10px;
left:20px;
}
.block:nth-child(2){
position: fixed;
top:10px;
left:20px;
}
</style>
</head>
<body>
<div class="block">绝对定位</div>
<div class="block">固定定位</div>
</body>
</html>
固定定位相对于视口，绝对定位定位于祖先元素。
随着窗口的移动，固定定位始终在视图中。
可以利用fixed做页面的悬停广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-fixed</title>
<link rel="stylesheet" href="./reset.css">
<style>
.ad-right-float {
position: fixed;
bottom: 50px;
right: 0;
width: 80px;
height: 80px;
background: gray;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad-right-float">
悬停广告
</div>
</body>
</html>
sticky 磁贴定位模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position-sticky</title>
<link rel="stylesheet" href="./reset.css">
<style>
body {
height: 800px;
overflow: auto;
}
.logo {
width: 100%;
height: 50px;
background: gray;
}
.nav {
position: sticky;
top:0px;
width: 100%;
height: 50px;
background: blue;
color:#ffffff;
cursor: pointer;
}
.con{
height: 500px;
}
</style>
</head>
<body>
<div class="con">
<div class="logo">
想象我是网站头图
</div>
<div class="nav">
想象这里是一堆的 banner 导航按钮 | 编辑 | 发布
</div>
</div>
<div>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
</div>
</body>
</html>
第三章 课程总结
第四章 实际应用
4-1 定位和边距的区别以及弹出层的简单实例
盒子模型：通过改变元素的外边距内边距实现元素的移动
定位通过元素的位置移动改变它出现在网页的位置
一个小实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%
}
.content{
width: 100%;
height: 4043px;
background: url("mooc.png") center top no-repeat;
}
.login{
width: 360px;
height: 362px;
background: url("login.png") no-repeat;
z-index: 2;
position: fixed;
left: 50%;
top: 50%;
margin-top: -181px;
margin-left: -180px;
}
.opacity_{
width: 100%;
height: 100%;
background: url("opacity.png");
position: fixed;
left: 0px;
top: 0px;
z-index: 0;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="login"></div>
<div class="opacity_"></div>
</body>
</html>
4-2 侧边栏导航跟随实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>navigation-aside</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;
}
.first-title{
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 .third-title{
display: block;
}
.third-title{
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 calss="fist-title">一级标题1</div>
<ul>
<li>
二级栏目1-1
<div class="third-title">
<div class="list-3Dom">三级栏目1-1-1</div>
<div class="list-3Dom">三级栏目1-1-2</div>
<div class="list-3Dom">三级栏目1-1-3</div>
</div>
</li>
<li>
二级栏目1-2
<div class="third-title">
<div class="list-3Dom">三级栏目1-1-1</div>
<div class="list-3Dom">三级栏目1-1-2</div>
<div class="list-3Dom">三级栏目1-1-3</div>
</div>
</li>
<li>
二级栏目1-3
<div class="third-title">
<div class="list-3Dom">三级栏目1-1-1</div>
<div class="list-3Dom">三级栏目1-1-2</div>
<div class="list-3Dom">三级栏目1-1-3</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div calss="fist-title">一级标题2</div>
<ul>
<li>
二级栏目2-1
<div class="third-title">
<div class="list-3Dom">三级栏目2-1-1</div>
<div class="list-3Dom">三级栏目2-1-2</div>
<div class="list-3Dom">三级栏目2-1-3</div>
</div>
</li>
<li>
二级栏目2-2
<div class="third-title">
<div class="list-3Dom">三级栏目2-1-1</div>
<div class="list-3Dom">三级栏目2-1-2</div>
<div class="list-3Dom">三级栏目2-1-3</div>
</div>
</li>
<li>
二级栏目2-3
<div class="third-title">
<div class="list-3Dom">三级栏目2-1-1</div>
<div class="list-3Dom">三级栏目2-1-2</div>
<div class="list-3Dom">三级栏目2-1-3</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div calss="fist-title">一级标题3</div>
<ul>
<li>
二级栏目3-1
<div class="third-title">
<div class="list-3Dom">三级栏目3-1-1</div>
<div class="list-3Dom">三级栏目3-1-2</div>
<div class="list-3Dom">三级栏目3-1-3</div>
</div>
</li>
<li>
二级栏目3-2
<div class="third-title">
<div class="list-3Dom">三级栏目1-1-1</div>
<div class="list-3Dom">三级栏目1-1-2</div>
<div class="list-3Dom">三级栏目1-1-3</div>
</div>
</li>
<li>
二级栏目3-3
<div class="third-title">
<div class="list-3Dom">三级栏目1-1-1</div>
<div class="list-3Dom">三级栏目1-1-2</div>
<div class="list-3Dom">三级栏目1-1-3</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
