CSS垂直水平居中，display:flex，布局，文字属性的一些零碎

1.
body的height不可少，如body{height:100%}，否则子元素会不认，如果子元素的高直接以百分比写的话，会不显示。因为识别不出来。
宽度则不会，因为浏览器的宽度是固定的，高度会滚，不固定。

2.
border-sizing其实是将默认的content-sizing转为了老ie的盒子模型
如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在一行上

3.
display:flex
弹性布局类似于word中的 按内容分布表格 的意思。按内容来自动分配。

为什么在body中定位会失效？
jusitify-content:Center 控制水平居中 没有问题
但align-items:center 控制垂直居中 就失效了

因为body没有控制大小和绝对定位！

body{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content:center;
  position: absolute;
  align-items:center;
}

这里position 必须和height,width一起配合来用，哪个缺少，相应位置上的定位就达不到了。

如果是一个普通的div呢？

div
{ width:300px;
height:230px;
  background:yellow;
display:flex;
align-items:center;
justify-content:center;
}
p{
  width:100px;
height:70px;
border:1px solid red;

}

完全可以，不用定位！
有没有margin, padding 不会影响居中的状态，仍然是居中，永远是居中。
去掉height , width之后，外框就变成了一个根据内容（里面的diva啊，啥啊，之类的）灵活变化大小的容器。（不重要：默认一般有margin没padding。）

4.
word-spacing属性只能用于p元素，div不认，同理letter-spacing

5.
vw 是viewport的宽度，vh是viewheight的高度
vmin,vmax是其最小值
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

6.
in firefox , we should set background-attachment as”fixed” to locate it.

7.
图片需要用px定位和指定大小，而包裹文字的div需用em, rem来控制

8.
background-size中，元素定位的其实不是父元素，而就是本身的div，比如：

显然，图片背景的100%是对应的它所在的div。
background-size, background-origin 都是针对图片，如果是颜色背景的话，都不适用。

直接写background属性的话，会重写之前的各分属性，最好先写个总的，再一个一个添加。

利用background-clip可以直接在div中呈现一个水平、垂直居中的方块:

div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}