CSS布局|青训营笔记

THIM
106 阅读3分钟

常规布局流

  • 常规布局流（Normal Flow）是 HTML 和 CSS 的基本布局方式
  • 描述了在没有定位或浮动的元素时，HTML 元素在文档中的默认排列方式

总结： 按照 HTML 代码的书写顺序排列元素，每个元素占据一行，且元素之间垂直排列

  • 在常规布局流中，每个元素都有自己的盒模型（Box Model）

盒子模型：

image.png

包括内容区域、内边距、边框和外边距

  • 元素的宽度通常是其内容宽度加上内边距和边框的宽度，而元素的高度是其内容高度加上内边距和边框的高度

怎么用 常规布局流

  1. 垂直布局：在常规布局流中，每个元素都占据一行，并垂直排列。通过设置元素的外边距（margin）和内边距（padding），可以控制元素之间的距离和元素内容的间距
  2. 水平布局：通过设置元素的 display 属性为 inline 或 inline-block，可以让元素水平排列。使用 float 属性可以让元素沿着父元素的左侧或右侧浮动，并排列在一行
  3. 等分布局：通过将父元素的宽度均分为多个子元素的宽度，可以实现等分布局

块级格式化上下文

  • 块级格式化上下文（Block Formatting Context，BFC）是 Web 页面中一个重要的 CSS 渲染概念
  • BFC 是一种页面渲染的抽象概念，它并不存在于 DOM 树中，而是根据 CSS 规范计算得出的

简称BFC

怎么用

  1. 根元素（html）本身就是一个 BFC
  2. 一个元素的 overflow 属性被设置为非 visible 的值（如 hidden、scroll、auto）
  3. 一个元素的 display 属性被设置为 inline-block、table-cell、table-caption、flex、grid 等值之一
  4. float 属性不为 none
  5. position 属性不为 static 或 relative，而是 absolute 或 fixed

BFC 的作用包括：

  1. 解决外边距折叠问题。
  2. 清除浮动，防止浮动元素覆盖在非浮动元素上。
  3. 防止元素与外部元素的 margin 重叠。
  4. 让元素的高度正确计算，可以避免一些布局问题。

网格布局

  • 网格布局（Grid Layout）是 CSS 中一种新的布局方式
  • 它可以让开发者更加方便地实现复杂的布局效果
  • 网格布局通过将页面分割为多个网格，可以让元素在这些网格中进行定位和布局，具有很高的灵活性和可用性

怎么用

举例：

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>  
</div>
  • 将一个包含 6 个子元素的父元素设置为网格布局，并通过 grid-template-columns 和 grid-template-rows 属性将父元素分成了三列和两行的网格
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item1 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.item2 {
  grid-row: 1;
  grid-column: 3;
}

.item3 {
  grid-row: 2;
  grid-column: 3;
}

.item4 {
  grid-row: 1;
  grid-column: 2;
}

.item5 {
  grid-row: 2;
  grid-column: 1;
}

.item6 {
  grid-row: 2;
  grid-column: 2;
}
  • 通过为每个子元素设置 grid-row 和 grid-column 属性，可以将它们放置到不同的网格中。比如，item1 占据了第一行的两个网格和第二行的两个网格，而 item2 则占据了第一行的第三个网格，以此类推

解释：

  1. grid-row: 1 / span 2 的意思是将该元素放置在网格的第一行，从第一行开始跨越两行（也就是占据第一行和第二行）
  2. grid-column: 1 / span 2 的意思是将该元素放置在网格的第一列，从第一列开始跨越两列（也就是占据第一列和第二列）
  3. 1 / span 2 部分可以理解为是一个范围选择器
  4. 指定了元素要跨越的行数和列数
  5. 1 表示从第一行或第一列开始，span 2 表示跨越 2 个网格，也就是占据两个网格
  6. 在网格布局中，grid-row 和 grid-column 属性可以指定元素在网格中的位置和跨越的范围，是非常重要的属性之一
avatar
文章
阅读
粉丝