定位:
1:什么是定位;
2:定位的四种分类;
3:四种分类的特点;
4:为什么常用子绝父相布局;
css布局三种机制:
1:标准流
2:浮动
3:定位
1:为什么使用定位:
1:将盒子固定到某一个位置
2:可以自由漂浮在其他盒子之上
2:定位详解:
1:三种机制的层级关系:定位>浮动(脱标)>标准流
2:定位=定位模式+边偏移(偏移量)
通过top:80px left bottom right来实现
3:使用方式:
1:选择器{
position:属性值;
}
2:属性值:
1:relative 相对定位(重要)
1:定义:相对定位:相对于该盒子相对于标准流的位置来说的
2:使用:
position:relative
top left bottom right
3:特点:(重要)
1:相对于自己在标准流中的位置来实现;(按照之前的位置来决定)
2:保留原来位置;
2:absoute 绝对定位(重要)
1:定义:father(可以是直接父类,也可以是间隔父类,如果是间隔父类,则以间隔父类为标准)和son
1:如果father没有设置absolute,则son设置绝对定位模式后,会以当前的浏览器界面为准,一定位 置;
2:如果在father中设置了absolute,则son设置absolute之后,会以father为准;
3:如果grandfather中设置了absolute,father中并没有设置absolute,则son设置后,会以grandfather为准;
2:特点:
1:是以带有定位(相对,绝对,固定)的父级元素来移动位置,如果父级都没有定位,则以浏览器文档为标准;
2:不保留原来的位置,完全脱标
3:子绝对父相对:son用绝对,父用相对(因为父要占用位置)
4:对于浮动来讲,不能压着padding,border,img
3:fixed 固定定位(重要)
1:特点:是绝对定位的特殊方式
1:不占位置,脱标
2:跟父级无关,只以浏览器可视区域为准;
3:不随着滚动条移动(一般用于做悬浮)
2:使用方式:
position:fixed
left 0 ;
top 0 ;
4:static 静态定位(了解即可默认的定位模式)
不用定位的时候使用这个static
按照标准流的特性摆放位置,没有边偏移
静态定位在布局中基本不用
拓展:
1:绝对定位的水平居中:
left:50% ;
margin-left:-100px;
垂直居中效果类似
2:相对定位和普通流水平居中:margin: auto;
3:绝对定位堆叠顺序:默认:后来者居上;
1:在最下面的会覆盖上面的元素;
2:堆叠顺序:z-index可以调整盒子的堆叠顺序;
1:使用:正整数,负整数,0,没有单位,数值越大越靠上
2:z-index只存在相对,绝对,固定定位里,其他无效;
4:标准流:上下排列
5:浮动:左右排列
6:定位:层叠排列
7:改变显示模式:
1:display:inline-block,默认宽度为文本宽度
2:float:相当于将元素转换为行内块
3:absolute(fixed):相当于转换为行内块
8:行内元素配合定位和浮动,直接给宽高即可
9:定位的盒子需要单写宽度
10:固定定位和绝对定位完全脱标,不占位置
11:margin-top:外边距合并问题:
1:father设置border-top
2:father设置padding-top
3:overflow:hidden
4:son或者father设置float
5:father设置absolute(fixed)
12:绝对定位:
1:转换展示模式
2:解决外边距合并的问题
13:
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
也可以:
border-radius:左上,右上,左下,右下