Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 7.2.2知識(shí)點(diǎn)1:元素浮動(dòng)_第1頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 7.2.2知識(shí)點(diǎn)1:元素浮動(dòng)_第2頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 7.2.2知識(shí)點(diǎn)1:元素浮動(dòng)_第3頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 7.2.2知識(shí)點(diǎn)1:元素浮動(dòng)_第4頁
Web前端開發(fā)技術(shù)項(xiàng)目教程(HTML5 CSS3 JavaScript)(微課版) 課件 7.2.2知識(shí)點(diǎn)1:元素浮動(dòng)_第5頁
已閱讀5頁,還剩9頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

元素浮動(dòng)信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備浮動(dòng)設(shè)置1清除浮動(dòng)201浮動(dòng)設(shè)置前端技術(shù)開發(fā)01浮動(dòng)設(shè)置浮動(dòng)屬性語法:float:none|left|right值描述none默認(rèn)值,不浮動(dòng),元素處在標(biāo)準(zhǔn)流中l(wèi)eft向左浮動(dòng)right向右浮動(dòng)在標(biāo)準(zhǔn)流中,一般情況下一個(gè)塊級元素在水平方向上會(huì)自動(dòng)伸展,直至父元素的邊界,而在垂直方向上則會(huì)和兄弟元素依次上下排列,但不能并排。使用浮動(dòng)后,塊級元素將改變自身行為。設(shè)置浮動(dòng)之后,這些元素將脫離標(biāo)準(zhǔn)流,這樣會(huì)影響后續(xù)元素的顯示位置。說明:01浮動(dòng)設(shè)置將塊級元素設(shè)置向左浮動(dòng)從左到右排列,元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float:left;這些元素將脫離文檔流,仍在文檔流中的父元素和后續(xù)元素會(huì)認(rèn)為這些“不存在”。01浮動(dòng)設(shè)置將塊級元素設(shè)置向右浮動(dòng)從右到左排列,元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float:right;這些元素將脫離文檔流,仍在文檔流中的父元素和后續(xù)元素會(huì)認(rèn)為這些“不存在”。元素會(huì)向其父元素的右側(cè)靠緊,觀察設(shè)置了向左浮動(dòng)和向右浮動(dòng)元素的排列順序。01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對相鄰元素的影響-塊級元素例如:后續(xù)元素是塊級元素段落p相鄰元素段落p浮動(dòng)元素div前面的div元素設(shè)置向左浮動(dòng)后,后續(xù)的段落元素會(huì)發(fā)生空間上的重疊,段落元素在div元素下方顯示,同時(shí)段落文字會(huì)在div元素右側(cè)呈現(xiàn)擠出效應(yīng)。<div>…</div><p>…</p>01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對相鄰元素的影響-行內(nèi)元素例如:后續(xù)元素是行內(nèi)元素span相鄰元素span浮動(dòng)元素div在標(biāo)準(zhǔn)流中的相鄰span元素會(huì)緊跟在浮動(dòng)元素div的右邊,當(dāng)縮放窗口時(shí),后側(cè)的空間放不下span元素后,行內(nèi)元素span會(huì)自動(dòng)換行。<div>…</div><span>…</span><span>…</span>01浮動(dòng)設(shè)置浮動(dòng)設(shè)置對父元素的影響例如:父元素是div元素,包含3個(gè)div子元素。子元素設(shè)置浮動(dòng)后,脫離標(biāo)準(zhǔn)流,但父元素仍在標(biāo)準(zhǔn)流里,可以這樣理解,父元素認(rèn)為子元素“不存在”了,所以高度為0,只顯示上下邊框的高度。浮動(dòng)子元素div外面父元素div設(shè)置浮動(dòng)父元素div如何消除設(shè)置浮動(dòng)后帶來的“副作用”?02清除浮動(dòng)前端技術(shù)開發(fā)02清除浮動(dòng)清除浮動(dòng)屬性:clear:none|both|left|right值描述none默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)both在左右兩側(cè)均不允許浮動(dòng)元素right在右側(cè)不允許浮動(dòng)元素left在左側(cè)不允許浮動(dòng)元素設(shè)置清除浮動(dòng)clear屬性的元素并不是清除本身元素的浮動(dòng)效果,而是該元素在指定側(cè)不與設(shè)置了浮動(dòng)屬性的元素在同一行顯示。clear屬性的取值02清除浮動(dòng)設(shè)置清除浮動(dòng)將第2個(gè)div元素設(shè)置“clear:left”,表示第2個(gè)元素的左側(cè)不允許出現(xiàn)浮動(dòng)元素。如果將CSS語句設(shè)置為“clear:both”,第3個(gè)div元素是否會(huì)換行顯示

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論