CSS深入
1.居中五環
根據前面所學內容寫一個始終居中的奧運五環
五環原始碼
五環執行結果
2.兩欄佈局
兩欄佈局程式碼（其中right必須寫到left前面）
3.兩個經典BUG
1.（margin塌陷）父子巢狀的元素垂直方向的margin會取父子中較大的值移動
解決方法：觸發BFC
2.(margin合併) 兩個div豎直方向的margin會合並
margin合併問題
解決方法：可以觸發BFC解決，但是一般不解決，因為會改html，html在開發中比較基層，所以不解決。
4.BFC
四個觸發條件(將屬性加入到父元素中即可)：
1.position:absolute
2.display:inline-bock
3.float:left/right
4.overflow:hidden(一般用於處理溢位部分隱藏，解決塌陷時將該熟悉加到父元素中)
5.浮動模型
float:引數為left、right (將每行元素改為float佈局)
clear:both(清除周圍浮動流)
1.加入float的元素為浮動元素
2.浮動元素產生了浮動流，所有產生了浮動流的元素，塊級元素看不到他們，產生了bfc的元素和文字類屬性的元素（帶inline的）以及文字都能看到浮動元素。
3.問題：一個塊級父元素不能看到浮動元素，怎麼獲得父元素邊框？
方法1：取一個不顯示的標籤，清除其周圍浮動流，將邊框撐開
clear:both(只對塊級元素生效)
解決辦法
偽元素：可以用css來操作，但是沒有寫到html裡面（::before::after）
方法2：.父元素::after{content:"";clear:both;display:block;}
方法3：將父級元素設為可見浮動流的元素（例如設為bfc）
知識點：設定position：absolute以及float：left/right打內部把元素變為inline-block
應用：實現文字圖片頂對齊
使用float:left之前
使用該屬性後
6.寫一個簡單例項
目標實現
程式碼實現
7.溢位容器，要打點展示
1.單行文字溢位處理：
解決方法：white-space:nowrap(成為一行);overflow:hidden(溢位部分隱藏);text-overflow:ellipsis(隱藏部分用點代替);
2.多行文字溢位處理：
解決方法：直接寫...(百度就是這麼實現的)
8.背景圖片處理
屬性：background-image:url();background-size: px px;background-repeat:no-repeat;background-position: px px(left top left bottom left center);
9.圖片代替文字問題
當不載入css時希望出現文字”淘寶網“的超連結
解決辦法1：
text-indent: px(容器縮排容器寬度)；white-space:nowrap(強制不換行);overflow:hidden(容器外隱藏);
解決辦法2：
將容器高度設為0；將內邊框上部設為圖片高度；因為背景會在padding中擴充套件，而文字不會，所以文字會被擠出容器，將容器外設為隱藏即可。
10.標籤巢狀標準
行級元素只能巢狀行級元素，
塊級元素可以巢狀任何元素，
p標籤不能巢狀塊級元素，
a標籤不能巢狀a標籤
11.css要點補充說明：
1.
實現隨著介面改變大小內層容器不變並始終居中（只對塊元素適用）
2.帶inline的元素有文字的特點，例如將空白或者換行展示為一個文字分隔符（例如img）
程式碼1
程式碼1展示結果
程式碼2
程式碼2展示結果
3.position:absulute以及float:left/right會將元素從內部改為display:inline-block
4.一旦一個行級塊元素中有文字時，後面的文字會和該文字底對齊；不過可以通過vertical-align：來調整對其畫素。