盒模型 弹性布局

盒模型

盒模型作用

：对所有的盒子：在浏览器中所占据的空间进行计算
盒子：只要在浏览器中【占据位置】的html元素，都是我们计算的盒子。
—>inline inline-block block
盒模型使用什么计算盒子在浏览器中占据的位置
width height padding border-width margin
盒子分类：边框盒子（IE默认）和 内容盒子（谷歌默认）
box-sizing:border-box 和 content-box
边框盒子在浏览器占据空间 = width x height
内容盒子在浏览器中占据的空间 = width + border-width + padding + height + margin

结论：内容盒子：width height 决定 盒子能容纳多少东西；随着其他变化，盒子在浏览器中占据的位置也变化
边框盒子：结论：内容盒子：width height 决定 盒子在父容器中占据的位置，其他变化只会改变盒子能容纳多少东西

弹性布局使用方式

• 兼容性
  适合使用手机端：pc直接放弃（原因项目需要兼容所有浏览器 IE10以上可以考虑）
  重点：微信：微信小程序；各个小程序；优先弹性布局等

• 使用规则
  1.找到父容器：给父容器设置display:flex
  2.一旦容器变为flex布局：主轴与交叉轴就会存在（你用或者不用它都在那里）
  3.确定主轴方向：flex-direction 默认水平方向 从左往右—>决定 子元素水平方向排列
  4.在主轴上怎么排列—>justify-content 决定 左对齐 右对齐 居中 元素之间距离相等对齐…
  5.看纵向布局是否有规律？
  有：—>align-item 元素在竖直方向对齐方式 上对齐 下对齐 居中对齐；文字基线对齐
  没有，但是有布局—>margin padding position

  注意：
  1.一般子元素在父容器中不会内容溢出（只会变小）