css裡的一些誤區以及常見錯誤

2021-10-09 05:36:03 字數 1466 閱讀 9841

1.float浮動:

相信很多小夥伴在使用float浮動時遇見過這幾個問題:底下的元素「鑽」到定義了float元素的下方,這是由於父元素沒有設定高度,或者高度為auto狀態,由於float不會撐起來父元素,所以才會導致這種情況,那麼我們可以通過以下幾種方式解決:

1.通過定義乙個空的div設定高度來撐起父元素,這種方式簡單粗暴,瀏覽器相容

性也比較好,但是會造成html方面**臃腫不優雅。

2.通過父元素設定overflow:hidden或者outo解決

3.通過給跑旁邊的乙個元素設定clear:both清除浮動

4.推薦用法:定義affter偽元素,因為偽元素不屬於文件流,正如他字面意思偽元

素:不真實的元素,這樣的好處在於脫離了html方面的設定,通過設定display:

block以及clear:both或者定義高度來解決

2.display與visibility隱藏元素的區別
1.display設定none來隱藏元素,他的所有子元素以及背景等等全部消失,而且不

佔據空間

2.visibility設定為hidden則元素隱藏但是佔據原來的空間,所以我們可以用他

的這個屬性來進行布局,也可以結合js做一些動態效果

3.使用margin、padding、left、top等的一些誤區
1.margin代表外邊距,文件流中是以其他元素邊界,例如兩個div,並且都設定了

高度,那麼第二個div元素的margin-top:100px 就是相對於第乙個div的底部

而言,在父子關係中則有些特殊,子元素在水平方向上這樣設定完全沒有問題,

但是豎直方向會出現問題,我們可以通過以下幾種方式解決這個問題:為父或子

元素設定脫離文件流position:absolute以及float浮動()、為父元素設定邊框、為

父元素設定overflow:hidden/auto 。 那麼在脫離了的文件流的position:absolute

以及 float浮動中:定義了position:absolute的元素先去找父元素中有沒有定義

position屬性如果有margin就相對于父元素的邊界而言,如果父元素沒有定義則

接 著往上找,直到最外層位置,還要注意如果在定義了position:absolute中的

子元素中即使用left又使用margin則效果疊加。padding則是相對於內容來說的

即單個盒子,也可以理解為乙個單獨的元素內容與他邊框之間的距離設定。

left、top是相對於position元素來說的,他們也代表了與邊界的關係,不同

的是他們對應的邊界是定義了position的父級元素或者最上層html元素(父

類以及父類的屬性沒有position時)

好了,今天就分享這些筆者初學時經常遇到的問題,有不妥之處還請指出 ,前端是個較為簡單又稍微麻煩的知識,想要徹底掌握不免要吃一些苦頭,所以不要怕錯誤,要在錯誤中總結昇華,精益求精!

hibernate一些常見錯誤

1.出現該問題可能是在倆個多對多的實體類的對映配置檔案裡 錯將set的table配成了倆個實體類的表名,事實上應該設定為橋表的表名 2.出現該問題可能是在實體類的對映配置檔案裡 hibernate5.0 以後不需要建立服務註冊物件 serviceregistry 直接這樣建立 configurati...

OA的一些常見錯誤

錯誤原因 後台的id沒有獲取到值 擴充套件 乙個引數需要在連續的幾個頁面中用到,怎麼樣傳值 在頁面中設定隱藏域 利用cookie傳值 錯誤原因 如果泛型類被例項化,this.getclass getgenericsuperclass 返回將是class,該this就是當前類的物件,所以乙個被泛型化的...

ffi一些常見的錯誤

現在ffi已經有兩年多沒人維護了,對於node版本的快速迭代,ffi現在已經連安裝都可能失敗了。本人測試的時候使用 node v10.x,node gyp v3.8 的時候總會報錯的,後面降級為node v8.13 node gyp v3.7 安裝的時候偶爾還是可以成功,建議著兩個版本不要太新了,會...