完全掌握纯CSS布局网页

下面我将为你详细讲解“完全掌握纯CSS布局网页”的完整攻略。

基础知识

在开始学习纯CSS布局之前，我们需要掌握一些基础知识：
- HTML：HTML是网页标记语言，用于描述网页的结构和内容。
- CSS：CSS是层叠样式表，用于控制网页的样式和布局。
- 盒子模型：网页中的每一个元素都是一个矩形盒子，它由内容、内边距、边框和外边距组成。

布局方式

网页布局一般使用以下几种方式：
- 流式布局：该布局方式会根据设备宽度自适应缩放，但容易在大屏幕下留下过多空白。
- 自适应布局：该布局方式是固定尺寸布局和流式布局的结合，尺寸一般设为百分比，以适应不同尺寸的设备。
- 弹性布局：该布局方式主要利用弹性盒子（flexbox），可以快速实现水平和垂直对齐。

CSS技巧

在实现纯CSS布局的过程中，我们需要掌握以下几个CSS技巧：
- 盒子模型：理解盒子模型，并且使用box-sizing属性设置为border-box，使边框和内边距不会改变盒子的大小。
- CSS选择器：使用正确的CSS选择器，避免使用不必要的标签和类，以提高效率和可读性。
- 浮动和清除浮动：使用float属性设置元素浮动位置，并使用clear属性清除浮动，以避免浮动元素对布局的影响。
- 定位：使用position属性设置元素的定位方式，通过top、right、bottom和left属性控制元素的位置。
- 弹性盒子：使用display: flex，可以快速实现水平和垂直对齐，以及自适应布局。

示例说明

示例1：header、nav、main、aside和footer的布局

HTML结构

<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>

CSS布局

header, nav, main, aside, footer {
  padding: 10px;
  box-sizing: border-box;
}

header, footer {
  background-color: #42a5f5;
  color: #fff;
}

nav {
  background-color: #2196f3;
  color: #fff;
  float: left;
  width: 20%;
}

main {
  background-color: #fafafa;
  float: left;
  width: 60%;
}

aside {
  background-color: #2196f3;
  color: #fff;
  float: left;
  width: 20%;
}

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

说明：
- 使用float属性实现除header和footer外的元素左浮动并设置宽度（nav：20%；main：60%；aside：20%），使用clearfix清除浮动。
- 使用背景颜色使不同部分的元素区分开来。

示例2：使用弹性盒子实现垂直居中和自适应布局

HTML结构

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

CSS布局

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

.left, .right {
  width: 48%;
  height: 50%;
  background-color: #f3c;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}

.right {
  background-color: #3cf;
}

说明：
- 使用display: flex实现容器的弹性布局，使用justify-content: space-between设定2个子元素之间的空白。
- 子元素均使用display: flex实现垂直居中和内部元素的居中（.left和.right）。
- 子元素使用box-sizing: border-box确保内边距不影响和元素高度的计算。
- 使用相对宽度（.left和.right为48%）实现自适应布局。