21.CSS-网页的布局方式

网页的布局方式

1.什么是网页的布局方式？

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

2.网页的布局方式

（1）标准流排版方式

• 浏览器默认的排版方式就是标准流排版方式，也称文档流、普通流。
• 在CSS中将元素分为三类，块级元素、行内元素和行内块级元素。
• 在标准流中有两种排版，一种是垂直排版，一种是水平排版。
  垂直排版，如果是块级元素；
  水平排版，如果元素是行内元素或者是行内块级元素。
  块级元素、行内元素和行内块级元素实际上是标准流中的概念。
  在标准流中内容的高度可以撑起父元素的高度。

（2）浮动流排版方式

• 浮动流是一种半脱离标准流的排版方式；
• 浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐；
  注意点：
• 浮动流中没有居中对齐，也就是没有center这个值；
• 在浮动流中是不可以使用margin：0 auto；的。
  特点：
• 在浮动流中是不区分块级元素、行内元素和行内块级元素的，无论是块级元素、行内元素和行内块级元素都可以实现水平排版；
• 在浮动流中无论是块级元素、行内元素和行内块级元素都可以设置宽高；
• 综上所述，浮动流中的元素和标准流中行内块级元素很像，既可以水平排版又可以设置宽高。

在企业开发中，网页的布局方式，在垂直方向上用标准流来排版，水平方向上用浮动流来排版。
从上至下布局，从外向内布局，水平方向可以先划分一左一右再对左边或者右边进行进一步布局。

在浮动流中，浮动元素无法撑起父元素的高度。
17.CSS-浮动 https://blog.csdn.net/Veronnit/article/details/118785206

（3）定位流排版方式

相对定位

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

1. 相对定位是不脱离标准流的，会继续在标准流中占据一份空间；
2. 需要配合其他的属性一起使用，相对于自己以前在标准流中的位置来移动；
   应用场景：
3. 用于对元素进行微调；
   例如：当input和img的顶部对不齐时
4. 配合绝对定位来使用。

绝对定位

绝对定位就是相对于body来定位（不一定是相对于body）
规律：

1. 默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。
2. 如果一个绝对定位的元素有祖先元素，并且祖先元素，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
   （只要是这个绝对定位元素的祖先元素都可以；定位流指的是绝对定位、相对定位、固定定位，只有静态定位不行）
3. 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个元素为参考点（就近原则）
   注意点：
4. 绝对定位的元素是脱离标准流的；
5. 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。
6. 如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的高度和宽度作为参考点的；
7. 一个绝对定位的元素会忽略祖先元素的padding。

应用场景：
在企业开发中，不会单独使用相对定位或者绝对定位。
单独使用相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流当中占用一份空间，所以不利于布局界面。
单独使用绝对定位的弊端：
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化。
绝对定位和相对定位结合使用：子绝父相
子元素用绝对定位，父元素用相对定位
如何让绝对定位的元素水平居中？
只需要设置绝对定位的元素的left：50%；
然后在设置绝对定位元素的margin-left：—元素宽度的一半px；
例如：

固定定位

固定定位和背景关联方式相类似。
背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点：
1.固定定位的元素是脱离标准流的，不会占用标准流的空间；
2.固定定位和绝对定位一样，不区分行内/块级/行内块级元素。
3.IE6不支持固定定位。
应用场景：

1. 导航条的穿透效果
2. 广告
3. 底部返回顶部按钮

静态定位

默认元素就是静态定位。

z-index属性

默认情况下所有元素都有一个默认的z-index属性，取值是0。
作用：
z-index属性是专门用于控制定位流元素的覆盖关系的。

注意点：

1. 默认情况下，定位流的元素会覆盖标准流的元素；
2. 默认情况下，定位流的元素后面编写的会覆盖前面编写的；
3. 如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大谁就会显示在上面；
4. 从父现象：如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面；如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面。