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;
}