前端技术对css布局的学习

css布局

目录

盒模型

CSS盒模型是前端开发中的一个核心概念，它描述了网页布局中元素是如何被组织和渲染的。每个HTML元素都可以被看作是一个矩形的盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。下面详细解释这四个部分：

内容（Content）

  • 定义：盒子的实际内容，如文本、图像或其他嵌套元素。
  • 特点：内容区域的大小可以通过CSS的width和height属性来设置，但这些属性仅指内容区域的大小，不包括内边距、边框和外边距。

内边距（Padding）

  • 定义：内容区域与边框之间的空白区域。
  • 特点：内边距是透明的，可以通过设置padding属性来控制其大小。内边距会把盒子撑大，即如果设置了内边距，盒子的总宽度和总高度会增加。
  • 属性：padding-top、padding-right、padding-bottom、padding-left分别控制上下左右的内边距，也可以简写为padding。

边框（Border）

  • 定义：围绕内容区域和内边距的线条。
  • 特点：边框可以有不同的样式（如实线、虚线、点状线等）、宽度和颜色。边框不是透明的，会占用空间。
  • 属性：border-style、border-width、border-color分别控制边框的样式、宽度和颜色，也可以简写为border。

外边距（Margin）

  • 定义：盒子与其他元素之间的空白区域。
  • 特点：外边距是透明的，用于控制元素之间的距离。外边距不会影响盒子本身的大小，但会影响盒子与其他元素之间的布局。
  • 属性：margin-top、margin-right、margin-bottom、margin-left分别控制上下左右的外边距，也可以简写为margin。

CSS盒模型的两种类型

  • W3C盒模型（标准盒模型）：在这种盒模型中，元素的宽度和高度仅包括内容区域的大小，不包括内边距、边框和外边距。
  • IE盒模型（怪异盒模型）：在这种盒模型中，元素的宽度和高度包括内容区域、内边距和边框的大小，但不包括外边距。

CSS3中的box-sizing属性

  • 为了解决W3C盒模型和IE盒模型之间的差异，CSS3引入了box-sizing属性。
  • box-sizing属性有三个值：content-box（默认值，遵循W3C盒模型）、border-box（遵循IE盒模型）、inherit（从父元素继承该属性的值）。
  • 通过设置box-sizing: border-box;，可以让元素的宽度和高度包含内容区域、内边距和边框的大小，从而简化布局计算。

传统布局

Float（浮动）

float属性最初被设计用于实现文本环绕图像的效果，但后来被广泛用于创建多栏布局。当一个元素的float属性被设置为left、right或none（默认值）时，它会脱离其正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

  • 用途：常用于实现两栏或三栏布局，如侧边栏和内容区的布局。
  • 特点：
    • 浮动元素会脱离文档流，但不会脱离文本流（即文本会环绕浮动元素）。
    • 浮动元素会影响周围元素的布局。
    • 需要清除浮动，以避免布局问题（如父元素高度塌陷）。

Position（定位）

position属性用于指定一个元素在文档中的定位方式。它主要有五个值：static（默认值）、relative、absolute、fixed和sticky。

  • 用途：
    • static：元素按照正常的文档流进行布局。
    • relative：元素首先按照正常文档流进行布局，然后可以通过top、right、bottom、left属性进行偏移，偏移不会脱离文档流。
    • absolute：元素脱离文档流，相对于其最近的已定位（即非static）祖先元素进行定位。如果没有这样的元素，则相对于<html>元素（即整个页面）进行定位。
    • fixed：元素脱离文档流，相对于浏览器窗口进行定位。即使页面滚动，它也会停留在相同的位置。
    • sticky：是relative和fixed的混合体。元素根据正常文档流进行定位，直到滚动到某个阈值位置为止，然后表现得像fixed定位一样。
  • 特点：
    • position提供了更多的布局控制，可以实现复杂的布局效果。
    • 使用absolute和fixed定位时，需要小心处理元素的堆叠顺序（通过z-index属性）。

比较

  • 用途：float主要用于简单的多栏布局，而position则提供了更广泛的定位选项，包括复杂的布局控制。
  • 行为：float元素仍然会参与文档流（只是脱离了正常布局），而position中的absolute和fixed定位元素则完全脱离了文档流。
  • 兼容性：两者在大多数现代浏览器中都有很好的支持，但position提供了更多的灵活性和控制选项。

Flexbox弹性盒子布局

Flexbox（Flexible Box 布局）是一种 CSS 布局模式，它提供了一种更加有效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。Flexbox 旨在提供一种更有效的方式来对容器中的项目进行布局、对齐和分配空间，即使它们的大小未知或是动态变化的。

基本概念

  • Flex 容器（Flex Container）：设置了 display: flex; 或 display: inline-flex; 的元素成为了一个 flex 容器，其子元素自动成为 flex 项目（flex items）。
  • Flex 项目（Flex Items）：Flex 容器中的每一个子元素都是一个 flex 项目。
  • 主轴（Main Axis）：Flex 项目沿着主轴进行排列，主轴的方向由 flex-direction 属性决定（默认为 row，即水平方向）。
  • 交叉轴（Cross Axis）：与主轴垂直的轴称为交叉轴。

Flex 容器属性

  • display：设置元素为 Flex 容器，常用的值有 flex（块级）和 inline-flex（行内级）。
  • flex-direction：决定主轴的方向，有 row（默认值，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）。
  • flex-wrap：控制 flex 项目是否换行，有 nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（反向换行）。
  • justify-content：在主轴上对齐 flex 项目，常用的值有 flex-start、flex-end、center、space-between、space-around、space-evenly。
  • align-items：在交叉轴上对齐 flex 项目，常用的值有 flex-start、flex-end、center、baseline、stretch（默认值，项目被拉伸以填满容器的交叉轴）。
  • align-content：在交叉轴上对齐多行 flex 项目，其用法与 justify-content 类似，但作用于多行。

Flex 项目属性

  • flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
  • flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
  • flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
  • flex：是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

示例

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

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  color: white;
  padding: 20px;
  text-align: center;
  flex-grow: 1; /* 使所有项目等宽 */
}
</style>

在这个例子中，.flex-container 是一个 flex 容器，它的子元素 .flex-item 是 flex 项目。通过设置 .flex-container 的 display: flex;，我们使它的子元素成为 flex 项目。然后，我们通过 justify-content 和 align-items 属性来控制这些项目的对齐方式，并通过 flex-grow: 1; 使所有项目等宽。

Grid布局（了解）

Grid（网格）布局是CSS中的一种二维布局系统，旨在通过创建行和列来创建复杂的页面布局。与Flexbox布局不同，Grid布局更加灵活，它允许你同时在两个维度（行和列）上对元素进行对齐和分配空间。Grid布局非常适合创建复杂的页面布局，如网格、仪表板等。

基本概念

  • Grid 容器（Grid Container）：设置了 display: grid; 或 display: inline-grid; 的元素成为了一个Grid容器，其子元素自动成为Grid项目（Grid Items）。
  • Grid 项目（Grid Items）：Grid容器中的每一个子元素都是一个Grid项目。
  • Grid 行（Grid Rows）：由 grid-template-rows 属性定义，或者使用 grid-auto-rows 属性为隐式创建的网格行指定大小。
  • Grid 列（Grid Columns）：由 grid-template-columns 属性定义，或者使用 grid-auto-columns 属性为隐式创建的网格列指定大小。
  • 单元格（Grid Cell）：Grid行和Grid列的交叉点。
  • 区域（Grid Area）：由四个Grid线包围的Grid项目的空间。
  • Grid 线（Grid Line）：构成Grid结构的分隔线，既可以是显式的（通过 grid-template-columns 或 grid-template-rows 定义），也可以是隐式的（由Grid项目自动生成）。

Grid 容器属性

  • display：grid 或 inline-grid，将元素设置为Grid容器。
  • grid-template-columns：定义Grid列的宽度和数量。
  • grid-template-rows：定义Grid行的高度和数量。
  • grid-template-areas：通过命名区域来定义Grid布局。
  • grid-row-gap 和 grid-column-gap（或简写为 grid-gap）：定义Grid行和列之间的间隙。
  • justify-items、align-items：分别沿主轴和交叉轴对齐Grid项目。
  • justify-content、align-content：分别沿主轴和交叉轴对齐整个Grid的内容。

Grid项目属性

  • grid-column-start、grid-column-end、grid-row-start、grid-row-end（或简写为 grid-area）：指定Grid项目在Grid中的位置。
  • justify-self、align-self：分别沿主轴和交叉轴对齐单个Grid项目，覆盖容器的对齐设置。

示例

<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>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列，每列宽度相等 */
  grid-gap: 10px; /* 设置网格线和网格项目之间的间隙 */
}

.grid-item {
  background-color: rgba(255, 99, 71, 0.8);
  padding: 20px;
  color: white;
  font-size: 15px;
  text-align: center;
}
</style>

在这个例子中，.grid-container 是一个Grid容器，它包含六个Grid项目（.grid-item）。通过设置 display: grid; 和 grid-template-columns: repeat(3, 1fr);，我们创建了一个包含三列的Grid布局，每列的宽度相等。grid-gap: 10px; 设置了网格线和网格项目之间的间隙。

posted @ 2024-11-21 19:21  BingBing爱化学-04044  阅读(24)  评论(0)    收藏  举报