sanlyShi的前端之路三:css中position,margin、padding细节理解

来源:互联网 发布:宝宝照片涂鸦软件 编辑:程序博客网 时间:2024/06/18 13:16

position:

1.absolute:生产绝对定位的元素,相对于第一个有明确的定位的元素进行定位;

(比如,如果父元素没有确定的position定位,那么就去找父元素的父元素,一直找到有明确定位的元素为止,body属于最高级明确定位) ;

 可以使用top,bottom,left,right;

脱离文档流,原位置由后面的元素填充

2.relative:相对于正常位置(直接父元素),不脱离文档流,原位置留白

3.fixed::生成绝对定位的元素,相对于浏览器窗口进行定位,不随这页面滚动而发生位置的改变,位置相对浏览器固定

4.static:处于正常的流中(即行内在一行,块新行开始)

5.inherit:继承父元素的position属性


1,2,3可以使用top,left,right,bottom改变位置

margin/padding: 如果设置为百分比,其相对值都是相对于父元素的width(宽度)的

阅读全文
1 0