知識點預習
1.表單2.元素型別
3.浮動
4.定位

01- 表單
form標籤 表單用來提交資料

action 要提交的網址,預設是當前網頁
method 請求 提交方式

預設get請求
post請求
切換請求方式時注意快取問題

label標籤

for屬性如果設定的值和 input標籤中設定的id屬性值一樣就可以實現點選label讓對應的input成為焦點

輸入框的兩個常用屬性：

placeholder 佔位提示文字
outline:none 輸入框的邊框

input標籤中的type屬性值介紹:

select 下拉列表'選擇列表'新的標籤
option 選項textarea標籤 多行文字輸入框

02-搜尋條案例
文字距離盒子有一定間距時優先考慮使用文字縮排text-indent,如果用內邊距還要考慮盒子模型問題
文字輸入框預設有邊框和內邊距
按鈕也有預設邊框
預設元素會以文字基線"文字底部"來進行元素對齊,用浮動可以解決讓元素不以文字基線對齊,也可以解決元素之間預設間距問題
cursor:pointer 設定滑鼠在元素上的樣式為小手

03-塊元素特點
塊元素，也可以稱為行元素，佈局中常用的塊標籤如：div、p、ul、li、h1~h6等等都是塊元素，它在佈局中的行為特點:
1.獨霸一行2.寬度預設和父元素一樣寬 3.支援所有樣式如margin padding等

04-塊元素的樣式重置
有些標籤是包含預設的樣式的:
p標籤：含有預設外邊距ul：含有預設外邊距和內邊距，以及條目符號 h1~h6標籤：含有預設的外邊距和字型大小 body標籤：含有預設的外邊距

實際開發中，為了便於佈局我們會把帶有預設樣式的標籤樣式清除掉,這個做法就叫樣式重置.

/* 清除標籤預設的外邊和內邊距 */
body,p,h1,h2,h3,h4,h5,h6,ul{
    margin:0px;
    padding:0px;
}

/* 清除標籤預設條目符號 */
ul{
    list-style:none;
}

/* 將h標籤的文字大小設定為預設大小 */
h1,h2,h3,h4,h5,h6{
    /* 和父元素的字型一樣大 預設16 */
    font-size:100%;
    /* 根據實際需求來加   */
    font-weight:normal;
}

5-行內元素的特點
內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a、span等等都是內聯元素，它們在佈局中的行為:
1.寬高預設和內容決定2.排列在一行,當遇到父元素的邊界會自動換行 3.不支援寬高 margin上下 padding上下有問題 4.程式碼換行後行內元素之間有小間隙 5.行內元素設定文字水平對齊無效,但可以設定他們的父元素的text-align實現子元素水平對齊

06-行內元素的樣式重置
其他內聯元素"面試前最好看看它們的語義"

1、<em> 標籤 行內元素，表示語氣中的強調詞
2、<i> 標籤 行內元素，表示專業詞彙
3、<b> 標籤 行內元素，表示文件中的關鍵字或者產品名
4、<strong> 標籤 行內元素，表示非常重要的內容

包含預設樣式的內聯元素
a標籤：含有的下劃線以及文字顏色em、i標籤：文字預設為斜體 b、strong標籤：文字預設加粗 實際開發中，對這些標籤進行樣式重置。

/* 去掉a標籤預設的下劃線 */
a{
    text-decoration:none;
}
/* 去掉標籤預設的文字傾斜 */
em,i{
    font-style:normal;
}
/* 去掉標籤預設的文字加粗(按實際需求) */
b,strong{
    font-weight:normal;
}

解決內聯元素間隙的方法:
1、去掉內聯元素之間的換行2、將內聯元素的父級設定font-size為0，內聯元素自身再設定具體的font-size

07-行內元素佈局選單案例
行內元素設定文字水平對齊無效,但可以設定他們的父元素的text-align實現子元素水平對齊

08-行內塊元素的特性
內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行為：
1.元素排列一行2.寬度預設有內容決定 3.元素間有預設間距 4.支援寬高 marign padding等所有樣式 5.子元素是內聯塊元素，父元素可以用text-align屬性設定子元素水平對齊方式

display屬性是用來設定元素的型別及隱藏的，屬性的值有：
1、none 元素隱藏且不佔位置2、block 元素以塊元素顯示 3、inline 元素以內聯元素顯示 4、inline-block 元素以內聯塊元素顯示

09-行內塊分頁導航案例
把li和a都轉換成inline-block為了動態性,可以確定子元素的尺寸,父元素的尺寸有子元素撐起來

10-浮動元素的特性
如果要實現子元素在父元素中水平居中時不能用浮動
元素浮動特點:
1.只有左和右浮動2.浮動元素遇到父元素或其他元素都會停下來 3.浮動後塊元素也會排在一行,寬度會預設有內容決定,相鄰元素一行排不下之後會自動換行 4.塊元素和行內元素浮動後會自動轉換為浮動特性的行內塊元素
浮動可以解決的問題: 1.行內元素及行內塊元素之間間距問題 2.垂直外邊距不再合併 3.margin-top塌陷問題

11-清除浮動
什麼時候需要清除浮動?
當父元素沒有設定高度而子元素又全部浮動時,此時父元素的高度就無法通過子元素自動計算了,就要清除浮動來讓父元素還能自動計算高度
清除浮動的方法

第一種:父級上增加屬性overflow：hidden

第二種:在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）

第三種:使用成熟的清浮動樣式類，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;} /* IE下清除浮動及解決margin-top塌陷問題 */
-定位

文件流
文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。

我們可以使用CSS的position屬性來設定元素的定位型別，postion的設定項如下：
1.relative 生成相對定位元素，元素所佔據的文件流的位置保留，元素本身相對自身原位置進行偏移。
2.absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上一個設定了定位的父級元素來進行定位，如果找不到，則相對於window元素進行定位。

3.fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。

4.static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性。
定位元素的偏移 定位的元素還需要用left、right、top或者bottom來設定相對於參照元素的偏移值。
定位元素層級 定位元素是浮動的正常的文件流之上的，可以用z-index屬性來設定元素的層級

定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

15-定位案例

/* 設定元素圓角,將元素四個角設定4px半徑的圓角 */
border-radius:4px;

/* 設定元素透明度,將元素透明度設定為0.3，此屬性需要加一個相容IE的寫法 */
opacity:0.3;
/* 相容IE */
filter:alpha(opacity=30);

水平垂直居中提示框案例

/* 固定定位 */
    position: fixed;

    /* 水平居中 */
    left: 50%;
    margin-left: -150px;
    /* 垂直居中 */
    top:50%;
    margin-top: -150px;

定位小結
static 預設值,沒有定位
使用場景:一般來說不用寫，除非想要覆蓋之前設定的定位 relative 相對定位
使用場景:和absolute一起使用，常用於logo的定位。

absolute 絕對定位
使用場景:網頁中的logo圖片及一定移動動畫

fixed 固定定位
使用場景:懸浮在瀏覽器中的廣告視窗