又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功,好了,闲聊就到这里吧,下面我分享下这周老师讲到的一些内容,以下都是自己的理解哈,仅供参考:
CSS盒子定位:
什么是盒子定位呢,顾名思义,就是元素盒子(以下主要以块级盒讲解)在页面中的位置,定位就是确定他的位置,盒子定位分为以下四种 :
1、静态位置(position:static)也就是默认值:
每一个元素在没有float值的时候,都有position值,就是static,可以直接理解它在是默认值的时候就是常规流,所有规则与常规流一样;
2、相对位置(position:relative):
固定定位,顾名思义就是固定盒子不随网页滑动而移动
实际代码:position:fixed;
可以通过top、bottom、left、right设置像素值来固定位置;
一般用于导航栏或者网页角落的广告;
4、绝对位置(position:absolute):
绝对定位使元素的位置与文档流无关,也就是脱离文档流,因此不占据空间,比如说有三个纵向排列的三个元素盒子,尺寸宽高都为100px,如果给中间的盒子设置了position:absolute;那么他就会脱离出来,它下面的那个盒子就会向上浮,绝对定位盒子的包含块主要看他父级或祖先级里面有没有定义了position值的,如果有,就是他的包含块;
这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
其实相对定位与绝对定位都属于常规流。