第9天表格表單 BFC

Day11：表格表單和統(tǒng)籌 學(xué)習(xí)目標(biāo)

1、表單標(biāo)簽及屬性高級(jí) 2、表格標(biāo)簽及屬性高級(jí) 3、CSS統(tǒng)籌 4、BFC概念和應(yīng)用場(chǎng)景 一、表單標(biāo)簽及屬性高級(jí)

回顧： 表單的作用：用來(lái)收集用戶(hù)的信息的; 表單的組成： 表單域： <form name="" method="get/post" action=""> </form> 表單控件 ： <input type="text" value=""/> 提示信息 1）表單字段集 語(yǔ)法：<fieldset disabled="disabled"></fieldset> 說(shuō)明：相當(dāng)于一個(gè)方框，在字段集中可以包含文本和其他元素。該元素用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)別標(biāo)出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設(shè)置多個(gè)fieldset對(duì)象。disabled定義空間禁制可用； 2）字段級(jí)標(biāo)題： 語(yǔ)法：<legend align="left/center/right/justify"></legend> 說(shuō)明：legend元素可以在fieldset對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題。legend元素必須是fieldset內(nèi)的唯一個(gè)元素。 3)提示信息標(biāo)簽： 語(yǔ)法：<label for="綁定控件id名"></label> 說(shuō)明：label元素用來(lái)定義標(biāo)簽，為頁(yè)面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設(shè)置為與該控件的id屬性值相同。 4）上傳文件框： 語(yǔ)法：<input type="file" multiple="multiple" /> 說(shuō)明：type屬性值新增的類(lèi)型有：file文件類(lèi)型，可進(jìn)行文件的選擇，multiple屬性可實(shí)現(xiàn)多選 5）圖像域 語(yǔ)法：<input type="image" src="" width="" height="" alt="圖片" /> 說(shuō)明：火狐不支持此表單元素; 二、表格標(biāo)簽及屬性高級(jí)

回顧： 表格的作用：顯示數(shù)據(jù); 表格的基本結(jié)構(gòu)： <table> <tr> <td></td> </tr> </table> 1、單元格間距：border-spacing:value; 說(shuō)明：?jiǎn)卧耖g距(該屬性必須給table添加) 表示單元格邊框之間的距離， 不可取負(fù)值 2、合并相鄰單元格邊框：border-collapse:separate/collapse; 說(shuō)明：合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開(kāi))默認(rèn)值； collapse(邊框合并) 3、無(wú)內(nèi)容時(shí)單元格的設(shè)置：empty-cells:show/hide; 說(shuō)明：定義當(dāng)單元格無(wú)內(nèi)容時(shí)，是否顯示該單元格的邊框區(qū)域；show：顯示 ；hide：隱藏； 4、顯示單元格行和列的算法(加快運(yùn)行的速度)： table-layout:auto/fixed; 定義表格的布局算法，設(shè)置fixed，文本為英文字母且無(wú)空格時(shí)，內(nèi)容超出單元格寬度則固定不變；如沒(méi)設(shè)寬則平均分配；設(shè)置auto時(shí)，則隨內(nèi)容寬度而定；火狐瀏覽器存在兼容。 (fixed：固定寬，不會(huì)隨內(nèi)容多少改變單元格寬,寬度可以明確定義，沒(méi)有定義時(shí)則寬度會(huì)平均分配，高度則會(huì)隨內(nèi)容變化) 5、隔行變色設(shè)置： 雙數(shù)行： tr:nth-child(2n even){ } 單數(shù)行： tr:nth-child(2n+1 odd){ } 設(shè)置單數(shù)單元格的樣式和雙數(shù)單元格的樣式 表格標(biāo)題 <caption>標(biāo)題內(nèi)容</caption> caption:表格標(biāo)題 表格標(biāo)題位置：caption-side:top/right/bottom/left 說(shuō)明：left,right位置只有火狐識(shí)別，top,bottom IE7上版本支持，ie7以下版本不支持其它屬性值，只識(shí)別top A、html重要屬性： 1）colspan="value" 合并列 2）rowspan="value" 和并行 3）valign="top/bottom/middle/baseline" 垂直對(duì)齊方式 4）rules="groups/rows/cols/all/none" 添加組分隔線(xiàn) 說(shuō)明： rows:位于行之間的線(xiàn)條 cols:位于列之間的線(xiàn)條 all：位于行和列之間的線(xiàn)條 none:沒(méi)有線(xiàn)條 groups:位于行組和列組之間的線(xiàn)條 B、數(shù)據(jù)列分組 (1) <colgroup span="value"></colgroup> (2) <col span="value" /> 說(shuō)明： 1）col和colgroup元素會(huì)根據(jù)從左到右的順序依次對(duì)數(shù)據(jù)表格進(jìn)行分組。 2）span屬性顯示指定相鄰幾列組成一組，span屬性值默認(rèn)為1，默認(rèn)時(shí)僅定義一列為一組。 3）可以通過(guò)給table添加rules="groups"屬性來(lái)給分組列添加組的分割線(xiàn)。 注意：雖然col和colgroup具有相同的功能，但是，我們只能使用colgroup元素來(lái)設(shè)置表格內(nèi)容部分分割線(xiàn)（rules）應(yīng)該處于的位置，而col沒(méi)有這個(gè)功能。 C、數(shù)據(jù)行分組 <thead></thead> 表頭 <tbody></tbody> 表體 <tfoot></tfoot> 表尾 說(shuō)明：一個(gè)Table中，只能包含一個(gè)thead,一個(gè)tfoot,但可包含多個(gè)tbody。 thead 元素應(yīng)該與 tbody 和 tfoot 元素結(jié)合起來(lái)使用。 tbody 元素用于對(duì) HTML 表格中的主體內(nèi)容進(jìn)行分組， tfoot 元素用于對(duì) HTML 表格中的表注（頁(yè)腳）內(nèi)容進(jìn)行分組。 如果要使用 thead、tfoot 以及 tbody 元素，就必須使用全部的元素。 它們的出現(xiàn)次序是：thead、tbody/tfoot、，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁(yè)腳了。必須在 table 元素內(nèi)部使用這些標(biāo)簽。 提示：在默認(rèn)情況下這些元素不會(huì)影響到表格的布局。不過(guò)，可以使用 CSS 使這些元素改變表格的外觀。 詳細(xì)描述： thead、tfoot 以及 tbody 元素使我們有能力對(duì)表格中的行進(jìn)行分組。當(dāng)創(chuàng)建某個(gè)表格時(shí)，也許希望擁有一個(gè)標(biāo)題行，一些帶有數(shù)據(jù)的行，以及位于底部的一個(gè)總計(jì)行。這種劃分使瀏覽器有能力支持獨(dú)立于表格標(biāo)題和頁(yè)腳的表格正文滾動(dòng)。當(dāng)長(zhǎng)的表格被打印時(shí)，表格的表頭和頁(yè)腳可被打印在包含表格數(shù)據(jù)的每張頁(yè)面上。 三、CSS統(tǒng)籌 暫時(shí)省略

CSS統(tǒng)籌 CSS濾鏡 四、BFC概念和應(yīng)用場(chǎng)景

BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。 一、BFC是什么？ 　　在解釋 BFC 是什么之前，需要先介紹 Box、Formatting（格式化） Context（上下文）==塊級(jí)格式化上下文 的概念。 BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。 二、BFC布局規(guī)則： 一、內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。 二、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊 三、每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸 四、BFC的區(qū)域不會(huì)與float box重疊。 五、BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。六、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算 三、哪些元素會(huì)生成BFC? 根元素 float屬性不為none position為absolute或fixed display為inline-block, table-cell, table-caption, flex, inline-flex overflow不為visible 返回頂部