目錄
一:頁面布局常用html标簽
二:css選擇器
四:頁面布局屬性（很重要!）
五:浮動屬性
一:頁面布局常用html标簽
- div無意義塊狀元素
- span無意義行内元素
- p段落标簽
- ul無序清單
- li清單項
- a超連結
- i斜體
- b加粗
二:css選擇器
- id選擇器#id
- 類選擇器.class
- 關系選擇器div p、div>p、div,p
- 僞類選擇器：hover
- 結構僞類選擇器:after、：before、:nth-child(n)
三:部分屬性(比較簡單)
四:頁面布局屬性（很重要!）
- 定位屬性:positon
- 布局屬性:display
- 浮動屬性:float、clear
- 盒子模型:border、margin、padding
- 圓角邊框:border-radius
- 陰影:text-shadow box-shadow
css樣式書寫順序：
- 文檔流（position float display clear）
- 盒子屬性（width margin padding border）
- 排版
- 裝飾屬性
五:浮動屬性
- 1. 浮動定位指将元素排除在普通流之外，元素将不在頁面中占據空間
- 2. 将浮動元索放置在包含框的左邊或者右邊，浮動元素依舊位于包含框之内
- 3. 浮動的框可以向左或者向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止
- 4. 浮動元索的外邊緣不會超過其父元素的内邊緣
- 5. 浮動元素不會互相重疊
- 6. 浮動元素不會上下浮動
- 7. 任何元素一旦浮動，display 屬性将完全失效均可以設定寬高，并且不會獨占一行。(span設定浮動就可以設定寬高，利于排版)
- 8. 如果子元素全部設定了浮動，在父元素不設定高度的情況下，父元素無法感覺高度，會失去高度。 例如這裡三個浮動小正方體的父div沒有設定寬度的情況下，父元素背景色未顯示。
- 9.浮動後，後面的元素不管是塊級還是行級元素，不會顯示在下一行。
- 10.浮動就是讓塊級标簽不獨占一行。目的（使用場景）：把塊級标簽元素可以排在一行上。
怎麼解決這個問題呢？首先我們可以用可以用超出隐藏overflow：hidden;這個方式，可以在父類不設定寬高情況下，也能感受到子類高度。效果如圖所示:
其次我們也可以讓父類也設定浮動，這時父類也能感受到子類高度，完全由子類寬高決定。另外，浮動的清除浮動也很重要。清除浮動的目的主要是抵消浮動元素對目前元素的影響。
方法有
1）添加空标簽，并設定樣式：clear:both;
clear:left; 清除左浮動
clear:right; 清除右浮動
clear:both; 清除左右浮動
clear:none; 左右浮動都不清除
2）在要清除浮動的父級添加樣式：overflow:hidden;
overflow:hidden; 超出部分隐藏，也可以用來實作清除浮動。
3）在要清除浮動的父級添加僞元素，并設定樣式：
父元素:after{
content:"";
display: block;
clear:both;
}