前言：
最近在学习前端一个月之后，产生了对自己无限的怀疑，因为自己的懒惰，只听不练，导致现在结结实实成了一个理论党。为了摆脱这种困境，我决定把之前欠的代码都给敲回来，也算是重新巩固一下知识，查漏补缺。话不多说。展示我的第一节课~
实例：
由于之前的标签部分太过基础。。就直接从布局部分开始学习了。这是之前的一个小练习，我又做了一遍，也会阐述一下遇到的问题（本以为这点东西，三分钟搞定......）
布局很简单，只是改变窗口不能改变位置，所以要用百分比表示比例就好了。
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位</title>
<style>
body {
margin: 0;
}
.nav {
height: 80px;
width: 100%;
background-color: greenyellow;
}
section div {
float: left;
}
.left {
height: 600px;
width: 20%;
background-color: red;
}
.container {
height: 600px;
width: 60%;
background-color: white;
}
.right {
height: 600px;
width: 20%;
background-color: blue;
}
.main {
position: relative;
;
height: 50%;
width: 50%;
left: 25%;
top: 25%;
border: 1px solid red;
}
.main div {
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
background-color:orchid;
position: absolute;
}
.rect2 {
right: 0;
}
.rect3 {
bottom: 0;
}
.rect4 {
right: 0;
bottom: 0;
}
.rect5 {
left: 50%;
top: 50%;
}
.rect6 {
left: -20px;
top: -20px;
}
.rect7 {
right: -20px;
top: -20px;
}
.rect8 {
left: -20px;
bottom: -20px;
}
.rect9 {
right: -20px;
bottom: -20px;
}
</style>
</head>
<body>
<header>
<div class="nav"></div>
</header>
<section>
<div class="left"></div>
<div class="container">
<div class="main">
<div class="rect1">1</div>
<div class="rect2">2</div>
<div class="rect3">3</div>
<div class="rect4">4</div>
<div class="rect5">5</div>
<div class="rect6">6</div>
<div class="rect7">7</div>
<div class="rect8">8</div>
<div class="rect9">9</div>
</div>
</div>
<div class="right"></div>
</section>
</body>
</html>
代码简单就没有注释，每次写完都觉得自己写的有问题，哈哈。
遇到的问题：
还是position的两个属性，relative绝对定位,absoulute相对定位。这两个的主要区别在于她们进行定位时所参考的父级，和是否脱离文档流。
relative:
1.不脱离文档流
2. 相对于它本身的位置进行移动
3.移动过后他原来的位置仍然占据文档位置
4.top/left/right/bottom属性是生效的
position:
1.脱离文档流
2. 相对于它直系父类中的position非static元素的位置进行移动
3.移动过后他原来的位置不占据文档位置
4.top/left/right/bottom属性由祖先类的margin影响
目前主要遇到的问题就是上述几个属性容易混淆，多家练习使用吧，也希望跟大家多多交流学习，指出我的不足，写的也都是个人意见，不一定正确，这是第一篇，接下来会有更多的文章，一起努力学习吧！
网友评论