定位
2018-08-24 本文已影响0人
秋殇灬
BFC （隐含的属性）
1 父元素的垂直外边距不会和元素重叠
2 开启BFC的元素不会被浮动元素所覆盖的
3 开启BFC的元素可以包含浮动的子元素
开启BFC
1 设置元素浮动
2 设置元素绝对定位
3 设置元素为inline-block
4 简元素的overfolw设置为一个非visible的
hasLayout（类似BFC）
overflow：hiddem 解决塌陷
text-decoration：none ；去除下划线
设置鼠标移入变色
. nav a：hover{}
《相对定位》
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
《绝对定位》
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 宋体;
}
.outer{
width: 300px;
/*height: 471px;*/
/*background-color: #bfa;*/
margin: 50px auto;
}
.title{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px "微软雅黑"；
}
.content{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content a:hover{
color: red;
text-decoration: underline;
}
.content h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content li{
margin-bottom: 15px;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授开办计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a href="#">人工智能+python-高兴就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">Android开发+测试-高薪就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
</li>
<li>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
</ul>
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red-font">预约报名</span></a>
<a href="#">开班时间：<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2018-04-26</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
