盒模型概念

组成部分	说明	CSS属性
content	内容区域，实际显示的内容	width, height
padding	内边距，内容与边框之间的区域	padding, padding-top, padding-right...
border	边框，内边距和外边距之间的边框	border, border-width, border-style
margin	外边距，边框与其他元素之间的区域	margin, margin-top, margin-right...

box-sizing 盒尺寸计算

值	说明	计算公式
content-box	默认值，只包含内容区域	总宽度 = width + padding + border
border-box	包含内容、内边距和边框	总宽度 = width（已包含padding和border）

display 显示类型

值	说明	特点
block	块级元素	独占一行，可设置宽高
inline	行内元素	同行显示，不可设置宽高
inline-block	行内块元素	同行显示，可设置宽高
none	不显示	完全隐藏，不占空间
flex	弹性盒容器	一维布局
grid	网格容器	二维布局

Flexbox 属性

属性	值	说明
flex-direction	row	主轴水平（默认）
flex-direction	column	主轴垂直
flex-direction	row-reverse/column-reverse	反向排列
flex-wrap	nowrap	不换行（默认）
flex-wrap	wrap/wrap-reverse	换行
justify-content	flex-start	主轴起点对齐
justify-content	flex-end	主轴终点对齐
justify-content	center	居中对齐
justify-content	space-between	两端对齐，间距相等
justify-content	space-around	间距两边小中间大
justify-content	space-evenly	间距完全相等
align-items	stretch	拉伸填满（默认）
align-items	flex-start	交叉轴起点对齐
align-items	flex-end	交叉轴终点对齐
align-items	center	交叉轴居中
align-items	baseline	基线对齐

什么是盒模型、Flexbox和Grid？

概念	定义	主要用途
盒模型 (Box Model)	每个HTML元素都被视为一个矩形盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成	定义元素的基本结构和尺寸计算方式
Flexbox (弹性盒)	一种一维布局模型，允许容器内的项目沿主轴和交叉轴灵活排列和对齐	处理单行或单列的布局，适合组件级布局
Grid (网格)	一种二维布局系统，允许创建行和列的复杂布局结构	处理整个页面或大型组件的二维布局

盒模型、Flexbox和Grid的联系与区别

对比维度	盒模型	Flexbox	Grid
布局维度	基础概念，不涉及布局	一维布局（单行或单列）	二维布局（行列同时）
适用场景	所有元素的基础结构	导航栏、卡片组件、按钮组	页面布局、仪表盘、复杂表单
控制方向	无方向概念	可设置主轴和交叉轴方向	行列同时控制
对齐方式	通过margin/padding控制	justify-content/align-items等	justify-content/align-content等
灵活性	固定结构	高度灵活，可伸缩	最灵活，可任意排列
兼容性	所有浏览器支持	现代浏览器支持良好	现代浏览器支持良好
相互关系	是Flexbox和Grid的基础	基于盒模型，是一维布局方案	基于盒模型，是二维布局方案

如何选择合适的布局方式

布局需求	推荐方案	原因
简单的水平或垂直排列	Flexbox	一维布局，对齐方便，响应式友好
复杂的二维布局（如页面框架）	Grid	原生支持行列，布局更直观
组件内部布局	Flexbox	适合组件级的一维排列
整体页面布局	Grid + Flexbox	Grid处理整体框架，Flexbox处理组件内部
需要精确控制元素尺寸	Grid	fr单位和网格线提供精确控制
需要动态调整元素大小	Flexbox	flex-grow/shrink属性动态调整

Grid 网格布局

属性	说明	示例
grid-template-columns	定义列的尺寸和数量	1fr 1fr 1fr
grid-template-rows	定义行的尺寸和数量	auto 100px auto
gap	网格间距	gap: 10px
grid-template-areas	命名网格区域	"header header"
grid-column	指定列位置	grid-column: 1 / 3
grid-row	指定行位置	grid-row: 1 / 2

position 定位

值	说明	定位原点
static	默认定位，正常文档流	-
relative	相对定位	元素自身原位置
absolute	绝对定位	最近非static祖先元素
fixed	固定定位	浏览器视口
sticky	粘性定位	根据滚动位置切换