一.显示方式
1.块
- 有宽高,垂直排列
- hn,p,ol,ul,div,table,form
2.行内
- 无宽高,水平排列
- span,i,em,b,strong,u,del,a,label
3.行内块
- 有宽高,水平排列
- img,input,select,textarea
4.修改显示方式
- display:block;
- display:inline;
- display:inline-block;
- display:none;
二.定位
1.定位的作用
- 用于解决元素的排列问题
通过定位可以将元素摆放到任意位置
2.定位的分类
默认定位
- 默认情况下块垂直排列,行内水平排列.
- 默认的定位方式也称之为流定位.
流:元素有序排列而形成的队伍.
特殊定位
- 浮动定位:解决块元素水平排列的问题.
- 相对定位:让元素以自身为目标产生微小的偏移.
- 绝对定位:让元素以父辈为目标产生较大的偏移.
- 固定定位:让元素以窗口为目标产生巨大的偏移.
三.浮动定位
1.概述
- 作用:解决块元素水平排列的问题.
- 分类:左浮动,右浮动.
- 步骤:1)目标离队 2)后者前进 3)目标去指定位置
2.右浮动
-
让块按照倒序左右排列
1.png
3.左浮动
-
让块按照正序左右排列
2.png
4.消除浮动影响
3.png
5.学子商城服务区
4.png
四.相对、绝对、固定定位
1.相同点
-
设置偏移量的方式相同
5.png
2.不同点
- 偏移时所参考的目标不同
3.相对定位
以自身的位置为目标,通常偏移量较小.
-
目标不离队.
position: relative; left: 20px; top: -10px;
4.绝对定位
- 以带有position的父辈为目标,通常偏移量较大
- 若父辈都有position,则以就近的父辈为目标
- 若父辈都没position,则以就远的父辈为目标
- 特点:目标离队.
你想以谁为目标,就在谁上加position.
position: absolute;
left: 20px;
top: 30px;
6.png
5.固定定位
- 以浏览器窗口为目标进行定位
- 定位的元素将离队
元素会挂在窗口上保持不动
position: fixed;
left: 10px;
top: -20px;