px 像素 是我们排版的基本单位
em 单位：跟父级元素字体大小有关 因父级元素的字体大小乘以em前面的数字（如果父级没有就继承上一个父级，直到body位置默认的16px）p{ 20em} body为列：相当与320px
rem单位：只跟根节点的字体大小有关（根节点：HTML文档类型有关）
html
head body （浏览器所展示的内容）
（主要是跟服务器响应的表头）
line-height:2; 当前数字乘以元素字体的大小
浏览器 （主要是ie9以上版本，，ie9以下的版本）（处理兼容性的问题）
浏览器和浏览器之间的是由差距的，这个差距是由浏览器自身的内核决定的
每个浏览器都有自己的前缀，主要是解决css3中的兼容问题（国内浏览器的内核都是谷歌）
chrome（谷歌）的前缀-webkit-
firefox(火狐) 的前缀-moz-
ie的前缀 -ms-
opera（欧朋）的前缀-o-
布局
1.float布局 流式布局（float+margin）
2定位
3 双飞翼
4 圣杯
5 弹性盒子布局
6 表格布局
弹性和模型 ：是由父级的弹性容器和子集的弹性的子元素两者构成
display：flex；这个属性决定谁是弹性容器，它里面的的子元素就是弹性子元素
flex-direction 指定弹性子元素的排列容器
display：flex； flex在里面占的份数跟父子没有关系，只跟子元素有关 （属性值是数字）
border-box：解决元素的空间
这个属性让元素的实际宽度等于设置的width 即使有了padding margin border 只会向内挤压，元素的可利用空间变小