整理css基础篇-定位（常规+浮动+定位）

1：常规流

（1）盒模型：规定单个盒子的规则
（2）视觉格式化模型（布局规则）：页面中多个盒子排列规则。

视觉格式化模型，大体将页面上盒子排列 为三种方式：常规流布局、浮动、定位
1：常规流布局（亦称：文档流、普通文档流、常规文档流）
：所有元素、默认情况下，都属于常规流布局
：总体规则：块盒独占一行，行盒水平依次排列
包含块（contanining block）:每个盒子都有他自己的包含块，包含块界定盒子的排列区域。
特：绝大部分情况下：盒子的包含块为其父元素的内容盒。

	块盒规则：
	（1）每个块盒的总宽度，必须刚好等于包含块的宽度。
			width：auto（默认值）（auto：将剩余空间吸收掉）。
			margin：0（默认值），也可以取值auto。
			》》当取值都为auto时，width吸收能力强于margin。若宽度、边框、内边距、外边距计算后仍然有剩余空间，该剩余空间由margin-right全部吸收。》》》在常规流中，块盒在其包含块中居中，可以定宽然后左右margin设置为auto。
	（2）每个块盒垂直方向上的auto值：
			height：auto，适应内容的高度。
			margin：auto（表示0）。
	（3）百分比取值：
			padding、width、margin可以取值为百分比。
			height的百分比：包含块的高度是否取决于子元素的高度，设置百分比无效；包含块的高度不取决与子元素的高度，百分比相对于父元素的高度 。			
			特：所有的百分比相对于包含块的宽度。
	（4）上下外边距的合并：
			两个常规流块盒，上下外边距相邻会进行合并；连个外边距取最大值
	
	行盒规则：
		（1）
		（2）

2：浮动（css属性：float）

学习链接：https://www.w3school.com.cn/css/css_positioning.asp
用于:文字环绕 横向排列
基本特点：
1：修改 css的float属性值：left，right，none（默认）
（1）：当一个元素浮动时，一定是块盒
（2）：浮动元素的包含块，和常规流一样为父元素的内容盒
2：盒子尺寸：
（1）：宽度为auto时，适应内容的宽度。
（2）：高度为auto时，与常规流一致，适应内容的高度
（3）：margin为auto，为0。
（4）：边框、内边距、百分比设置与常规流一样
3：排列规则
（1）：左浮动的盒子靠上靠左
（2）：右浮动的盒子靠上靠右
（3）：浮动盒子在包含块中排列时，会避开常规流块盒
（4）：常规流块盒在排列时，无视浮动盒子
（5）：行盒在排列时会避开浮动盒子
特：如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫匿名行盒。
（6）：外边距合并不会发生。
4：高度坍塌
产生根源：常规流盒子在计算高度时，会直接忽视浮动盒子。如：

解决：清除浮动。
（1）方法一：css属性：clear（none（默认））
clear：left：清除左浮动，该元素必须出现在前面所有的左浮动盒子的下方
clear：right。清除右浮动，该元素必须出现在前面所有的右浮动盒子的下方
clear：both。清除浮动，该元素必须出现在前面所有的浮动盒子的下方

（2）方法二：
补充5：浮动的细节规则：
（1）浮动盒子的顶边不得高于上一个盒子的顶边
（2）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间，然后再向左或向右移动（左右取决于浮动设置）

3：定位（ css属性：position。）

学习链接：https://www.w3school.com.cn/css/css_positioning.asp
特点：手动控制 元素在包含块中的精准位置。

1：默认值（position:static）
（1）一个元素，只要position的取值不是static，认为该元素是一个定位元素。
2：相对定位：（position：relative）
学习链接：https://www.w3school.com.cn/css/css_positioning_relative.asp
基础属性值：left right top bottom
特点：
（1）不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移。
（2）盒子的偏移不会对别的盒子造成影响。（相当于视觉偏差，仍然会占据原来的空间）

3：绝对定位 （position：absolute）
学习链接：https://www.w3school.com.cn/css/css_positioning_absolute.asp
基础属性值：
特点：
（1）宽高为auto，适应内容。
（2）包含块的变化：找祖先中第一个定位元素，该元素的填充盒为其包含块；若找不到，则它的包含块是整个网页。（一定要找到父元素是定位元素）
4：固定定位 （position：fixed）
学习链接：
特点：
（1）其他情况和 绝对定位 完全一样。
包含块不同：固定为视口（浏览器的可视窗口）

特：定位元素会脱离文档流（相对定位除外）
1：一个脱离了文档流的元素：
（1）文档流中的元素摆放时，会忽略脱离了文档流的元素。
（2）文档流中元素计算自动高度时，会忽略脱离了文档流的元素》》高度坍塌。
2：定位下的居中。
某个方向居中。
1：定宽（高）
2：将左右（上下）距离设置为0
3：将左右（上下）margin设置为auto
绝对定位和固定定位时margin设置为auto ，将会自动吸收剩余的空间。
3：多个定位元素重叠时：
(1):堆叠上下文:设置z-index，值越大，优先级越高。只有定位元素设置z-index有效，且可以是负数，如果是负数，遇到常规流、浮动元素，会被其覆盖。

特：绝对定位、固定定位元素一定是块盒。
绝对定位、固定定位元素一定不是浮动。

定位练习示例：