一、布局
- 传统的布局：盒子模型
- content-box--平时普通的盒子模型（
向外扩展）
- 平时普通的盒子，添加padding，border，盒子会变大
-
box-sizing：border-box--整体的盒子模型不变大（向内扩展）
二、盒子模型用途
- calc(
公式)
- width：calc(25%
空格- 空格10px)
- -是为了区别连接符
三、flex布局
- 父级：
display：flex
- 添加浏览器前缀： -webkit- ；真是工作，postCss插件（自动添加前缀）
- 水平居中一个盒子
position: absolute;
left: 50%;
top: 50%;
/*margin-left:-100px;*/
/*margin-top:-100px;*/
transform: translate(-50%,-50%)
如果父级用了弹性布局，子元素就不需要浮动了- 父级身上的其它属性
-justify-content：center 子元素水平排列方式(center:居中，flex-start:居左 flex-end：居右 space-between：两端对齐 space-around：子元素拉手分布)
- 垂直排列
-
align-items:子元素的垂直排列
center 垂直居中 flex-start 开始 flex-end 底部
-
