CSS详解（三）–网页布局篇

接上篇 CSS 详解（二）-CSDN 博客

一、传统网页布局的三种方式

1、标准流（文档流）

标准流是指 HTML 元素按照它们在 HTML 文档中出现的顺序自上而下依次排列的布局方式。每个元素占据页面的一定空间，元素之间可以通过 CSS 属性来控制它们的布局和样式

例子：

在这个示例中，header、nav、section、aside 和 footer 元素按照它们在 HTML 文档中的顺序依次排列，形成了一个典型的标准流布局。

1.1 标准流布局的一些特点 

1.1.1 垂直排列：元素在垂直方向上一个接一个地排列，每个元素占据一定的高度，前一个元素的底部与后一个元素的顶部相邻。

1.1.2 自然文档流：元素在文档中出现的顺序决定了它们在页面中的位置，即元素按照它们在 HTML 文档中的顺序布局。

1.1.3 自动换行：如果页面的宽度不足以容纳所有元素，则元素会自动换行到下一行显示，保证页面的内容不会溢出到页面之外。

1.1.4 元素大小：元素的大小默认由其内容决定，也可以通过 CSS 设置宽度和高度来调整。

2、浮动布局

浮动布局通过将元素浮动到页面的左侧或右侧来实现多列布局，常用于创建多栏布局或实现图文混排等效果。浮动的元素会脱离标准流，并且可以通过 CSS 属性来控制它们的位置和宽度。

语法：float:left; 左浮动       float:right; 右浮动

在这个示例中，.column 类的元素被设置为浮动到左侧，每个元素占据页面宽度的 30%，并且通过添加一个清除浮动的元素来确保布局的正确性。

2.1 浮动能解决什么问题

1、让多个块元素水平排列一行；彼此之间没有缝隙。

2、让两个块元素一个左对齐，一个右对齐。

2.2 浮动特性

1. 脱标  — 不占位置。

2. 浮动元素自己原来的位置会漏给后面占位置的标流。

添加之前和之后对比

3. 浮动元素 一行显示，并且沿着顶端对齐  — 如果父亲装不下浮动的元素，就会另起一行继续沿着顶端对齐。

4. 任何元素都可以添加浮动，加了浮动的元素，再也不需要 display 转换，直接设置宽高可以生效  — 浮动有类似于行内块的特性。

在这个例子中，图片被左浮动，文字围绕在图片的右侧，实现了图文混排的效果。

5. 一个技巧  —    浮动的元素经常搭配一个标流的父亲使用  — 为了约束浮动的元素。

在这个例子中，float-child 元素是一个浮动元素，normal-child 元素是一个标准流元素。通过给父元素 parent 添加 overflow: hidden; 样式，可以约束浮动元素，使其不会导致父元素塌陷。

6. 排版技巧  —   子元素浮动；一浮全浮动。

在这个例子中，只有第一个子元素 float-child 设置了浮动属性，但是第二个和第三个子元素也会跟随浮动。因此，一浮全浮动的概念就是，一个元素浮动，其后的元素都会跟随浮动。

7. 浮动只会影响当前和后面占位置的标准流，不会影响前面的。

在这个例子中，.float-child 是一个浮动元素，而 .normal-child 是标准流元素。

由于 .float-child 是第二个子元素，它只会影响其后的标准流元素。因此，即使它浮动了，但它之前的 .normal-child 元素仍然会保持在原来的位置，不受浮动元素的影响。

这就是浮动只会影响当前和后面占位置的标准流，不会影响前面的的示例。

8. 加了浮动的元素，不会产生外边距合并问题。

在这个例子中，.normal-child 元素具有 margin-top: 20px; 的外边距，而 .float-child 元素是浮动元素。

即使 .normal-child 元素具有外边距，但由于浮动元素不会与其他元素发生外边距合并问题，所以这两个元素之间的外边距不会合并。

这个例子说明了即使浮动元素存在，外边距合并问题也不会发生。

9. 浮动的元素因为脱标    

设置 margin: 左右 auto; 无效   但是单独使用是可以，例如：margin-left:50px;

在这个例子中，.float-child 元素是一个浮动元素，我们想要让它水平居中，但是直接使用 margin: 0 auto; 是无效的。相反，我们分别设置了左边距为 50px（或者任何其他值），右边距为 auto，这样就可以实现水平居中的效果。

10. 浮动的元素不会超过父亲的边框，也不会盖住父亲的 padding

在这个例子中，.parent 元素设置了宽度为 300px，高度为 200px，并且有 20px 的 padding。.float-child 浮动元素的宽度和高度都是 100px，红色背景。这是因为浮动元素会尽量在父元素的边界内部进行布局，不会超出父元素的边框范围。

11. 浮动元素可以压住后面的标流盒子，但是压不住盒子里面文字和插入的图片。

在这个示例中，.container 是容器元素，宽度为 300px，高度为 200px，背景色为浅灰色。里面包含了一个浮动元素 .float-child 和一个标准流盒子 .normal-child。

浮动元素 .float-child 的宽度和高度都是 100px，背景色为红色。标准流盒子 .normal-child 设置了左外边距，以便留出浮动元素的空间，并设置了内边距和背景色。

3、定位布局

定位布局通过设置元素的定位属性（如position: relative、position: absolute、position: fixed）来控制元素在页面中的位置和布局。通过指定元素相对于其包含块的位置或相对于浏览器窗口的位置，可以实现精确的布局效果。

在这个示例中，.container 类的元素被设置为相对定位，而 .centered 类的元素被设置为绝对定位，并且通过设置top: 50%、left: 50% 和transform: translate(-50%, -50%) 来实现居中对齐的效果。

二、清除浮动

清除浮动是为了解决在 HTML 和 CSS 中可能出现的浮动元素导致的布局问题。在网页设计中，当一个元素设置了浮动后，它会脱离文档流，导致父元素的高度无法被正确计算，从而可能导致布局错乱或重叠的情况。

为了解决这个问题，可以在父元素中使用清除浮动的技巧。清除浮动的方法有多种，包括添加一个空的 div 元素并设置清除浮动的样式，或者使用 CSS 伪类 :after 来清除浮动。

after 伪元素法

.clearfix::after{
  content:'';
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
}
.clearfix{*zoom:1;}


  
浮动元素
  
浮动元素

本质   — 不是真的把浮动效果清除；而是清除子盒子浮动后对于后面盒子的影响。

双伪元素法 

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {clear: both;}

        .clearfix {*zoom: 1;}

额外标签法

1. 给浮动的孩子 — 最后一个孩子后面，添加一个块元素。

2. 然后使用  `clear:both;`  清除浮动的影响

给父元素添加 overflow

`overflow:hidden;`

三、为什么需要定位

1. 摆放盒子到任意位置

2. 固定在屏幕中的某一个位置

3. 可以压住任何其它盒子

四、定位组成

定位 == 定位模式 + 边偏移。

1. 定位模式：指定元素在文档流中的定位方式。常见的定位模式有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。

2. 边偏移：边偏移是相对于元素所在的包含块（通常是父元素）来定位元素的。偏移量可以通过设置 left、right、top 和 bottom 属性来实现。

组合起来，定位模式和边偏移共同决定了元素在页面上的准确位置。

五、相对定位 relative

1. 是否占有位置：

   相对定位的元素在页面布局中仍然占据着原本的位置，它仅仅在原本的位置上做了位移，但是不会影响其他元素的布局。

2. 位移：

   相对定位的元素会根据指定的偏移量相对于它在文档流中的原始位置进行移动。通常使用 top、right、bottom 和 left 属性来设置偏移量。

3. 相对定位与margin:auto：

   相对定位的元素可以通过设置 margin:auto 来使其在其容器中水平居中，但这种情况下，相对定位的元素会相对于其容器进行居中，而不是相对于自身的原始位置。

4. 相对定位没有类似于行内块特性：

   相对定位的元素不具有类似于行内块元素的特性。它仅仅是对自身的原始位置进行位移，而不会改变元素的显示模式

在这个示例中，.container 是一个相对定位的容器。其中包含了一个相对定位的 .relative-box 元素和一个普通流的 .normal-box 元素。

• .relative-box 相对于其原始位置向下和向右各偏移了 20px，所以它会出现在比原本位置稍微偏移的地方。
• .normal-box 是一个普通流元素，位于相对定位元素的下方，但没有设置偏移量。

这个示例中，.relative-box 是相对定位的元素，它占据着页面布局中的位置，但在页面中向下和向右移动了一定距离，而 .normal-box 则是普通流元素，没有任何偏移。

六、绝对定位 absolute

1. 没有父级或者父级别没有定位：

   如果一个元素设置了绝对定位，但其父级元素没有设置定位（即父级元素的 position 属性为 static，即默认值），那么该绝对定位的元素将会相对于文档的最外层容器（通常是  元素）进行定位。

2. 如果父级有定位：

   如果父级元素设置了定位（例如 position: relative;），那么绝对定位的元素会相对于其最近一级的带有定位的父级元素进行定位，而不是相对于文档流进行定位。

3. 完全脱标：

   绝对定位的元素完全脱离了文档流，不再占据文档中的空间，即它不会影响其他元素的布局，因此也不会留下任何空白或空间。它的位置完全由 top、right、bottom 和 left 属性决定。

在这个示例中，.container 是一个相对定位的容器。其中包含了一个相对定位的 .relative-parent 父级元素和一个绝对定位的 .absolute-child 子元素，以及一个普通流的 .normal-box 元素。

• .relative-parent 是相对定位的元素，其内部包含了一个绝对定位的 .absolute-child 子元素。
• .absolute-child 绝对定位的子元素相对于其父级元素 .relative-parent 进行定位，而不是相对于文档流。因此，它会相对于 .relative-parent 左上角的位置偏移 20px。
• .normal-box 是一个普通流元素，没有任何定位，位于相对定位元素的下方，但没有任何偏移。

在这个示例中，.absolute-child 绝对定位的元素脱离了文档流，不占据文档中的空间，而其位置完全由 top 和 left 属性决定。

 七、子绝父相

用于实现子元素相对于父元素定位的效果。在这种布局中，父元素通常采用相对定位（position: relative），而子元素采用绝对定位（position: absolute）。

• 父级（position: relative）：父级元素设置了相对定位，这意味着它在文档流中占据位置，并且作为定位上下文（positioning context）来影响绝对定位的子元素。父级元素的位置偏移（top、right、bottom、left）会影响到子元素的定位。

• 子级（position: absolute）：子级元素设置了绝对定位，这意味着它脱离了文档流，并且可以相对于父级元素的位置进行定位。子级元素的位置偏移是相对于最近的已定位祖先元素（position 属性不是 static）进行定位的。如果没有已定位的祖先元素，则子级元素的位置偏移相对于初始包含块。

在这个例子中，.parent 元素被设置为相对定位，.child 元素被设置为绝对定位。.child 元素相对于.parent 元素的左上角偏移了 50px。这样，无论.parent 元素如何移动，.child 元素都会保持相对于.parent 元素定位的位置。

八、固定定位

用于将元素固定在视口中的特定位置，不受页面滚动影响。

1. 是否脱标：是的，固定定位的元素脱离了文档流，不会影响其他元素的布局，并且不占据页面中的空间。即使页面滚动，固定定位的元素也会始终保持在视口中指定的位置。

2. 位移参考：固定定位的元素的位置参考是相对于浏览器窗口而不是文档流。因此，无论页面如何滚动，元素都会保持相对于浏览器窗口的位置不变。

在这个例子中，.fixed-element 元素被设置为固定定位，并且相对于浏览器窗口的左上角偏移了 50px。即使页面滚动，该元素也会始终保持在浏览器窗口的左上角位置，不随页面滚动而移动。

 固定定位盒子：固定版心右侧

固定定位盒子并将其放置在固定版心右侧的技巧是一种常见的网页布局技术。

步骤：

1. 将元素移动到浏览器的一半位置：通过设置元素的 left 属性为 50%，将其水平居中于浏览器窗口。这样元素的左侧边缘就位于浏览器窗口的中心位置。

2. 利用 margin-left 实现固定版心右侧对齐：通过将元素的 margin-left 属性设置为固定版心宽度的一半，实现将元素向右移动，使其右边缘对齐于固定版心的右侧。

   在这个示例中，.fixed-box 元素被设置为固定定位，并通过设置 top 和 left 为 50%，利用 transform 属性将其移动到浏览器窗口的中心位置。然后，.fixed-box 元素的 margin-left 属性被设置为固定版心宽度的一半，这样就实现了将其右侧边缘对齐于固定版心的右侧。

九、粘性定位 sticky 

一种介于相对定位和固定定位之间的定位方式，它允许元素在滚动到特定位置时表现为固定定位，但在未滚动到该位置时则表现为相对定位。

1. 位移：粘性定位的元素是相对于其最近的具有滚动机制的祖先元素（例如具有 overflow: auto; 或 overflow: scroll; 属性的祖先元素）进行定位，而不是相对于浏览器窗口。一旦元素到达指定的滚动位置，它就会固定在那里，不再滚动，直到其父元素的底部滚动出视图。

2. 不脱标：与绝对定位不同，粘性定位的元素在页面布局中仍然占据位置，不会脱离文档流。

3. 添加偏移量：要使用粘性定位，必须添加至少一个偏移量（top、bottom、left、right 中的至少一个）。这个偏移量决定了元素在粘性定位开始生效时距离其定位的边缘的距离。

在这个示例中，.sticky-element 是一个粘性定位的元素，它的 top 值为 20px，表示在距离其父元素顶部 20px 的位置开始生效粘性定位。当页面滚动时，一旦 .sticky-element 到达顶部偏移量的位置，它将固定在那里，直到其父元素的底部滚动出视图。同时，.content 区域的内容可以滚动，但 .sticky-element 会在滚动过程中保持在视图中。

十、定位的堆叠顺序    z-index

当涉及到 CSS 中的定位元素的堆叠顺序时，z-index 属性非常重要。

1. z-index 只能用于定位的元素：只有被定位的元素（即设置了 position: relative;, position: absolute;, position: fixed;, 或 position: sticky;）才能使用 z-index 属性来控制其堆叠顺序。对于未定位的元素，z-index 不起作用。

2. 定位的元素默认堆叠顺序：按照文档流中元素的书写顺序，后面定位的元素会覆盖在前面定位的元素上面。也就是说，后面出现的定位元素会覆盖在前面的定位元素之上。

3. z-index 值：z-index 的值可以是整数、负整数或者 auto。它决定了元素的堆叠顺序，值越大的元素越靠前。如果多个元素具有相同的 z-index 值，则它们的堆叠顺序由它们在文档流中的顺序决定。需要注意的是，z-index 值不能带单位。

 在这个示例中，.box1 元素位于文档流中靠前的位置，但它的 z-index 值比 .box2 元素低，因此 .box2 元素会覆盖在 .box1 元素之上，尽管 .box1 元素在文档流中更靠前。

十一、绝对定位盒子水平居中

在绝对定位的情况下，margin: auto; 无法实现水平居中。但可以通过设置左右偏移和负边距的方法来实现水平居中，具体步骤如下：

1. 先走自己父级盒子大小的一半：使用 left: 50%; 将盒子的左边缘定位到父级容器的水平中心位置。

2. 再使用 margin 往回走自己宽的一半：通过设置负的左边距（margin-left）值为自身宽度的一半，使得盒子向左移动自身宽度的一半，从而实现水平居中。

 在这个示例中，.box 元素通过绝对定位相对于 .container 父级容器进行定位。通过设置 left: 50%;，它的左边缘会先走到父级容器的水平中心位置，然后通过 transform: translate(-50%, -50%); 将自身向左移动自身宽度的一半，实现水平居中效果。

十二、定位可改变 display 属性

当给一个元素应用了浮动（float）、绝对定位（position: absolute;）或固定定位（position: fixed;）时，会改变这个元素的 display 属性，使其具有类似于行内块元素的特性。具体来说，这些定位属性会使元素脱离了正常的文档流，并且不再按照块级或行内元素的方式表现，而是具有了类似行内块元素的特性。

这意味着，即使原本是块级元素或行内元素，一旦应用了浮动、绝对定位或固定定位，就可以直接设置其宽度和高度，而不需要再通过改变 display 属性来转换成行内块元素。

这个示例中，四个 div 元素都具有不同的定位方式。无论是浮动、绝对定位还是固定定位，它们都可以直接设置宽度和高度，而无需转换为行内块元素。

十三、外边距合并解决方案

在使用浮动（float）、绝对定位（position: absolute;）、固定定位（position: fixed;）时，盒子不会出现外边距合并问题。这是因为这些定位方式会使得盒子脱离了文档流，不再受到外边距合并的影响。

然而，在使用这些定位方式时，需要注意如果盒子中没有内容，它至少需要保留一个宽度，否则可能会出现一些意外的布局问题，特别是在一些旧版浏览器中。

在这个示例中，.float、.absolute、.fixed 这三个盒子分别应用了浮动、绝对定位、固定定位。它们都设置了外边距，但不会出现外边距合并问题。同时，它们都设置了宽度和高度，确保即使没有内容，也不会导致布局混乱。