定位：position
-
absolute:，脱离文档流，相对于已定位的父元素进行定位，即它的偏移量是相对于最近一级position不是static的祖先元素的
-relative:在正常文档流， 相对于自身进行定位，它的偏移是相对于原先在文档流中的位置
以两个div进行演示：
红色的是：relative，黑色的是absolute
1.最简单的开始：
image.png
2.absolute与relative的位置不同
image.png
absolute脱离文档流进行定位，被relative覆盖
3.多个div
image.png
relative在正常文档流，根据自身定位，偏移量就是原来的位置，所以不会重叠；absolute脱离文档流，没有偏移量，会重叠在一起
4.嵌套
image.png
对比absolute和relative的定位
image.png
对比分析absolute的具体定位
尺寸 :% rem em
- 百分比
%：是相对于父元素的，在大的布局中百分比用的比较多rem:是相对于html元素的font-size大小，相当于是全局统一的。
**在实际项目中，把与元素尺寸有关的css，
如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局,但是实际操作中，还需要具体问题具体对待，也要进行相关的计算。 **em：是相对于当前元素的font-size大小，具体用起来得计算比较麻烦
弹性布局：display：flex
image.png
image.png
举例分析
在不设置父元素的宽度时，此时子元素依然保持水平垂直居中
今天就先写到这里，挺晚的了，还是要好好学习，不然这些基础的东西，还是很难去真正的理解掌握。布局这些虽然看了好多次，但是自己不动手，真正理解还是挺难的，加油，晚安。
明天就过年啦，开心！
网友评论