单位

　　px 像素  是咱们排版的基本单位

　　em 单位：跟父级元素字体大小有关  因父级元素的字体大小乘以em前面的数字（若是父级没有就继承上一个父级，直到body位置默认的16px）p{ width: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 只会向内挤压，元素的可利用空间变小