CSS网页布局知识大全
专为零基础小白打造的通俗易懂CSS布局指南，包含所有核心概念和实际应用
📦 1. 盒模型 (Box Model)
什么是盒模型？
每个HTML元素都是一个盒子，由四部分组成：
- 内容区(content) – 元素的实际内容（文字、图片等）
- 内边距(padding) – 内容与边框之间的空间
- 边框(border) – 围绕内容和内边距的线
- 外边距(margin) – 盒子与其他元素之间的透明间距
.box {
width: 300px; /* 内容宽度 */
padding: 20px; /* 内边距 */
border: 5px solid #333; /* 边框 */
margin: 30px; /* 外边距 */
}
width: 300px; /* 内容宽度 */
padding: 20px; /* 内边距 */
border: 5px solid #333; /* 边框 */
margin: 30px; /* 外边距 */
}
💡 重要提示：使用
box-sizing: border-box; 可以更直观地控制元素尺寸，宽度包含内边距和边框
🔄 2. 布局模式 (Layout Modes)
三种主要布局模式：
- 普通流(Normal Flow) – 默认布局方式，元素从上到下排列
- 浮动(Float) – 让元素向左或向右移动，其他内容环绕它
- 定位(Positioning) – 精确控制元素在页面上的位置
现代布局模式：
- Flexbox – 一维布局，适合排列项目（横向或纵向）
- Grid – 二维布局，创建复杂的网格结构
📍 3. 定位 (Positioning)
定位的五种类型：
- static – 默认定位，元素按正常文档流排列
- relative – 相对定位，相对于元素自身原来的位置移动
- absolute – 绝对定位，相对于最近的定位父元素
- fixed – 固定定位，相对于浏览器窗口
- sticky – 粘性定位，在滚动到特定位置时固定
/* 相对定位 */
.box {
position: relative;
top: 20px;
left: 30px;
}
/* 绝对定位 */
.parent { position: relative; }
.child {
position: absolute;
top: 0;
right: 0;
}
.box {
position: relative;
top: 20px;
left: 30px;
}
/* 绝对定位 */
.parent { position: relative; }
.child {
position: absolute;
top: 0;
right: 0;
}
🎯 4. 弹性盒子 (Flexbox)
Flexbox的核心概念：
Flexbox非常适合创建一维布局（横向或纵向）。包括两部分：
- flex容器 – 包含子元素的父容器
- flex项目 – 容器内部的子元素
常用容器属性：
display: flex;– 定义flex容器flex-direction– 主轴方向（row/column）justify-content– 主轴对齐方式align-items– 交叉轴对齐方式flex-wrap– 换行方式
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
🔲 5. 网格布局 (Grid)
Grid的核心概念：
Grid是强大的二维布局系统，可以同时控制行和列。
- grid容器 – 包含子元素的父容器
- grid项目 – 容器内部的子元素
- 网格线 – 划分网格的线条
- 网格轨道 – 行轨道和列轨道
- 网格单元 – 最小的网格单位
常用容器属性：
display: grid;– 定义grid容器grid-template-columns– 定义列轨道大小grid-template-rows– 定义行轨道大小gap– 网格单元间距grid-template-areas– 命名网格区域
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 150px;
gap: 20px;
}
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 150px;
gap: 20px;
}
📱 6. 响应式设计 (Responsive Design)
让你的网页适应所有设备：
- viewport元标签 –
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 媒体查询(Media Queries) – 根据设备特性应用不同样式
- 流体网格(Fluid Grids) – 使用百分比或fr单位
- 弹性图片(Flexible Images) –
max-width: 100%
媒体查询示例：
/* 默认样式 */
.container {
width: 100%;
}
/* 平板设备 */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* 桌面设备 */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
.container {
width: 100%;
}
/* 平板设备 */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* 桌面设备 */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}