网页制作css排版

CSS 排版基础方法

使用 display 属性控制元素布局方式。block 元素独占一行，inline 元素水平排列，inline-block 兼具两者特性。

.container {
  display: block; /* 默认值 */
}
.inline-item {
  display: inline;
}

Flexbox 弹性布局

通过 flex-direction 设置主轴方向，justify-content 控制主轴对齐，align-items 控制交叉轴对齐。

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

Grid 网格布局

使用 grid-template-columns 定义列宽，grid-template-rows 定义行高，gap 设置间距。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

浮动与清除浮动

float 使元素脱离文档流，clear 解决浮动导致的父元素高度塌陷。

.float-left {
  float: left;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

定位方式

position: relative 相对定位，absolute 绝对定位基于最近定位祖先元素，fixed 固定视口位置。

.relative-box {
  position: relative;
}
.absolute-child {
  position: absolute;
  top: 10px;
  left: 20px;
}

响应式设计

媒体查询适配不同屏幕尺寸，结合百分比或视口单位实现响应式。

@media (max-width: 768px) {
  .responsive-item {
    width: 100%;
  }
}
.mobile-first {
  width: 100vw;
  height: 100vh;
}

CSS 变量与继承

自定义属性实现主题切换，inherit 值实现样式继承。

:root {
  --main-color: #3498db;
}
.themed-element {
  color: var(--main-color);
}
.inherited-text {
  font-family: inherit;
}

现代布局技巧

aspect-ratio 控制宽高比，object-fit 处理媒体内容适配，clip-path 创建复杂形状。

.ratio-box {
  aspect-ratio: 16/9;
}
.media-content {
  object-fit: cover;
}
.custom-shape {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}