1.什麼是定位？
定位：頁面上的元素，出現的位置
2.定位分類
1.普通流定位
2.浮動定位
3.相對定位
4.絕對定位
5.固定定位
3.普通流定位
又稱文檔流定位，他是頁面元素默認的定位方式
文檔流的規範：
1.塊級元素
從上往下排列，獨佔一行
2.行內元素
從左到右，多個元素在一行中顯示，
如果顯示不下，自動換行
4.浮動(重點，難點)
作用：能夠讓多個 (塊級)元素在一行中顯示
1.特點
1.脫離文檔流，不佔據頁面空間
2.浮動元素，會停靠在父元素的左邊或左邊其它已經浮動的元素的邊緣
2.語法：
float
取值：
none:無浮動，默認值
left:左浮動
right:右浮動
**:父元素高度會消失
圖文混排：
浮動，
文本、行內元素、行內塊：採用環繞的方式來排列，不會被壓在下面，會避開浮動元素
清除浮動帶來的影響：
元素浮動以後，會對後面的元素帶來位置的影響，如果後門的元素不想被影響，那就清除浮動
語法：
clear：
取值：none：默認值，不做任何清除浮動
left：清除當前元素左浮動帶來的影響，即前面元素左浮動的話，當前元素不會上前佔位；
right：清除當前元素右浮動帶來的影響，即前面元素右浮動的話，當前元素不會上前佔位；
both：清除所有浮動
練習：
新建多個div塊元素，設置其浮動,flaot:left,float;right
新建多個行內元素，設置其寬高，背景色，然後再設浮動，看跟塊級元素有什麼區別？
10：37
3.背景
background:red;
background-color:red;
是指以背景色或背景圖像的方式給元素設置背景
作用：
背景色：就是以單一的顏色作爲背景進行填充
背景圖像：以圖片作爲背景進行填充
1.背景色
語法：background-color：
取值：合法的顏色值 transparent(透明)
**：背景色和背景圖片都從邊框位置處開始填充
2.背景圖像
語法：background-image background
取值：url(圖片路徑);
ex:background-image:url(images/a.jpg);
3.背景圖像平鋪
語法：background-repeat
取值：
repeat 默認值，水平和垂直方向同時平鋪
no-repeat無平鋪效果，只顯示一次圖片
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
4.背景圖片位置
什麼是背景圖像定位？
作用：改變背景圖片在元素中默認的位置
語法：background-position
取值：
1.x y
x:背景圖像在水平方向的偏移距離
取值爲正，向右偏移
取值爲負，向左偏移
y:背景圖像在垂直方向的偏移距離
取值爲正，向下偏移
取值爲負，向上偏移
2.x% y%
0% 0% 原點，左上角
100% 100% 右下角
50% 50% 正中間
3.x：
left/center/right
y:
top/cneter/bottom
eg:
left top
right bottom
center center
5.背景圖像的尺寸
語法：background-size
取值：
1.具體數值 v1 v2
v1表示圖片的寬度
v2表示圖片的高度
2.v1% v2%
3.cover
將背景圖擴大到足夠大，以使背景圖能夠完全覆蓋到元素區域
4.contain
將背景圖擴大，以至於背景圖的寬度或高度有一個適應了元素區域即可。
ex:
background-size:20px 50px;
background-size:50% 50%;
background-size:cover;
backgorund-size:contain;
6.背景屬性簡寫方式
語法：
background:color url() repeat postion; ???size
ex:
background:url(images/a.jpg) no-repeat -60px -50px;
pm:
<font></font>
1.文本格式化
1.字體屬性
1.指定字體類型
語法：font-family
取值：字體1，字體2，字體3；
ex:
font-family:"微軟雅黑",Arial,"黑體";
2.字體大小
語法：font-size
取值：數值 (px,pt爲單位)
3.字體加粗
語法：font-weight
取值：
normal 正常，大部分標記的默認值
bold：加粗（h1-h6,b）
value:400-900整百倍數字
eg:
font-weight:400;
font-weight:600;
font-weight:900;
font-weight:1500; ????
4.字體樣式
語法：font-style
取值：
normal 正常
italic 斜體，i標記
eg:
font-style:italic;
2.文本格式
1.文本顏色
語法：color
取值：合法的顏色
2.文本排列方式(水平方向)
語法：text-align
作用：控制文本在水平方向對齊
取值：left/center/right/ justify(調整版面) ????
3.文本修飾（線條修飾）
語法：text-decoration
取值：
none:無線條修飾
underline:下劃線 <u></u>
overline:上劃線
line-through:刪除線 <s></s>
4.行高
作用：控制一行文本的高度，如果行高的高度高於字體本身大小，
那麼該行文本將在指定的行高內呈現垂直居中的效果。
語法：line-height
取值：以px爲單位的數值
練習：
當頁面加載時a標記無下滑線並且顏色爲黑色，當鼠標放到a標記上時，
文本顏色爲紅色，並且出現下滑線，同時有加粗和放大的效果。
2.顯示方式
1.什麼是顯示方式？
決定頁面上的元素到底以什麼樣的方式來進行顯示(塊級，行內，行內塊)
2.如何修改顯示方式？
語法：display
取值：
none 隱藏，讓生成元素不顯示,不佔空間
block 讓當前元素表現的和塊級元素一致
inline 讓當前元素表現的和行內元素一致
inline-block 讓元素變成行內塊
特點：擺放方式如同行內元素，但是具有塊級元素的特徵
練習：
新建5個A元素，分別設置他們爲塊級，行內，行內塊，隱藏，正常
新建div元素隱藏，
3.列表
1.列表項標記
屬性：list-style-type
取值：
none:不顯示標識
disc:實心圓
circle:空心圓
square:實心方塊
2.列表項圖像
屬性：list-style-image
取值：url(路徑);
3.列表項位置
屬性：list-style-position
取值：
outside:默認值，列表項標記顯示在內容區域之外
inside：將標記顯示在內容區域之內
4.列表項簡寫屬性
屬性：list-style:type url() position;
**：
常用的方式：list-style:none;
新建一個ul裏面寫8個li，裏面的列表項圖片換一下？