CSS网页的布局方式（标准流/浮动流/定位流）

网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。

1、标准流（文档流/普通流）排版方式：

（1）默认的排版方式就是标准流排版方式

（2）在CSS中将元素分为三类，分别为块级元素/行内元素/行内块级元素

（3）标准流中，垂直排版：块级元素，水平排版：行内元素/行内块级元素

 在标准流中，内容的高度可以撑起父元素的高度

企业开发中什么时候使用标准流什么时候使用浮动流？

垂直方向使用标准流，水平方向使用浮动流。

拿到一个很复杂的界面如何下手？

1、从上至下布局

2、从外向内布局

3、水平方向可以先划分为一左一右再对左边或者右边进行进一步布局。

2、浮动流排版方式：

浮动流是一种半脱离标准流的排版方式

只有一种排版方式：水平排版，只能设置某个元素左对齐或者右对齐

格式：

float：none/left/right

注：

1.浮动流中没有居中对齐，没有center取值

2.浮动流中不可以使用margin：0 auto;

特点：

1.在浮动流中不区分块级元素/行内元素/行内块级元素，都可以水平排版

2.在浮动流中都可以设置宽高

3.浮动流中的元素和标准流中的行内块级元素很像

浮动元素的脱标

脱标：脱离标准流

当一个元素浮动之后，这个元素看上去像被从标准流中删除了一样

影响：如果某一个元素浮动了，后面一个元素没有浮动，那么前面的元素就会盖住后面的一个元素

浮动元素排序规则

1.相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面

2.不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动

3.浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

浮动元素贴靠现象：

当父元素的宽度够放下所有浮动元素时，浮动元素就会并列显示，父元素的宽度不够放下所有浮动元素时，就会从最后一个浮动的元素开始往前贴，直到贴到父元素的左边为止，如果贴到父元

素的左边，那这时不管父元素够不够都会贴在那。

浮动元素的字围现象：

浮动元素不会盖住没有浮动元素内的文字，没有浮动元素内的文字会给浮动元素让出文字不被盖住。

应用场景：图文混排

3.定位流排版方式：

定位流分类

1.相对定位

2.绝对定位

3.固定定位

4.静态定位

相对定位：相对定位就是相对于自己以前在标准流中的位置来移动

格式：

position：relative；

top：值；

left：值；

注：

1.相对定位是不脱离标准流的，会继续在标准流中占用一份空间

2.在相对定位中同一个方向上的定位属性只能使用一个

3.由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素

4.由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局

5.相对定位不会脱离标准流，会继续在标准流中占用一份空间，不利于布局界面（弊端）

应用场景：

1.用于对元素进行微调

2.配合绝对定位来使用（子绝父相：子元素绝对定位，父元素相对定位）

绝对定位：绝对定位时相对于body定位

格式：

position：absolute；

top：值；

left：值；

注：

1、绝对定位的元素是脱离标准流的

2、绝对定位的元素不区分块级元素、行内元素、行内块级元素

绝对定位参考点规律：

1、默认情况下绝对定位元素无论有没有祖先元素，都会以body作为参考点

2、如果一个绝对定位的元素有祖先元素（不只是父元素），并且祖先元素也是定位流（绝对定位、相对定位和固定定位，静态定位不行），那么这个绝对元素就会以定位流的那个祖先元素作为参考点

3.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点（就近）

注：

1.如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度为参考点，不是以整个网页发宽度和高度为参考点

2.一个绝对定位的元素会忽略祖先元素的padding

3.默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化（弊端）

绝对定位水平居中：

如何让绝对定位的元素水平居中

设置绝对定位的元素的left：50%；，然后设置绝对定位元素的margin-left：-元素宽度的一半px；

固定定位：

固定定位和背景关联方式很像，背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动

格式：

position：fixed；

left：值；

top：值；

注:

1.固定定位的元素时脱离标准流的，不会占用标准流中的空间

2.固定定位不区分行内元素/块级元素/行内块级元素

3.ie6不支持固定定位

z-index属性

默认情况下所有的元素都有一个默认的z-index属性，取值是0

作用：

z-index是专门控制定位流元素的覆盖关系

注:

1.默认情况下定位流的元素会盖住标准流的元素

2.默认情况下定位流的元素后面编写的会盖住前面编写的

3.如果定位流的元素设置了z-index属性，那么谁的z-index属性取值大，谁就显示在上面

4.从父原则：如果两个元素的父元素都没有设置z-index属性，那么谁的x-index属性比较大谁就显示在上面；如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，谁的父元素的z-index属性比较大谁就会显示在上面