前端技术对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; 设置了网格线和网格项目之间的间隙。
