盒子模型 margin padding border content
margin 外邊距
縮寫方式 分別代表 上右下 左
padding 內填充
縮寫方式 同上
補充padding的常用簡寫方式：
浮動 float
在css的樣式中，是由三維空間的概念的，不僅由xy座標位置，也存在有不可見的z軸，在不使用浮動效果的時候，樣式好比貼在牆上的牆紙，固定它的不是膠水而是乙個個的標籤，在新增浮動屬性後，該內容就會脫離原來的位置，向上進入到新的維度。
浮動元素會生成乙個塊兒級框，無論它本身是什麼元素。浮動的***是父標籤塌陷，清理浮動的固定操作方式：
.clearfix:after三種取值 left right none
overflow 溢位屬性
值描述visible
預設值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inheri
規定應該從父元素繼承 overflow 屬性的值。
圓形頭像示例
定位 position
static 預設值，無定位，不能當作絕對定位的參照物，並且設定標籤物件的left、top等值是不起作用的的。
相對定位是相對於該元素在文件流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即佔據文件流空間。物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的乙個主要用法：方便絕對定位元素找到參照物。
定義：設定為絕對定位的元素框從文件流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。
重點：如果父級設定了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應**的標籤偏離問題，即父級為自適應的，那我子元素就設定position:absolute;父元素設定position:relative;，然後top、right、bottom、left用百分比寬度表示。
另外，物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
絕對定位
fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，物件不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點： 乙個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是乙個常識性的知識點，因為這是兩個不同的流，乙個是浮動流，另乙個是「定位流」。但是 relative 卻可以。因為它原本所佔的空間仍然佔據文件流。
在理論上，被設定為fixed的元素會被定位於瀏覽器視窗的乙個指定座標，不論視窗是否滾動，它都會固定在這個位置。
脫離文件流： 絕對定位 固定定位 不脫離文件流： 相對定位
z-index
#i2設定物件的層疊順序。
z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是乙個正整數，預設的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在html後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用
自定義模態框示例
opacity
用來定義透明效果。取值範圍是0~1，0是完全透明，1是完全不透明。與通過色彩rgba（）設定的區別在於 opacity可以調整任何內容，而色彩只能更改背景顏色。
CSS中盒子的浮動定位
1.盒子的浮動 在標準流中,乙個塊級元素在水平方向會自動伸展，知道包含它的元素的邊接 而在豎直方向與相鄰元素依次排列，不能併排。css中float屬性，預設為none。將float屬性的值設定為left或right，元素就會向其父元素的左側或右側靠緊。同時預設情況下，盒子的寬度不再伸展，而是根據盒子...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
前端 CSS 浮動和定位
1.標準文件流 文件流指的是元素排版布局過程中，元素會預設自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分成一行行，並在每行中從左至右的順序排放元素 塊級元素 獨佔一行 h1 h6 p div 列表.行內元素 不獨佔一行 span a img strong.行內元素 可以被包含在 塊級元素...