css的定位属性是搭建结构必不可少的属性,定位了解透彻对我们以后的学习会有极大的帮助,满足日常的需求,这是我对定位属性的一些了解和基本用法,希望在以后的学习中能帮助大家更好的理解
1、定位是什么
定位简单来说就是在css里面用于检索或设置元素的定位方式
就是用于改变元素位置的一个CSS属性
2、定位的语法
position:属性值;
搭配坐标偏移值使用(坐标偏移值就是一个确定位置的值。left,right,bottom,top这些)
3、关于定义元素坐标偏移的值(坐标偏移值)
-
通俗的讲就是辅助定位属性进行定位的必不可少的辅助方式
-
定位属性与属性值确定定位方式(确定参照物),而坐标偏移值用于确定坐标方位
例如:在确定定位方式之后想让元素距离左边移动10px那么我们就在后面加上 left:10px; 这样元素就会进行位置的改变 相同的还有 right(距离右边的距离) top (距离上面的距离) bottom(距离下面的距离) 注意,在使用left之后不需要用right,相反矣之 使用top之后不需要用bottom,相反矣之
4、position有哪些常用的属性值
静态定位(satic)
position的默认值为文本流状态
但不会识别坐标偏移值的指定坐标
因为它是默认值在默认状态下都是为静态定位所以直接加坐标偏移值是不会被识别的
绝对定位(absolute)
参照物为已经有定位的父元素,在有定位的父元素的位置上发生位置变化
如果需定位的元素没有父元素或者无定位那么absolute就以整个文档为参照物
特点:使用绝对定位会破坏文档流,不占据空间,就是不在原来的位置上,也不占据空间
相对定位(relative)
它的参照物为自身默认的位置
特点:和绝对定位相反,相对定位(relative)始终占位占据空间不破坏文档流
用法:如果子元素需要以父元素为参照物形成定位的话
那么我们可以给父元素添加相对定位(relative)给子元素添加绝对定位(absolute)
然后给需要定位的子元素搭配边偏移使用完成定位
固定定位(fixed)
以整个浏览器窗口为参照物,和绝对定位类似脱离文本流并且不占据空间
粘性定位(sticky)
相对定位及固定定位的结合体
在没有超出窗口的情况下执行的为相对定位并具有同样的特点
在超出窗口的情况下执行的为固定定位并具有相同的特点
例如导航的吸顶效果就可以用此方法实现
5、定位属性的基本用法
- 用于元素在各种位置中利用各种属性值相应做位置的改变
- 让内容在浏览器窗口中左右上下居中(利用固定定位实现)
- 让子元素在父元素中左右上下居中(父元素为包含块,利用绝对定位及盒模型实现)
- 还可以用于导航的吸顶效果(利用粘性定位实现)
写到最后
学习是个日积月累的过程,在这过程中需要多多实践才能学到属于自己的东西。尤其在这种环境之中作为爱好学习的你更不能让自己松懈,在逆境中我觉得更能心无旁骛的做好。
在这不平凡的年代注定要成就一段不平凡的人生。给你加油给自己加油,明天一定会更好,逆战班2020,中国加油~