67-68讲 开班信息案例
代码只写了67讲，主要还是line-heught让文字垂直居中，font覆盖行高的问题，这些在前面都讲过。68讲没什么重要知识点，代码没写，下面是67讲的代码：
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:300px;
height:500px;
background:lightgreen;
margin:30px auto;
}
.box .title{
height:30px;
line-height:30px;
background:lightgrey;
border-top:lightgreen 4px solid;
padding:0 5px;
}
.title a{
color:red;
float:right;
}
h3{
display:inline-block;
/*这里要注意了，父元素title设置了行高，子元素h3的font属性只设置字体大小没指定行高会用默认的行高所以要18px/30px */
font: blod 18px/30px "微软雅黑";
}
</style>
<body>
<div class="box">
<div class="title">
<h3>近期开班</h3>
<a href="#">16年面授开班计划</span>
</div>
<div class="content"> </div>
</div>
</body>
</html>
69讲 相对定位
特点
-
position:relative设置后，不会影响页面原有的布局，不会脱离文档流。可以理解为真身还在原来的位置站着，魂通过left,top,bottom,right进行移动，并且层级比未脱离文档流的元素高一级，移动到哪里就盖住哪个元素。
-
left,top,bottom,right和margin相似，通过这4个值可以进行相对当前定位的位置移动
- 相对定位块级元素，内联元素的性质没发视任何改变，就理解为和没开启相对定位一摸一样！这和float是大不相同的。
上图代码
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
width:200px;
height:200px;
background:lightgreen;
}
.div2{
width:200px;
height:200px;
background:red;
position:relative;
/*右移，距离原有位置的左边距100px*/
left:100;
/*下移，距离原有位置的上边距200px*/
top:200;
}
.div3{
width:200px;
height:200px;
background:blue;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
70讲 绝对定位
特点
- 与相对定位不同，开启绝对定位会脱离文档流，影响原有布局(后面元素往下钻)
- 只设置
position:absulote在没有设置偏移量left,top,bottom,right的情况下，它还会在原有的位置，这点和相对定位一样
- 绝对定位的默认参照物是浏览器窗口的左上角，但是当祖先元素开启了定位以后参照参照物就会是最近开启定位的祖先元素，在这里最好看一看珠峰培训2018年周啸天的
第97讲 DOM盒子模型7-盒子偏移量和OFFET。另外，也要区分和float的区别，float的浮动是无论如何也逃不出父元素的，没有参照物的概念。
- 开启了绝对定位元素的性质会发生改变，这里和float一样，内联变块级元素，块级元素宽度消失，并且对父元素造成高度塌陷问题
总结
绝对定位和float很容易混淆，但是要区分好。float独有的是逃不出父级的手掌心，据对定位是多了一个参照物。另外要说的一点是只有设置了position才能使用left,top,bottom,right属性并且也能使用margin，如果不设置position只能用margin
<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
width:200px;
height:200px;
background:lightgreen;
position:absolute;
top:200px;
margin:100px;
}
</style>
<body>
<div class="div1"></div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。