### 盒子模型概念 - 塊級元素 獨占一行，寬高可以設置 （div） display:inline 將塊級元素轉化為內聯元素 - 行內元素/內聯元素 和其他元素在一行 寬高不可設置 寬高有內容決定 （span a ul em） - 行內塊級元素 和其他元素在一行且寬高可以設置 （img input） ### **盒子邊框 border** - 語法 ``` border:width || style || color; border:50px solid red;//盒子邊框50px 實線 紅色 ``` ### **盒子內邊距 padding** - 語法 ``` padding:10px; //距離邊框 上右下左距離 為10px 同 padding:10px 10px 10px 10px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px; ``` ### **盒子外邊距 margin** - 語法 同padding 關鍵字 margin ``` margin:10px; //距離邊框 上右下左距離 為10px 同 padding:10px 10px 10px 10px; ```  ### **盒子類型 box-sizing**  ### 定位 position * absolute 絕對定位 ；脫離文檔流布局，遺留下來的空間由后面的元素填充，定位的起始位置是 父元素 （且父元素 position 不為static）否則為body的文檔本身 * relative 相對定位 ； 不脫離文檔流，在文檔流原先的位置遺留空白區域 。定位起始位置為自身位置。 * fixed 固定定位 ； 類似于absolute 不隨著滾動位置而改變。 * sticky 類似 relative 和 fixed的結合體