一、position 定位

• position:static; 默認定位
  塊級元素獨占一行，行內元素默認排列在一行，也就是說每個元素執行各自的默認屬性；
• position: relative; 相對定位
  相對本身位置進行位移
  如：
  right: 20px 在原來的位置往左移動 20 px;
  top: 20px 在原來的位置往下移動 20 px;
  left:20px 在原來的位置往右移動 20 px；
  bottom: 20px; 在原來的位置往上移動 20 px;

注意：本來向右移動現在是向左移動，本來想上移動現在是向下移動

• position: absolute 絕對定位
  絕對定位是特殊的相對定位；
  絕對定位是相對它最近的 已定位(position 不能是默認的 static) 的父級元素進行定位的；
  如果它的父級元素都沒有定位，那它就相對于瀏覽器首個窗口進行定位的（瀏覽器有滾動條，往下拉不算首個窗口）；
• position: fix; 固定定位
  根據瀏覽器顯示進行定位的，即使窗口有垂直滾動條，也是顯示能看到窗口就那么大。

說明:可以用來做 “回到頂部”功能。

二、盒子模型

由外邊距、邊框、內邊距和內容四個部分組成。

1

2

第二張圖中土色是外邊距、橙色是邊框、灰藍色是內邊距、藍色是內容。

注釋：margin: 外邊距 處理塊級元素與它上下左右其它塊級元素的排列方式；給塊級元素設置 width 和 height 屬性，默認是給內容設置的 width 和 height。box-sizing: content-box; (默認屬性)；使用 box-sizing: border-box; 之后再給塊級元素設置 width 和 height，實際上是給內容+內邊距+邊框設置的寬度和高度