1.margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
2.border(邊框) - 圍繞在內邊距和內容外的邊框。
3.padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
4.content(內容) - 盒子的內容，顯示文字和影象。
static 定位
html 元素的預設值，即沒有定位，遵循正常的文件流物件。
靜態定位的元素不會受到 top, bottom, left, right影響。
fixed 定位
元素的位置相對於瀏覽器視窗是固定位置。
即使視窗是滾動的它也不會移動。
fixed定位使元素的位置與文件流無關，因此不佔據空間。
fixed定位的元素和其他元素重疊。
relative 定位
相對定位元素的定位是相對其正常位置。
移動相對定位元素，但它原本所佔的空間不會改變
相對定位元素經常被用來作為絕對定位元素的容器塊。
absolute 定位
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於:
absolute 定位使元素的位置與文件流無關，因此不佔據空間。
absolute 定位的元素和其他元素重疊。
sticky 定位
sticky 英文本面意思是粘，貼上，所以可以把它稱之為粘性定位。
position: sticky; 基於使用者的滾動位置來定位。
粘性定位的元素是依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
重疊的元素
元素的定位與文件流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了乙個元素的堆疊順序（哪個元素應該放在前面，或後面）
乙個元素可以有正數或負數的堆疊順序：
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最後定位在html**中的元素將被顯示在最前面。
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...
前端入門 CSS盒子模型
屬性描述 padding 設定所有內邊距 padding left 設定左內邊距 padding right 設定右內邊距 padding top 設定上內邊距 padding bottom 設定底部內邊距 描述屬性 邊框樣式 border style 單邊框樣式 上 border top styl...
Web前端 CSS盒子模型
2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距，實現標籤在父標籤範圍內水平居中 3 mar...