1.HTML中的3种布局方式
1.1 标准流
从左到右，从上到下显示。要让一个元素不在正常流中，唯一的办法是让元素浮动或定位。
1.2 浮动
1. 只要是脱离了标准流，元素都是不区分行、块的，体现在任何元素都可以设置宽、高了。都有了
收缩的 性质，就是不设置宽度，就自动缩减为里面内容的宽度，没有宽度时默认内容撑开宽度；
2.脱离文档流
3.浮动的边界不会超过父元素，下一个浮动不会超过
4.提升层级半级。
5.浮动的元素有贴边的性质，绝对定位的元素可以自由定位。
- 对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。
- 对普通元素的影响：浮动元素会从文档正常流中删除，使得紧挨它的元素位置发生偏移，影响布局。
- 对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
1.3 定位
CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）inherit
-
static
没有定位，元素在正常流中,top,right,bottom,left和z-index属性无效。 relative
- 将元素position属性设置为relative之后，再通过top,bottom,left,right属性对其进行相对于原来位置的偏移；
2.元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；
3.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别
-
absolute生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。
-
绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；
-
绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；
-
绝对定位的框可以覆盖页面的其他元素。
-
fixed
本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。
absolute, relative, fixed偏移的参考点分别是什么？
-
absolute偏移的参考点是：最近的是relative或者absolute的父试图进行定位。
-
relative偏移的参考点是：相对于元素在普通流中的原来位置，正常流中位置依旧存在，根据最近的父试图进行定位。
-
fixed偏移的参考点是：相对于浏览器窗口，正常流中不存在，需要注意的是在移动端开发的时候尽量不要使用这个，因为在切换界面的时候会导致元素的抖动。
relative下，top和margin-top的区别
https://blog.csdn.net/lxiang222/article/details/70340084
https://www.jianshu.com/p/4a1f36e9ca32
网友评论