學(xué)習目標
- 1、表單標簽及屬性高級
- 2斋配、表格標簽及屬性高級
- 3茴迁、CSS統(tǒng)籌
- 4寄悯、BFC概念和應(yīng)用場景
一、表單標簽及屬性高級
回顧：
表單的作用：用來收集用戶的信息的;
表單的組成：
表單域：
<form name="" method="get/post" action=""></form>
表單控件 ：
<input type="text" value=""/>
提示信息
1）表單字段集
語法：<fieldset disabled="disabled"></fieldset>
說明：相當于一個方框堕义，在字段集中可以包含文本和其他元素猜旬。該元素用于對表單中的元素進行分組并在文檔中區(qū)別標出文本。fieldset元素可以嵌套倦卖，在其內(nèi)部可以在設(shè)置多個fieldset對象洒擦。disabled定義空間禁制可用；
2）字段級標題：
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對象繪制的方框內(nèi)插入一個標題怕膛。legend元素必須是fieldset內(nèi)的唯一個元素熟嫩。
3)提示信息標簽：
語法：<label for="綁定控件id名"></label>
說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息褐捻。要將label元素綁定到其他的控件上掸茅，可以將label元素的for屬性設(shè)置為與該控件的id屬性值相同。
4）上傳文件框：
語法：<input type="file" multiple="multiple" />
說明：type屬性值新增的類型有：file文件類型柠逞，可進行文件的選擇昧狮，multiple屬性可實現(xiàn)多選
5）圖像域
語法：<input type="image" src="" width="" height="" alt="圖片" />
說明：火狐不支持此表單元素;
二、表格標簽及屬性高級
回顧： 表格的作用：顯示數(shù)據(jù);
表格的基本結(jié)構(gòu)：
<table>
<tr>
<td></td>
</tr>
</table>
**1边苹、單元格間距：border-spacing:value; **
說明：單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離陵且， 不可取負值
2、合并相鄰單元格邊框：border-collapse:separate/collapse;
說明：合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值； collapse(邊框合并)
3慕购、無內(nèi)容時單元格的設(shè)置：empty-cells:show/hide;
說明：定義當單元格無內(nèi)容時聊疲，是否顯示該單元格的邊框區(qū)域；show：顯示 沪悲；hide：隱藏获洲；
4、顯示單元格行和列的算法(加快運行的速度)： table-layout:auto/fixed;
定義表格的布局算法殿如，設(shè)置fixed贡珊，文本為英文字母且無空格時，內(nèi)容超出單元格寬度則固定不變涉馁；如沒設(shè)寬則平均分配门岔；設(shè)置auto時，則隨內(nèi)容寬度而定烤送；火狐瀏覽器存在兼容寒随。
(fixed：固定寬，不會隨內(nèi)容多少改變單元格寬,寬度可以明確定義帮坚，沒有定義時則寬度會平均分配妻往，高度則會隨內(nèi)容變化)
5、隔行變色設(shè)置：
雙數(shù)行： tr:nth-child(2n even){ }
單數(shù)行： tr:nth-child(2n+1 odd){ }
設(shè)置單數(shù)單元格的樣式和雙數(shù)單元格的樣式
表格標題
<caption>標題內(nèi)容</caption>
caption:表格標題
表格標題位置：caption-side:top/right/bottom/left
說明：left,right位置只有火狐識別试和，top,bottom IE7上版本支持讯泣，ie7以下版本不支持其它屬性值，只識別top
A阅悍、html重要屬性：
1）colspan="value" 合并列
2）rowspan="value" 和并行
3）valign="top/bottom/middle/baseline" 垂直對齊方式
4）rules="groups/rows/cols/all/none" 添加組分隔線
說明：
rows:位于行之間的線條
cols:位于列之間的線條
all：位于行和列之間的線條
none:沒有線條
groups:位于行組和列組之間的線條
B好渠、數(shù)據(jù)列分組
(1) <colgroup span="value"></colgroup>
(2) <col span="value" />
說明：
1）col和colgroup元素會根據(jù)從左到右的順序依次對數(shù)據(jù)表格進行分組。
2）span屬性顯示指定相鄰幾列組成一組溉箕，span屬性值默認為1晦墙，默認時僅定義一列為一組悦昵。
3）可以通過給table添加rules="groups"屬性來給分組列添加組的分割線肴茄。注意：雖然col和colgroup具有相同的功能，但是但指，我們只能使用colgroup元素來設(shè)置表格內(nèi)容部分分割線（rules）應(yīng)該處于的位置寡痰，而col沒有這個功能。
C棋凳、數(shù)據(jù)行分組
<thead></thead> 表頭
<tbody></tbody> 表體
<tfoot></tfoot> 表尾
說明：一個Table中拦坠，只能包含一個thead,一個tfoot,但可包含多個tbody。
thead 元素應(yīng)該與 tbody 和 tfoot 元素結(jié)合起來使用剩岳。
tbody 元素用于對 HTML 表格中的主體內(nèi)容進行分組贞滨， tfoot 元素用于對 HTML 表格中的表注（頁腳）內(nèi)容進行分組。
如果要使用 thead、tfoot 以及 tbody 元素晓铆，就必須使用全部的元素勺良。
它們的出現(xiàn)次序是：thead、tbody/tfoot骄噪、尚困，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。必須在 table 元素內(nèi)部使用這些標簽链蕊。
提示：在默認情況下這些元素不會影響到表格的布局事甜。不過，可以使用 CSS 使這些元素改變表格的外觀滔韵。
詳細描述：
thead逻谦、tfoot 以及 tbody 元素使我們有能力對表格中的行進行分組。當創(chuàng)建某個表格時陪蜻，也許希望擁有一個標題行跨跨，一些帶有數(shù)據(jù)的行，以及位于底部的一個總計行囱皿。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動勇婴。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上嘱腥。
三耕渴、BFC概念和應(yīng)用場景
BFC 已經(jīng)是一個耳聽熟聞的詞語了，網(wǎng)上有許多關(guān)于 BFC 的文章齿兔，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動橱脸，防止 margin 重疊等）。
一分苇、BFC是什么添诉？
在解釋 BFC 是什么之前，需要先介紹 Box医寿、Formatting（格式化） Context（上下文）==塊級格式化上下文 的概念栏赴。
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域靖秩，只有Block-level box參與须眷， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干沟突。
二花颗、BFC布局規(guī)則：
一、內(nèi)部的Box會在垂直方向惠拭，一個接一個地放置扩劝。
二、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
三棒呛、每個元素的margin box的左邊葡公， 與包含塊border box的左邊相接觸
四、BFC的區(qū)域不會與float box重疊条霜。
五催什、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素宰睡。六蒲凶、計算BFC的高度時，浮動元素也參與計算
三拆内、哪些元素會生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
