布爾教育_燕108_HTML視頻資源課件

課程播放地址：http://www.php.cn/course/222.html

該老師講課風(fēng)格:

教師講課深入淺出，條理清楚，層層剖析，環(huán)環(huán)相扣，論證嚴(yán)密，結(jié)構(gòu)嚴(yán)謹(jǐn)，用思維的邏輯力量吸引學(xué)生的注意力，用理智控制課堂教學(xué)進(jìn)程。學(xué)生通過聽教師的講授，不僅學(xué)到知識(shí)，也受到思維的訓(xùn)練，還受到教師嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度的熏陶和感染

本視頻中較為難點(diǎn)是oveflow溢出處理了：

問題的提出：
最簡(jiǎn)單的一種情形就是我們把一個(gè)小的、固定寬度的p元素（比如導(dǎo)航、引用等）和其他元素內(nèi)容一起包含在一個(gè)大的p中。比如下面這段代碼：

<p id="outer">     
  <p id="inner"> <h2>A Column</h2> </p>     
  <h1>Main Content</h1>     
  <p>Lorem ipsum</p>     
</p>

我們可以為“#inner”設(shè)定一個(gè)寬度值（比如說20%），但是由于p是塊級(jí)元素，即使我們?cè)O(shè)定了寬度，其后面的內(nèi)容也只能在下一行中顯示，除非我們給它設(shè)定一個(gè)浮動(dòng)屬性（無論是向左浮動(dòng)或者向右浮動(dòng)）。那么此時(shí)會(huì)產(chǎn)生我們上面提到的問題了。

如果“#inner”的寬度和高度都比“#outer”小，這不會(huì)有問題。

但是，如果“#inner”的高度超過了“#outer”，那么的底部就會(huì)超出“#outer”的底部。這是因?yàn)槲覀優(yōu)椤?inner”設(shè)定了float屬性后，它就會(huì)脫離的文本流，無論其寬度和高度怎么變化都不會(huì)使“#outer”跟隨變化。

例一：未清除浮動(dòng)時(shí)的布局表現(xiàn)
在這個(gè)例子中，最開始由于“#inner”的高度小于“#outer”所以不會(huì)有問題，但是當(dāng)你點(diǎn)擊“加長(zhǎng)”后你會(huì)發(fā)現(xiàn)“#inner”的底邊已經(jīng)超出了“#outer”的范圍，而“#outer”沒有發(fā)生改變。這就是我們所提到的“清除浮動(dòng)（閉合浮動(dòng)元素）”或者是“閉合浮動(dòng)”問題

解決辦法：
1）額外標(biāo)簽法
第一個(gè)，也是W3C推薦的方法就是使用額外標(biāo)簽的辦法。這種方法就是在內(nèi)容的末尾增加一個(gè)空的標(biāo)簽，典型的做法就是使用類似

<br style="clear:both;" />

或者使用

<p style="clear:both;"></p>

這種辦法通過增加一個(gè)HTML元素迫使外部容器撐開。不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡(jiǎn)潔。

這里還給大家推薦了資料的下載：http://www.php.cn/xiazai/learn/1857

1. lionhit

2. minilionhit

3. xhtml

以上就是布爾教育_燕十八_HTML視頻資源課件的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！