Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識點1：元素浮動_第1頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識點1：元素浮動_第2頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識點1：元素浮動_第3頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識點1：元素浮動_第4頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.2.2知識點1：元素浮動_第5頁
已閱讀5頁，還剩9頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

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

評論

0/150

提交評論