知识篇 -- CSS布局
# Flexbox (弹性盒子)
Flexbox 是一种一维布局模型，用于在容器中对项目进行对齐、分布和排序。它非常适合构建组件内部的布局。
# Flex 容器属性 (作用于父元素)
display: flex;或display: inline-flex;: 开启 Flex 布局。flex-direction: 定义主轴的方向（row,row-reverse,column,column-reverse）。flex-wrap: 定义 Flex 项目是否换行（nowrap,wrap,wrap-reverse）。justify-content: 定义项目在主轴上的对齐方式（flex-start,flex-end,center,space-between,space-around,space-evenly）。align-items: 定义项目在交叉轴上的对齐方式（flex-start,flex-end,center,baseline,stretch）。align-content: 定义多行 Flex 项目在交叉轴上的对齐方式（flex-start,flex-end,center,space-between,space-around,stretch）。gap,row-gap,column-gap: 定义 Flex 项目之间的间距。
# Flex 项目属性 (作用于子元素)
order: 定义项目的排列顺序。flex-grow: 定义项目的放大比例。flex-shrink: 定义项目的缩小比例。flex-basis: 定义项目在分配多余空间之前的默认大小。flex:flex-grow,flex-shrink,flex-basis的简写。align-self: 允许单个项目覆盖容器的align-items属性。
# CSS Grid (网格布局)
CSS Grid 是一种二维布局模型，用于将页面划分为行和列，非常适合构建整个页面的布局。
# Grid 容器属性 (作用于父元素)
display: grid;或display: inline-grid;: 开启 Grid 布局。grid-template-columns: 定义列的数量和大小。grid-template-rows: 定义行的数量和大小。grid-template-areas: 使用命名区域定义网格布局。grid-gap,grid-row-gap,grid-column-gap: 定义网格线之间的间距。justify-items: 定义网格项目在单元格内的水平对齐方式。align-items: 定义网格项目在单元格内的垂直对齐方式。justify-content: 定义整个网格在容器内的水平对齐方式。align-content: 定义整个网格在容器内的垂直对齐方式。
# Grid 项目属性 (作用于子元素)
grid-column-start,grid-column-end,grid-row-start,grid-row-end: 定义项目在网格中的起始和结束位置。grid-column,grid-row:start和end的简写。grid-area: 使用命名区域放置项目。justify-self: 允许单个项目覆盖容器的justify-items属性。align-self: 允许单个项目覆盖容器的align-items属性。
# 响应式设计 (Responsive Design)
响应式设计是一种网页设计方法，旨在使网站在各种设备（从桌面显示器到手机）上都能良好地显示。
# 媒体查询 (Media Queries)
媒体查询允许根据设备的特性（如屏幕宽度、高度、方向等）应用不同的 CSS 样式。
/* 当屏幕宽度小于 768px 时应用 */
@media (max-width: 767px) {
body {
font-size: 14px;
}
.container {
width: 100%;
}
}
/* 当屏幕宽度在 768px 到 1024px 之间时应用 */
@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.container {
width: 90%;
}
}
/* 当屏幕宽度大于 1024px 时应用 */
@media (min-width: 1025px) {
body {
font-size: 18px;
}
.container {
width: 80%;
}
}
# 视口元标签 (Viewport Meta Tag)
在 HTML 的 <head> 中添加视口元标签，以确保页面在移动设备上正确缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: 将视口宽度设置为设备的屏幕宽度。initial-scale=1.0: 设置页面的初始缩放比例为 1。
# 流式布局 (Fluid Layouts)
使用相对单位（如百分比、em、rem、vw、vh）而不是固定像素值来定义元素的宽度和高度，使布局能够根据屏幕大小进行伸缩。
# 移动优先 (Mobile-First)
一种响应式设计策略，首先为最小的屏幕（移动设备）设计和开发，然后逐步为更大的屏幕（平板电脑、桌面）添加样式。这种方法有助于确保移动用户获得最佳体验，并优化性能。