CSS浮动和各种定位

CSS定位

css定位机制

文档流：元素按照在HTML中的位置决定排布的过程

块级元素是从上到下的，内联元素是从左到右的

浮动

position布局

position

css position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。

属性值	描述
static	默认。静态定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index`属性无效。
relative	相对定位。元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
absolute	绝对定位。不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并
fixed	固定定位。不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变

relative

1.不脱离文档流

参考点

以原来的位置作为参考点，可以进行top,left,right,bottom进行位移

注意

由于相对的位置是原来的位置，坐标轴为第4象限，y轴是相反的

absolute

1.脱离文档流

2.层级提高

参考点

父标签的位置

static：

无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位子绝父相

fixed

1.脱离文档流

参考点

html左上角为参考点

z-index

z-index只应用在定位的元素，默认z-index:auto;
z-index取值为整数，数值越大，它的层级越高
如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

float浮动属性

加浮动的元素，会脱离文档流，会在父容器中靠左或者靠右显示，如果之前有浮动元素，就会挨着浮动的元素排列，如果父容器空间不足，他会自行调整浮动：css样式表中用float来表示

属性值	描述
none	表示不浮动，所有之前讲解的HTML标签默认不浮动
left	左浮动
right	右浮动
inherit	继承父元素的浮动属性

float注意点

1.只会影响后面的元素

2.内容默认提升半层，为1.5层，文档流的层为1，但是文字的层级为1.5，所以会出现文字环绕的现象

3.浮动元素的宽度是内容决定的

4.换行排列，父容器一行装不下了，会到下一行（这其中有很多不同的规则，注意下）

5.主要是给块级元素添加的，但是也可以给内联元素添加

常见作用

浮动实现布局

文字环绕

父盒子高度塌陷

父盒子的高度不能由浮动元素撑起来

清除浮动的方式

上下排序（上级元素浮动，对后面无影响）

clear属性：表示清除浮动，left、right、both

嵌套排列（子浮动元素，如何把父元素撑起来）

固定宽高：不推荐，把高度固定死，不适合做自适应的效果

父元素浮动：不推荐，因为父容器也会影响到后面的元素

overflow：hidden（BFC规范），如果子元素想溢出，那么会受到影响

display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。

设置空标签：不推荐，会多添加一个标签

after伪类：推荐，相当于空标签的加强版，大公司的做法（after默认添加的是一个内联，所有要把它转为块级，快级有clear属性）

伪元素清除法

		#a:after{

			content: "";

			display: block;

			clear: both;

		}

overflow:hidden

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto	由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit	规定从父元素继承overflow属性的值

Block Formtting Context

BFC区域一条规则:计算BFC（块级盒子）的高度时，浮动元素也参与计算

BFC布局规则

1.内部的Box会在垂直方向，一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4.BFC的区域不会与float 元素重叠。

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时，浮动元素也参与计算

BFC产生条件

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

布局

行内元素水平居中

text-align:center

line-height:盒子高度

display:table-cell 转为单元格

vertical-align:middle

块级元素水平居中

position:absolute

margin:auto

left:0

right:0

top:0

bottom:0

父

display:table-cell

vertical-align:middle

text-align:center

子

display:inline-block

position:absolution

top:50%

left:50%

margin-left:-50px

margin-top:-50px