① 未設定（left/right/top/bottom屬性）方位   ->    該元素表現為包裹性（與內聯元素的效果相似，目前來說margin和padding與內聯元素中的margin/padding的表現是一樣的）

              1.能由包裹的span撐開

              2.未設定方位時，margin無效，padding卻是有效的,且其百分比是按照body（父容器）來算的，若該節點設定了height和width，那麼就使用該節點的高寬

              3.若未設定高寬，那麼由子容器預設撐開  

              注：未設定方位時，預設看不見容器的

此時是未設定方位的，純粹由子容器撐開了

.ex-tBoxAni__test span{
            color: #F7F7F7;
            font-size: 16px;
            line-height: 158px;
  }

②.設定方位   ->   進入格式化寬度（與block元素一樣，會填充父容器，block元素不會填充高度，而該設定能夠填充高度）

              1.所有的屬性都由父容器決定，都按照父容器座標系進行平移（若該層的祖先元素中有transform為非none的元素時，則會以該容器的座標系進行平移）

              2.若對應方位全設定為0，那麼高容器填充body，可以給方位設定   px/em/百分比

              3.margin/padding按照父容器寬度進行百分比計算

              首先，body寬度  注意：該截圖是從火狐（firefox）瀏覽器截圖的，不同的瀏覽器效果可能會有所差別！！！！！！

              然後就是該容器寬度，其父容器就是body

             寬度為442px，兩側的margin為30%，由此計算可得1110*30%=333px，正好

             注：
                  若margin和padding之和超過了100%（margin:30%,padding:20%），那麼文字還會顯示，只不過只會顯示一部分
                  文字換行，且Line-height的效果會新增再換行的文字上，因為其形成了一個line-box
                  但是不會拉長body，原因？

firefox下:

chrome下:

兩者都不拉長body，且在全屏模式下，該框都未能顯示全部，猜想：

           該定位元素就與風箏一樣，雖然遠遠吊在空中，但地面仍然有線在控制（大神的警語）

在這兒該定位元素會受到父容器（地面）的限制，但是其吊在空中，因此影響不到父容器的佈局。

祝大家元旦快樂，o(∩_∩)o 哈哈

未完待續.......