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：來調整對其像素。
閱讀更多 前端嫣然呀呀呀 的文章
