为什么需要元素模型:
布局元素模型分爲三種:
- 流動模型(Flow默认)
- 浮動模型(Float)
- 層模型(Layer)
流动模型(块元素、行内元素、行内块元素)
【块元素】
【行内元素】
【行内块元素】
浮动模型
例如: float:letf、float:right等等
小插曲:如果设置的float不影响 【受影响的元素】的后面,可以加入clear:both
![](https://i-blog.csdnimg.cn/blog_migrate/7f64dcee7568852ba51bda7dff3e2e28.png)
层模型
absolute、relative、fixed区别:
原代码:
![](https://i-blog.csdnimg.cn/blog_migrate/0ba6a11ac2612121351d3a02537bd11c.png)
一. absolute
1. 在第二个div(我是内部元素)设置position:absolute
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
width: 100px;
height: 100px;
background: #ccc;
text-align: center;
line-height: 100px;
2.然后在第一个div(我是外部元素)设置position:relative
position: relative;
height: 150px;
width: 150px;
background: royalblue;
3.效果
4.总结:absolute的位置是相对于relative来的,absolute与relative类似于父子关系
二. relative
1.下面再在第一个div元素添加left:200px
position: relative;
height: 150px;
width: 150px;
background: royalblue;
left:200px;
2.效果:
![](https://i-blog.csdnimg.cn/blog_migrate/166c64ff77c7b545a06fc34de0f94799.png)
3.总结:relative 的位置是相对于这个页面的
小插曲:层级关系【z-index的用法】可以百度
三. fixed
1.效果
2.总结:滚动条滚动,这个div也会随着滚动