一.显示方式

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;