05.移动端布局

移动端布局核心
1.水平方向不能出现滚动条(禁止缩放，元素宽度超过视口的宽度)
2.需要适配宽度，高度使用固定值（高度允许出现滚动条）
百分比布局（流式布局）：宽度使用百分比，高度使用px
3.移动端盒子模型使用内减模型： box-sizing: border-box;
* 避免由于border和padding导致的水平滚动条的问题
盒子模型 = content + padding + border + margin
1.基础班css2中默认值是content-box ： 外扩模型
width = content
2.css3中为了适配移动端，一般使用border-box : 内减模型（修改了padding和border，内容会自动减小）
width = content + padding + border
内减型盒子特点:
1.盒子模型四个部分组成： content（内容） + padding（内边距） + border（边框） + margin（外边距）
2.盒子最终在页面显示的宽度 = content + padding + border
3.基础班学习的盒子模型（默认） 外括模型 width = content
4.内减盒子 width = 真实宽度 = content + padding + border
* 一旦修改了padding和border，元素的content会自动内减