盒子布局、標簽特性display、浮動、定位position
盒子模型布局：
盒子模型：每個標簽都是一個盒子
盒子在頁面顯示在大小是：自身寬度+邊框+邊距（內邊框+外邊距）
如果一個盒子設置了邊框，則邊框需要被加兩遍。若果設置了邊距則內外邊距根據設置情況要被加兩遍。
計算 寬高box-sizing: border-box;（意義是將盒子大小定死，不會再因邊距邊框大小改變。）
設置上一行屬性後，盒子寬度就是width，裏面內容自適應。（計算的時候不再需要加邊框和邊距。）
從裏到外：
padding(內邊距)： 屬性值的前後順序代表了上右下左的屬性值。
上右下左 上（左右）下 （上下）（左右） 全部
border（邊框:每一個邊都可以設置）：
width大小
style樣式
color顏色
radius（角）： 左上（順時針，百分比形式50% 0% 0% 0%）
margin（外邊距）： 上右下左 上（左右）下 （上下）（左右） 全部
（margin:auto;居中屬性正對於塊標簽。）
box-shadow(盒子陰影外，向外加inset)：水平偏移量 上下偏移量 清晰度 陰影的面積 顏色 （inset屬性加在最後）
h-shadow:水平陰影位置。允許負值。
v-shadow:垂直陰影位置。允許負值。
text-shadow(字體陰影)： 水平偏移量 上下偏移量 清晰度 陰影面積 顏色
布局：
浮動:float
overflow:hidden 超出部分處理方式
overflow-y:scroll 滾動條
標簽特性：display :
inline 行
不能設置寬高，默認不占一行
block 塊 （margin:auto;居中屬性正對於塊標簽。）
能設置寬高，默認占一行
inline-block 行內塊
能設置寬高，默認不占一行
none
display：none 隱藏
標簽位置沒了。寬高都沒了，但是還在。網頁可檢查到。
visibility:hidden；
標簽位置還在，只是遮擋。寬高都在，頁面無法看到。
opacity：數值（0~1）；
透明度，但標簽和子標簽都透明
如果只需要背景半透，字體不變
則需要直接設置背景色，background：rgba();
rgba(0~255,0~255,0~255,透明度（0~1）);
布局：
浮動:float
overflow:hidden 超出部分處理方式（將超出的部分隱藏掉）
overflow-y（x）:scroll 隱藏並處滾動條，y是垂直方向，x是水平方向。
定位position:
fixed 絕對定位，相對於屏幕定位，保持在屏幕的位置不變。
設置fixed,標簽位置沒了（最高層）
top:0px;left:10px;right:20px;bottom:30px;此處為在頁面的定位位置。（一般只設兩個，上下各一個，左右各一個，避免沖突。）
z-index:層數：層數越高，顯示在最前面。（前面的圖片會擋住下一層的圖片）
補充：background-attachment:scroll;是設置背景圖片位置不動，滑動滾動條無變化。
relative 相對定位，相當於自己定位
形式的移動，原位置不變！！！
會移動,微調 +-不要超過20px。
<div style="width: 100px;height: 100px;background-color: #ccc;position: relative;left:10px;top:10px;"></div>，設置top，bottom，left，right屬性來調節位置。
最主要的！！！限制absolute
absolute 絕對定位，相對於body（頁面定位）
標簽位置也沒了
相對於最近的有position屬性的父標簽,最頂級是body.
<div style="width: 200px;height: 200px;background-color: #ccc;position: relative;">
<div style="width: 100px;height: 100px;background-color: red;position: absolute;top: 0px;">
top,left,right,bottom
z-index:層數
盒子布局、標簽特性display、浮動、定位position