一. 学习目标。
- 掌握定位的作用。
- 掌握定位的实现方式。
- 掌握相对定位，绝对定位，固定定位的区别。
- 流式布局
- 能够通过html，css，盒模型，浮动，定位进行复杂网页布局。
二. 定位。
1. 作用。
解决是具有层级叠加（覆盖）效果的布局。
2. 实现方式。
给元素添加position属性，然后设置值为relative, absolute,fixed。
3. 不同的定位方式。
定位位置调整都是配合left, top, right, bottom四个属性来使用的。
3.1 相对定位。
实现方式：元素添加属性， position: relative.
相对定位是相对于元素自身原来的位置进行位置调整。
特性：相对定位的元素会提升层级，但是不会脱离文档流。
3.2 绝对定位。
实现方式：元素添加属性， position: absolute.
绝对定位是相对于已经定位了的父级元素进行位置调整。
解释：
父级元素:只要在该元素的上层都是父级元素（上一级，上上一级，上上上一级）
已经定位了的：该元素要添加了定位属性， position:relative。
特性：绝对定位的元素会脱离文档流，提升层级。
3.3 固定定位。
实现方式：元素添加属性， position:fixed.
固定定位是相对于body进行位置调整。
特性：固定定位会脱离文档流，提升层级。
三.流式布局
流式布局,又称为百分比布局. 把元素的宽,高,margin,padding从原来的固定值,改为百分比. 注意:
- 元素的宽高如果百分比,那么对应参考的就是其父级的宽高.
- 元素的margin或者padding设置了百分比值,那么是相对于父级的宽度计算得到!! 注意,只参考父级宽度!!!
- 所以想要合理准确的使用百分比布局,就一定要保证父级对象参考的样式的值是确定存在有效的!!!
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.root{
width: 100%;
height: 90%;
background-color: salmon;
margin: 0 auto;
}
.one{
width: 19%;
height: 20%;
background-color: seagreen;
float: left;
margin-right: 1.25%;
margin-bottom: 1%;
}
.one:nth-child(5n){
margin-right: 0;
}
</style>
</head>
<body>
<div class="root">
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
<div class="one">
</div>
</div>
</body>
</html>
