网页制作css排版

CSS 排版基础

CSS 排版是网页布局的核心技术之一，通过合理的样式设置可以实现多样化的页面布局效果。

盒模型 每个 HTML 元素都是一个矩形盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)：

width = content-width + padding-left + padding-right + border-left + border-right

常用布局属性

• display: 控制元素显示方式(block, inline, inline-block, flex, grid等)
• position: 定位方式(static, relative, absolute, fixed, sticky)
• float: 浮动布局(left, right, none)
• box-sizing: 盒模型计算方式(content-box, border-box)

现代布局技术

Flexbox 弹性布局 适合一维布局，通过容器属性控制子元素排列：

.container {
  display: flex;
  flex-direction: row; /* 主轴方向 */
  justify-content: center; /* 主轴对齐 */
  align-items: stretch; /* 交叉轴对齐 */
}
.item {
  flex: 1; /* 伸缩比例 */
}

Grid 网格布局 适合二维复杂布局：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 列定义 */
  grid-template-rows: 100px auto; /* 行定义 */
  gap: 10px; /* 间距 */
}
.item {
  grid-column: 1 / 3; /* 跨越列 */
}

响应式设计

媒体查询 根据设备特性应用不同样式：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

相对单位

• vw/vh: 视窗宽度/高度的1%
• rem: 根元素字体大小
• em: 当前元素字体大小

实用技巧

垂直居中

/* Flexbox方式 */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Grid方式 */
.container {
  display: grid;
  place-items: center;
}

/* 绝对定位方式 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

多列等高布局

.container {
  display: flex;
}
.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

粘性定位

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

性能优化

• 减少重排和重绘
• 使用will-change属性提前告知浏览器变化
• 避免过度嵌套选择器
• 使用CSS硬件加速属性(transform, opacity等)

这些技术组合使用可以创建各种复杂的网页布局，从简单的单列页面到响应式的多列网格系统。