前端基础- CSS样式-网页布局

---

前言

本文重点对网页布局部分的内容进行总结

---

网页布局

由盒子模型可知，大部分的html标签是一个盒子，通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是由标准流、浮动、定位一起完成布局，每个都有专门的用途。

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示使用标准流布局。
使用场景：从上到下排列由多个块级盒子。

2. 浮动

可以使多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示使用浮动布局。
使用场景：一行内显示排列多个盒子。
学习内容： 浮动特性、如何清除浮动

3. 定位

定位最大的特点是具有层叠的概念，可以让多个盒子前后叠压显示。如果元素自由在某个盒子内移动就可以使用定位布局。
使用场景：在盒子上方重叠显示其他子盒子，或者元素在浏览器内位置随鼠标滚动始终保持不变。
学习内容：四种定位模式、定位叠放顺序