1. 定位
定位:position : ;
有4个值:
static
静态定位(默认值,没有定位) , relative
相对定位, absolute
绝对定位,fixed
固定定位
1.1 相对定位
相对定位:position:relative;
相对定位的特点:
-
相对于静态位置的定位,它不会脱离文档流.
-
就算离开之前的位置,也不会影响页面的布局
-
有4个方向的值:
left top right bottom
-
设置left为正值,则元素会相对于没有定位时的位置往右边移动,同理,设置top为正值,元素会相对没有定位时的位置向下移动.
-
如果同时设置left 与 right的值,起作用的是left
-
常用在元素位置的微调,和给绝对定位的元素做参考元素
1.2 绝对定位
绝对定位:position:absolute;
1.2.1 绝对定位的特点:
-
绝对定位的元素会脱离文档流
-
其他位置的元素会当做绝对定位的元素不存在一样的顶上去.
-
如果只给元素添加定位属性,而没有设置left top right bottom值,那么他一定是处于静态位置(没有设置定位的位置)
-
没有指定left..几个值时,默认是auto.(没有设置,那么原来在哪,现在就在哪里)
1.2.2绝对定位方向值的计算:
如果子元素绝对定位,父元素没有定位后,父元素是已经管不着子元素了
-
那么子元素是根据什么来定位的呢?
它是根据包含块来计算的
包含块(
BFC
):块级格式化上下文;任何元素都有一个包含块,任何元素都是在它的包含块中布局
-
那绝对定位是怎么找包含块的呢?
它是先从直接的父元素开始找,看有没有祖先元素开启了定位,一旦有祖先元素开启了定位,
那么它就停止寻找,那找到的第一个开启了定位的祖先元素就是它的包含块
-
那left top right bottom是跟怎么计算的呢?
它是根据包含块的四个边的距离进行计算的
-
例子:计算left的值
是定位元素的margin外边缘距离包含块的边边框内边缘
-
.一般设置了子元素绝对定位后,就会设置父元素相对定位(子绝父相),这样父元素就是子元素的包含块
-
一个绝对定位的元素的尺寸:
left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=父容器的边框左右内边缘的距离
-
一个元素定位的值是包含块的边框内边缘到定位元素的margin外边缘的距离
1.2.3 绝对定位的水平垂直居中
width: 100px; height: 100px; background-color: yellow; position: absolute; /*当同时设置了left right时 牺牲的时right,就是 会按照left来*/ left:0; right:0; /* 只要left和right设为同样的值就能满足水平居中, 但是他们的值不能超过父元素留给他们的位置,就像这个一旦超过150就会溢出. */ top:0; bottom:0; /*这是margin过来*/ margin:auto; /*要是想垂直居中还可以设置上下都为0*/
1.2.4 绝对定位的覆盖
-
绝对定位后出现重叠,怎么排序呢?
默认是按照html的结构排序,谁的排版在后面就是谁先显示
我们可以通过z-index的值来改变
z-index默认值为0,越大越在前面显示
注意:当两个父元素指定了z-index的值时,它不会去看子元素的z-index值,
如果没有指定,那就会去比较子元素的z-index值.
1.3 固定定位
固定定位会完全脱离文档流,定位的参考物是视窗,也可以认为是浏览器的窗口
2. 背景
2.1 设置背景图片
设置背景图片:background-image:url图片地址;
默认是x轴,y轴平铺.同时设置背景颜色和背景图片,背景图片会覆盖背景颜色
2.2 设置图片的平铺方式
设置图片的平铺方式:background-repeat: repeat
可选值:
repeat 默认值,x,y轴都平铺
no-repeat x,y轴都不平铺
repeat-x x轴平铺
repeat-y y轴平铺
也可以这样子写:background-repeat: no-repeat repeat;代表x轴不平铺,y轴平铺
2.3 设置图片的定位
设置图片的定位:background-position:;
可选值:
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值,则第二个值默认是center
也可以直接指定两个偏移量,
第一个值是水平偏移量
如果指定的是一个正值,则图片会向右移动指定的像素
如果指定的是一个负值,则图片会向左移动指定的像素
第二个是垂直偏移量 如果指定的是一个正值,则图片会向下移动指定的像素 如果指定的是一个负值,则图片会向上移动指定的像素