原文：Small Fire · Web页面布局 · 前端 子专栏 · Small Fire 技术笔记
语义化标签
<header> — Defines a header for a document or a section
<nav> — 定义一组导航链接
<article> — 定义一块独立的独立内容
<section> — 在文档中定义一块独立的内容主题分组部分
<aside> — 定义核心内容之外的内容（如边栏）
<footer> — 定义文档或section的页脚
页面布局整体思路
Step1：确定页面的版心，既是页面的主题部分
Step2：分析页面中的行模块，以及每个行模块中的列模块
Step3：每行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置
Step4：制作HTML结构。遵循先有结构，后有样式的原则，结构永远重要
Step5：先理清楚布局结构，后写代码实现整体布局和具体属性
网页布局总结
一个完整的网页，是标准流、浮动、定位一起完成的布局，每个都有自己的专门用法。
标准流
可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的效果，就是可以让多个盒子前后叠压显示。如果元素自由在某个盒子内移动就用来定位布局。
常见布局技巧
margin负值使用
使用场景，多个盒子一行浮动排列时，相邻边框会出现double现象，可以通过设置 margin对应位置为负值，就可以使边框重合。
行内块的巧妙运用
盒子里面的行内块元素和行内元素可以通过 text-align: center 将其全部水平居中显示。