css基礎布局複習筆記(一)浮動

2022-09-17 16:27:22 字數 1521 閱讀 5844

浮動的定義:使元素脫離文件流,按照指定方向(左右)發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。

第一種情況導致的各種布局混亂問題  

(浮動元素不佔位置導致的布局變化)

第二種情況浮動的元素只影響他後面的元素    根據層疊順序推算

第三種情況導致的各種掉盒子問題  

如果父級寬度太窄,無法容納所有元素,無法容納的元素會掉下去,之後還是會執行浮動,向左/右直到遇到邊框就會停下來!

第四種情況導致的各種被卡住問題  

浮動的元素高度不同,並且外面盒子寬度不夠的情況下,往下掉的過程中可能會被卡住(掉出來後盒子仍向左/右執行浮動)

設定了浮動的元素,變成浮動元素,具備浮動元素特性

都支援橫排顯示 

都支援寬高  

不給寬度的時候預設內容撐開寬高  

支援margin padding  

不支援margin:auto;

浮動脫離文件流  

浮動提公升層級半級 概念性理解,其實和層級沒關係,只有定位有層級

浮動元素不佔位置,由於不佔位置導致父級的塌陷影響布局 (內容為0高度,父級高度由內容撐開的時候,也為0)

1.浮動元素本身不能清除浮動 比如div 設定了float 不能直接給div 運用clear來清除浮動   

2.**浮動,**給父元素清除!即浮動之後要立馬解決這裡由於浮動帶來的影響! 以免對後面的布局造成影響!

clear:both;

子元素方式:新增空標籤

在需要清除浮動的元素前面新增乙個空的div

/*缺點:在ulli要注意 因為不能巢狀塊級 並且浮動元素本身不能清除浮動*/

<

div

style

='clear:both;'

>

div>

給父級用的方法

1.給父元素新增高度  缺點是擴充套件性不好,一般都是內容撐開高度  

2.給父級inline­block  缺點是中間會解析空格   

3.overflow:hidden;  需要溢位隱藏的時候你就寫,這樣就不用寫清楚浮動的樣了   

在父元素上設定overflow這個屬性,如果父元素的這個屬性設定為auto或者是hidden,父元素就會擴充套件包含浮動

4.after偽類

利用偽類元素來清除有浮動的標籤,也就定義乙個公共的類clearfix,給這個類新增css屬性,在裡面進行清除浮動的操作。只要**需要清除浮動,就在**新增乙個清除浮動的類

這種方式這樣理解,就是利用偽類元素,也就是在有浮動的標籤前面新增乙個塊級元素,來達到效果。

.clearfix:after

解決低版本ie的相容性問題

.clearfix

css基礎布局複習筆記(二)定位

css position屬性用於指定乙個元素在文件中的定位方式。top right bottom 和 left 屬 性則決定了該元素的最終位置。相對定位 position relative 相對於元素自身沒有定位之前的位置進行位移!注意 relative給百分比的問題,父級沒有高度的時候,百分比不起...

CSS筆記 浮動和布局 清除浮動

網頁布局的本質 用css來擺放盒子。用盒子進行排序 普通流 標準流 浮動定位 標籤按照預設規定好的方式排列 塊級元素會獨佔一行,從上向下順序排列。常用元素有 div,hr,p,h1 h6,ul,ol,dl,form,table 行內元素會按照順序,從左到右順序排列,碰到父元素邊緣則自動換行。常用元素...

CSS基礎和布局複習

table布局 div布局優勢 瀏覽器支援完善 表現和結構分離 樣式設計控制功能強大 可以繼承,層疊處理 transitional 鬆散過度型 strict 嚴格型 frameset 比較不常用的,使用框架使用這種模式 xhtml中的所有標籤都是要閉合的比如 但是在html中就不必這樣 即可 css...