html、css实现布局基于内容灵活适应

布局：排列页面中的区域 ；布局写起来不难，但是里面蕴含着许多基本知识

我在下面将介绍几种自适应布局的方法（如果你希望所有布局都保持固定宽度，则看完这篇文章后你就会觉得这个问题很简单了；在阅读文章的过程中，请注意查看下文中出现的所有自动适应宽度值，并将其替换成你所需的数值即可；文章中讲解的各种知识点基本上都是围绕auto这一机制展开讨论）

文章目录

• 两栏布局
• 三栏布局
• 后台页面的布局

学习一个基本概念：常规流格式化模型 ，主要将页面布局划分为三种类型

1. 常规流
2. 浮动
3. 定位

常规流布局讲解-start

常规流：

• 也被称作文档流
• 默认采用常规布局模式
• 遵循以下原则：块元素独自占一行；行内盒子按水平顺序排列。

包含块： 每个盒子都具有独特的包含块，在大多数情况下这些决定因素会影响盒子的位置排列。每个盒子的主要负责对象是其父元素所管理的区域。

块盒（水平方向）：

• 每个盒子的总宽度（由border-box和margin组成），必须与其中包