css布局定位及相关知识---总结

定位：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 举例分析
在不设置父元素的宽度时，此时子元素依然保持水平垂直居中

---

今天就先写到这里，挺晚的了，还是要好好学习，不然这些基础的东西，还是很难去真正的理解掌握。布局这些虽然看了好多次，但是自己不动手，真正理解还是挺难的，加油，晚安。
明天就过年啦，开心！