CSS 布局

📄️ CSS 盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着。盒子的组成：content 内容，padding 内填充，border 边框，margin 外边距

当元素被浮动时，会脱离文档流，根据 float 的值向左或者向右移动，直到它的外边界碰到父元素的内边界或另外一个浮动元素的外边界为止，是 CSS 布局中实现左右布局的一种方式

CSS position 属性用于指定一个元素在文档中的定位方式，其中 top, right, bottom 和 left 属性则决定了该元素的最终定位

弹性盒子是一种用于按行或按列布局的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间

CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局

首先看个例子，学习下概念

计算过程，以 iPhone 6 为例

响应式布局概念

一些复杂的布局案例