css布局和定位

在Web开发中，CSS布局和定位是非常重要的技能。在这篇博客中，我们将深入探讨CSS布局和定位的概念、基本技术和最佳实践。

**CSS布局基础**
├── 盒模型
│   ├── 内边距
│   │   ├── padding
│   │   ├── padding-top
│   │   ├── padding-right
│   │   ├── padding-bottom
│   │   └── padding-left
│   ├── 外边距
│   │   ├── margin
│   │   ├── margin-top
│   │   ├── margin-right
│   │   ├── margin-bottom
│   │   └── margin-left
│   └── 宽度和高度
│       ├── width
│       ├── height
│       ├── max-width
│       ├── min-width
│       ├── max-height
│       └── min-height
│       示例:
│       .box {
│         width: 100px;
│         height: 100px;
│         background-color: red;
│         margin: 10px;
│         padding: 20px;
│         box-sizing: border-box;
│       }
├── 浮动和清除浮动
│   ├── 浮动
│   │   ├── float
│   │   ├── clear
│   │   └── clearfix
│   ├── 清除浮动
│   │   └── clear
│   └── 示例:
│       .box1 {
│         float: left;
│         width: 100px;
│         height: 100px;
│         background-color: red;
│       }
│       .box2 {
│         float: left;
│         width: 100px;
│         height: 100px;
│         background-color: blue;
│       }
│       .clearfix::after {
│         content: "";
│         display: table;
│         clear: both;
│       }
├── 定位
│   ├── 相对定位
│   │   ├── position
│   │   ├── top
│   │   ├── right
│   │   ├── bottom
│   │   └── left
│   ├── 绝对定位
│   │   ├── position
│   │   ├── top
│   │   ├── right
│   │   ├── bottom
│   │   └── left
│   ├── 固定定位
│   │   ├── position
│   │   ├── top
│   │   ├── right
│   │   ├── bottom
│   │   └── left
│   └── 示例:
│       .box {
│         position: relative;
│         width: 200px;
│         height: 200px;
│         background-color: red;
│         margin: 50px;
│       }
│       .box1 {
│         position: absolute;
│         top: 50px;
│         right: 50px;
│         width: 100px;
│         height: 100px;
│         background-color: blue;
│       }
│       .box2 {
│         position: fixed;
│         bottom: 50px;
│         right: 50px;
│         width: 100px;
│         height: 100px;
│         background-color: green;
│       }
├── 弹性布局
│   ├── 容器属性
│   │   ├── display
│   │   ├── flex
│   │   ├── flex-direction
│   │   ├── justify-content
│   │   ├── align-items
│   │   └── align-content
│   ├── 项目属性
│   │   ├── order
│   │   ├── flex-grow
│   │   ├── flex-shrink
│   │   ├── flex-basis
│   │   ├── align-self
│   │   └── flex
│   └── 示例:
│     .container {
│      display: flex;
│      flex-direction: row;
│      justify-content: center;
│      align-items: center;
│      height: 300px;
│      border: 1px solid black;
│      }
│      .box1 {
│      flex: 1 0 100px;
│      height: 100px;
│      background-color: red;
│      margin: 10px;
│      }
│     .box2 {
│      flex: 1 0 150px;
│      height: 150px;
│      background-color: blue;
│      margin: 10px;
│      }
├── 网格布局
│   ├── 容器属性
│   │   ├── display
│   │   ├── grid-template-rows
│   │   ├── grid-template-columns
│   │   ├── grid-template-areas
│   │   ├── grid-row-gap
│   │   ├── grid-column-gap
│   │   └── grid-gap
│   ├── 项目属性
│   │   ├── grid-row-start
│   │   ├── grid-row-end
│   │   ├── grid-column-start
│   │   ├── grid-column-end
│   │   ├── grid-row
│   │   ├── grid-column
│   │   ├── grid-area
│   │   ├── justify-self
│   │   └── align-self
│   └── 示例:
│      .container {
│      display: grid;
│      grid-template-columns: 100px 100px 100px;
│      grid-template-rows: 100px 100px;
│      grid-gap: 10px;
│      border: 1px solid black;
│      }
│      .box1 {
│      grid-row: 1 / 3;
│      grid-column: 1 / 2;
│      background-color: red;
│      }
│      .box2 {
│      grid-row: 1 / 2;
│      grid-column: 2 / 4;
│      background-color: blue;
│      }
│      .box3 {
│      grid-row: 2 / 3;
│      grid-column: 2 / 3;
│      background-color: green;
│      }
│      .box4 {
│      grid-row: 2 / 3;
│      grid-column: 3 / 4;
│      background-color: yellow;
│      }
├── 多列布局
│   ├── 列容器属性
│   │   ├── column-count
│   │   ├── column-width
│   │   ├── column-gap
│   │   ├── column-rule
│   │   └── column-rule-width
│   └── 示例:
│    .container {
│    column-count: 3;
│    column-width: 100px;
│    column-gap: 20px;
│    column-rule: 1px solid black;
│     }
│    p {
│    margin-bottom: 0;
│    }

CSS盒模型

在开始CSS布局和定位之前，要先了解CSS盒模型。盒模型是CSS中非常重要的概念，描述了Web页面中的每个元素如何被组织和渲染。

CSS盒模型由四个部分组成：内容区、内边距区、边框区和外边距区。这四个部分的大小和位置可以通过CSS样式进行控制。了解CSS盒模型是理解CSS布局和定位的基础。
前面的文章有讲述 CSS盒模型详解

一、CSS布局基础

CSS布局是指将Web页面中的元素放置在正确的位置上。在CSS中，有几种基本的布局方式，包括：

• 流布局
  流布局是网页最基本的布局方式，它是默认的页面布局方式。网页中的元素默认按照从左到右、从上到下的顺序排列，每个元素的位置取决于前面元素的大小和位置。

  流布局的优点是简单易用，不需要特别的布局代码，能够快速地实现页面布局。但是缺点也很明显，布局随着浏览器窗口的大小变化而变化，不具有响应式的特点。

  <div class="container"><div class="box">1</div><div class="box">2</div><div class="box">3</div>
  </div>
  

  .container {width: 100%;
  }
  .box {width: 33.33%;height: 100px;float: left;
  }
  

• 浮动布局
  浮动布局是一种比较常用的页面布局方式，它通过设置元素的浮动属性来实现页面布局。浮动元素会脱离文档流，但仍然会占据原来的位置，使得其他元素围绕它布局。

  “脱离文档流”
  是指某个元素不再遵循普通文档流中的排列规则，而是具有了自己独立的排列方式。这种情况下，元素的位置不再受到父元素或兄弟元素的影响。
  常见的脱离文档流的元素包括使用了float浮动属性的元素、使用了position: absolute或position: fixed属性的元素、以及使用了display: inline-block属性的元素。
  脱离文档流有时可以用来实现一些特殊的效果，但是过度使用会导致页面布局混乱、难以维护和扩展。因此，在实际开发中，应该谨慎使用脱离文档流的元素，并尽量避免使用它们来实现基本的布局结构。

  比如书放在书架上、衣服放在衣柜里等等。这些东西的位置是有规律、有顺序的，它们不会随意地乱放。
  类比到网页布局中，我们可以把网页看成一个房间，而网页中的元素就是我们家里的东西。这些元素通常都是按照一定的顺序排列在页面上，就像我们把东西放在家里一样。但是有些元素可能会“逃离”原本规定的位置，就像我们家里有时会有一些东西不在原本的位置上。
  这些“逃离”了原本规定位置的元素，就是“脱离文档流”的元素。它们可以像自己的主人一样，随意地移动和定位，而不受其他元素的限制。

  浮动布局的优点是灵活性较高，能够实现一些复杂的页面布局效果。但是它也存在一些问题，例如在没有清除浮动时会导致布局混乱，以及在实现响应式布局时需要写很多媒体查询代码。

  <div class="container"><div class="box">1</div><div class="box">2</div><div class="box">3</div>
  </div>
  

  .container {width: 100%;
  }.box {width: 33.33%;height: 100px;float: left;
  }

• 弹性布局
  弹性布局是一种新兴的页面布局方式，它通过设置元素的弹性属性来实现页面布局。弹性布局可以让元素自适应容器的大小，能够轻松实现响应式布局效果。

  弹性布局的优点是能够快速实现响应式布局，不需要写很多的媒体查询代码。但是它也存在一些问题，例如在实现复杂布局时可能需要较多的 CSS 代码

  .container {width: 100%;display: flex; /* 设置为弹性容器 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
  }
  

  这样，我们就将 .item 元素水平居中且垂直居中了。如果我们需要将 .item 元素按照一定的比例分布，可以使用 flex-grow、flex-shrink 和 flex-basis 属性。例如：

  .item {flex-grow: 1; /* 按比例分布 */flex-shrink: 1;flex-basis: 0;
  }
  

  这里的 flex-grow 属性表示按照比例分配剩余空间，flex-shrink 属性表示在空间不足时缩小元素，flex-basis 属性则表示元素的基础大小。

  以下是一个简单的弹性布局实例，其中 .container 为弹性容器，.item 为弹性项：

  <div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>
  

  .container {display: flex;justify-content: space-between; /* 水平分布 */align-items: center; /* 垂直居中 */
  }.item {flex-grow: 1; /* 按比例分布 */flex-shrink: 1;flex-basis: 0;height: 50px;background-color: #ccc;margin: 10px;
  }
  

  述例子中，.container 使用 justify-content: space-between 将 .item 元素水平分布，并使用 align-items: center 将它们垂直居中。同时，.item 使用 flex-grow: 1 按照一定比例分配剩余空间，并设置了固定的高度和背景颜色。

• 网格布局
  网格布局是一种基于grid的布局方式，它使得开发者可以将页面划分为行和列的网格，从而更容易地创建复杂的布局。在网格布局中，您可以通过指定元素所在的网格单元格来控制元素的位置和大小。网格布局是一种强大的布局方式，非常适合用于创建具有复杂结构的网站和应用程序。

  在网格布局中，我们需要使用 grid-container 和 grid-item 两个关键字来定义网格容器和网格项。网格容器通过设置 display: grid 来指定为网格布局，同时使用 grid-template-columns 和 grid-template-rows 属性来定义网格的行和列。网格项则通过设置 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来指定在网格中的位置。

  下面我们来看一个简单的网格布局实例：

  <div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
  </div>
  

  .grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 100px);gap: 10px;
  }.grid-item {background-color: #ccc;padding: 20px;
  }
  

  上述代码中，我们通过 display: grid 将 .grid-container 容器设置为网格布局，使用 grid-template-columns 和 grid-template-rows 属性将网格划分为 3 行 3 列，并使用 repeat 函数来指定重复的单元格大小。使用 gap 属性来设置单元格之间的间距。

  在 .grid-item 中，我们设置了背景颜色和内边距，这样网格项就能够显示出来了。我们可以根据需要对 .grid-item 进行定位，例如：

  .grid-item:nth-child(1) {grid-row-start: 1;grid-row-end: 3;grid-column-start: 1;grid-column-end: 2;
  }.grid-item:nth-child(2) {grid-row-start: 1;grid-row-end: 2;grid-column-start: 2;grid-column-end: 4;
  }.grid-item:nth-child(3) {grid-row-start: 1;grid-row-end: 2;grid-column-start: 4;grid-column-end: 5;
  }.grid-item:nth-child(4) {grid-row-start: 2;grid-row-end: 3;grid-column-start: 2;grid-column-end: 3;
  }.grid-item:nth-child(5) {grid-row-start: 2;grid-row-end: 3;grid-column-end: 3;}
  

  这段代码设置了第5个网格元素跨越两行，从第2行开始，跨越两列，从第1列开始，直到第3列结束。在实际应用中，我们可以通过这种方式灵活地控制网格元素的布局和位置。

传送门：这里有详细且全面的弹性布局使用方案
传送门：这里有详细且全面的网格布局使用方案

二、CSS定位属性

除了上述基本布局方式之外，CSS还提供了几种定位属性，可以让开发者更加精细地控制元素的位置和尺寸。其中包括：相对定位、绝对定位、固定定位和粘性定位等。其中，相对定位、绝对定位和固定定位是最常用的定位方式。

• 相对定位
  相对定位通过设置 position: relative 来实现。相对定位的元素在页面上的位置不会改变，但是可以通过 top、right、bottom、left 属性来相对移动元素。
  示例代码：

  .relative {position: relative;top: 10px;left: 20px;
  }
  

  上述代码中，.relative 元素通过设置 position: relative 变为相对定位元素，然后通过设置 top 和 left 属性将元素向下和向右移动。

• 绝对定位
  绝对定位通过设置 position: absolute 来实现。绝对定位的元素相对于其最近的非静态（非 position: static）祖先元素进行定位，如果没有非静态祖先元素，则相对于文档根元素进行定位。因此，绝对定位元素的位置会随着页面滚动而改变。
  示例代码：

  .absolute {position: absolute;top: 100px;left: 50px;
  }
  

  上述代码中，.absolute 元素通过设置 position: absolute 变为绝对定位元素，然后通过设置 top 和 left 属性将元素定位到页面上的某个位置。

• 固定定位
  固固定定位通过设置 position: fixed 来实现。固定定位的元素相对于浏览器窗口进行定位，不会随着页面滚动而改变。因此，固定定位元素常用于创建悬浮效果或固定的导航栏。
  示例代码：

  .fixed {position: fixed;top: 20px;right: 20px;
  }
  

  上述代码中，.fixed 元素通过设置 position: fixed 变为固定定位元素，然后通过设置 top 和 right 属性将元素定位到页面右上角。

需要注意的是，相对定位、绝对定位和固定定位元素的定位位置都是相对于其最近的定位父元素，如果没有定位父元素，则相对于文档根元素进行定位。

三、CSS最佳实践

除了上述基本技术之外，CSS还有一些最佳实践可以帮助开发者更好地掌握CSS布局和定位技术，包括：

1 · 使用合适的选择器
选择器是CSS中非常重要的概念，可以帮助开发者更好地控制页面中的元素。使用合适的选择器可以减少代码量并提高代码的可维护性。

2 · 避免使用魔法数字
在编写 CSS 样式时，避免使用魔法数字是一个很好的习惯。所谓魔法数字，是指在样式表中直接使用具体的数值，而不是使用命名的变量或常量。

例如，下面的代码使用了魔法数字：

/* 魔法数字 */
p {font-size: 16px;line-height: 1.5;
}

这样做的问题是，当需要修改字号或行高时，需要在样式表中逐一查找所有使用了这个数字的地方，非常不便于维护。

相反，应该尽可能使用命名的变量或常量，例如：

/* 命名的变量 */
:root {--font-size: 16px;--line-height: 1.5;
}/* 使用变量 */
p {font-size: var(--font-size);line-height: var(--line-height);
}

这样做的好处是，可以在一个地方统一定义变量，需要修改时只需要修改一次，所有使用了这个变量的地方都会自动更新。这也可以提高代码的可读性和可维护性。

总之，避免使用魔法数字是一个良好的 CSS 编写习惯，应该尽可能使用命名的变量或常量来代替具体的数值。

3 · 使用现代的CSS布局技术
随着CSS不断发展，出现了许多新的布局技术，如网格布局和弹性布局。这些新的技术可以帮助开发者更加轻松地创建复杂的布局，并且能够更好地支持响应式设计。

学习 CSS 框架和库的文档和示例。CSS 框架和库通常提供了丰富的样式和组件，可以学习它们的使用和实现，了解最佳实践和常见设计模式。

参考 CSS 设计网站和博客。许多网站和博客都有优秀的 CSS 布局和设计，可以从中获取灵感和学习经验。一些著名的 CSS 设计网站和博客包括 Awwwards、Codrops、Smashing Magazine 等。

查看 CSS 设计和布局的示例库。有许多 CSS 示例库可以帮助我们了解 CSS 的实现方式和效果。例如，CodePen 和 CSS Zen Garden 都是优秀的 CSS 示例库，可以参考其中的代码和设计。

学习 CSS 规范和最佳实践。了解 CSS 规范和最佳实践可以帮助我们避免一些常见的 CSS 错误和问题，例如选择器滥用、命名规范等。W3C CSS 规范和 Google 的 CSS 最佳实践都是值得学习的资源。

4 · 优化性能
在使用CSS布局和定位时，需要注意性能问题。过多的定位和浮动可能会导致页面加载速度变慢，因此需要尽可能减少定位和浮动的使用。另外，使用CSS预处理器和压缩工具可以帮助减小CSS文件的大小，提高页面加载速度。

CSS 预处理器是一种将类似编程语言的语法转换为标准 CSS 代码的工具。它们通常提供了更多的语法特性，例如变量、嵌套规则、函数和混合等。使用 CSS 预处理器可以让 CSS 代码更加简洁、易于维护和重用。常见的 CSS 预处理器有 Sass、Less 和 Stylus 等。

压缩工具则是一种可以删除 CSS 文件中不必要空格、注释、换行符和其他无效字符的工具。这些无效字符在实际使用中不会影响 CSS 样式的渲染，但会增加文件大小，降低页面加载速度。使用 CSS 压缩工具可以将 CSS 文件压缩成更小的体积，从而提高页面加载速度。常见的 CSS 压缩工具有 CSSNano、clean-css 等。

同时，也可以使用代码拆分、懒加载等技术来优化页面加载速度。代码拆分可以将代码分成多个部分，按需加载，从而减少首次加载时间。懒加载则是一种延迟加载的技术，只有在需要时才加载相关资源，例如图片、视频等。

5 · 充分利用CSS框架和库
除了原生的CSS技术之外，还有许多CSS框架和库可供使用。这些框架和库包含了大量的CSS样式和布局模板，可以帮助开发者更快速地创建页面布局和样式。常见的CSS框架和库包括Bootstrap、Foundation和Semantic UI等。

码的重复和工作量。这些框架和库提供了大量的样式和组件，包括网格系统、排版、按钮、表单元素、响应式设计等，可以让我们轻松实现常见的页面布局和功能。

一些常见的 CSS 框架和库包括 Bootstrap、Foundation、Semantic UI、Materialize 等。它们的优点包括：

• 丰富的组件和样式库，可以快速搭建网站，并且可以自定义风格和样式；
• 兼容性良好，可以在各种浏览器和设备上运行
• 稳定性好，经过了大量的测试和使用，已经得到了验证。

同时，使用 CSS 框架和库也存在一些缺点：

• 框架和库的代码通常比较庞大，会增加页面的加载时间；
• 样式和组件的复杂性可能会限制一些自定义样式和布局；
• 如果使用过于普遍的组件和样式，可能会导致网站与其他网站看起来相似。

充分利用 CSS 框架和库可以提高页面开发的效率，并且可以减少代码的重复和工作量。但需要注意选择合适的框架和库，并且需要谨慎使用，避免影响网站的性能和设计。

总结：

CSS布局和定位是Web前端开发中非常重要的技术，它们决定了页面元素的位置和尺寸。基本的CSS布局方式包括盒模型、浮动和清除浮动、定位等。除此之外，还有一些高级的CSS布局技术，如弹性布局和网格布局。在使用CSS布局和定位时，需要注意一些最佳实践，如使用合适的选择器、避免使用魔法数字、优化性能等。最后，参考其他优秀的CSS布局和设计，也是一种很好的学习方式。