CSS布局大全：掌握常见布局技巧打造炫酷网站

1. CSS布局简介

CSS（Cascading Style Sheets）是一种用于描述 HTML 文档样式的语言。

使用 CSS 可以让网页布局更加灵活和易于维护。

本文将介绍常见的 CSS 布局方式，帮助开发者快速掌握网页布局技巧。

2. 常见 CSS 布局方式

2.1 固定宽度布局

固定宽度布局是一种将网页内容固定在一个具有固定宽度的容器中的布局方式。这种布局通常会在大屏幕上产生较大的空白区域。

.container {
  width: 960px;
  margin: 0 auto;
}

2.2 流式布局

流式布局是一种使用百分比单位来定义容器宽度的布局方式，可以使网页内容随浏览器窗口的大小变化而自适应调整。

.container {
  width: 80%;
  margin: 0 auto;
}

2.3 响应式布局

响应式布局是一种通过媒体查询（Media Query）在不同设备和屏幕尺寸下应用不同的样式规则的布局方式。这种布局可以适应各种屏幕尺寸和设备类型。

.container {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

2.4 Flexbox 布局

Flexbox 是一种弹性盒模型，可以实现简单到复杂的布局需求。通过设置容器的 display 属性为 flex，可以启用 Flexbox 布局。

.container {
  display: flex;
  justify-content: space-between;
}

2.5 CSS Grid 布局

CSS Grid 是一种二维布局系统，可以实现复杂的网格布局。通过设置容器的 display 属性为 grid，可以启用 CSS Grid 布局。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

3. 实战案例

两栏布局

两栏布局是一种常见的布局方式，通常包括一个主内容区和一个侧边栏。可以使用浮动（float）布局实现。

/* 使用浮动实现 */
.main {
  float: left;
  width: 70%;
}

.sidebar {
  float: left;
  width: 30%;
}