一．頁面佈局
1. div 盒子
盒子模型，定義頁面佈局的一塊區域範圍
<div></div>，塊級標籤
table表格佈局：整齊，規則，需要行和列組成，佈局死板.
2. css
1) 內聯樣式，行內樣式
卸載標籤內，通過style 屬性定義樣式
<div style="width: 60em;height: 50em;background-color: skyblue">
2) 內部樣式
寫在<style></style>標籤中，<style>標籤定義樣式
需要樣式選擇器，選擇body中的標籤
樣式選擇器類型：
A.通配符選擇器:定義頁面中的所有標籤
*表示所有標籤
*{ 樣式屬性：屬性值...}
EG:
/*css註釋 */
/*通配符：一般清楚頁面中margin和padding的值*/
*{ color:blanchedalmond;margin: 0;padding: 0;font-family: 仿宋;}
B.標籤選擇器：通過標籤來定義所有此標籤樣式
標籤{屬性：值}
C. 類選擇器：通過class定義類名，通過類名定義樣式
<標籤 class=”類名”></標籤>
.類名{屬性:值;}
EG:
<li class="c1">類選擇器</li>
/*類*/
.c1{ color: black;}
類選擇器組合使用：
<li class="c1">類選擇器</li>
<li class="c1">噠噠噠噠噠噠</li>
/*標籤中必須滿足有兩個類選擇器 ，纔有樣式效果*/
<li class="c1 c2">卡密</li>
D. id選擇器：通過id屬性定義id名，通過id名定義樣式，id前綴是#
<標籤 id=”名字”>
#id 名字{ 屬性：值}
Id選擇器的名字是唯一的,不能重複
#d1{ color:ivory;}
<li class="c1" id="d1">類選擇器</li>
E. 分組選擇器：同時定義多個選擇器
選擇器1，選擇器2，{屬性：值;}
#id1,#id2,.c1{樣式}
Eg:
.c1,#d1{border: solid #1effb2 1px}
<li class="c1" id="d1">類選擇器</li>
<li class="c1">噠噠噠噠噠噠</li>
F. 派生選擇器：指派標籤中，需要定義的標籤的樣式
父級標籤 標籤{屬性：值}
Div li{屬性：值}
div p{font-weight: bold;color: #ff2123;height:100px;width: 100px;background-color: peru}
G. 僞類選擇器：定義樣式的效果
樣式效果：hover 鼠標懸停 , focus獲取鼠標焦點等
選擇器：效果{樣式}
比如hover
#d1:hover{} --當鼠標懸停到#d1標籤上，定義#d1樣式
/*僞類效果*/
#d1:hover{color: orange;font-size: 33px;}
注意：樣式重複,優先級：通配符<標籤<id<內聯樣式
3. 外部樣式
寫在css樣式文件中，在html文件中通過link標籤引入
1. 創建css文件
2. 通過link標籤引入css文件
<link href="css02.css" rel="stylesheet" type="text/css">
Href：引入文件的路徑
Rel：引入文件與本文件的關係
Type：引入文件的類型
Stylesheet：級聯樣式表
Text/css:文本樣式類型
3. 在css樣式中通過選擇器定義樣式
<link href="../html01/image.png" rel="icon">
Icon：關係是標題小圖片
二．盒子模型設置距離
1. padding
距離邊框的方向:top，bottom，left，right;
1) padding-方向:距離;設置距離方向的距離;
2) padding:值1;內邊距距離四個方向都是值1的距離
padding:值1 值2:上下方向是值1，左右方向是值2;
padding:值1 值2 值3：上是值1，左右是值2，下是值3
padding:值1 值2 值3 值4:上右下左;
注意：使用內邊距padding標籤，範圍會變大，注意頁面佈局
2. Margin
外邊距：標籤以外的距離，本標籤與其他標籤的距離.
可設置的外邊距方向：top,bottom,left,right;
設置方式與padding類似
1) Margin- 方向 : 距離
三．定位
Position：標籤的位置屬性
屬性值：static(默認),relative,absolute,fixed
1. static(默認)：默認定位，靜態定位，系統自動生成
2. Relative:相對定位：相對於標籤原位置的左上角進行定位，
與定位的方向：top，bottom，left，right結合使用;
保留標籤原位置.
3. absolute:絕對定位
1) 不保留原位置
2) 默認：以頁面body的左上角來定位
3) 當父標籤的position不是static，以父標籤進行定位
4. fixed 固定定位，確認定位
(1) 以整個頁面進行定位
(2) 不會隨滾動條滾動發生位置變化,固定在頁面中
(3) 不保留位置
四．隱藏，溢出 屬性
隱藏：display(不保留位置的隱藏) 和 visibility(保留位置的隱藏)
Display：none 隱藏/block 顯現
Visibility：hidden隱藏/visible 顯現
溢出：overflow;標籤中的內容超出了標籤範圍默認是可見的
Overflow：hidden/visible/scroll;溢出的內容隱藏/顯現/以滾動條方式查看
層級：z-index
處理標籤顯示，覆蓋優先級
z-index的值越大，層級越高
Z-index：正整數
五．其他常用屬性設置
1. 邊框
border:顏色 大小 樣式;邊框佔用px位置空間
border：red 1px solid;
(solid:實線;dashed:虛線)
...
Border-radius:大小值；設置標籤中邊框四個角的弧度，圓角
Border-top-left-radius:設置左上角的弧度
Border-bottom-right-radius:設置右下角的弧度
2. 輪廓
Outline：顏色 大小 樣式 ;與邊框設置是一致的
與邊框是一致的，區別:輪廓不佔用空間，邊框佔用空間