CSS總結之易錯易忘點

2021-07-25 03:57:28 字數 1934 閱讀 7634

一，清除浮動；

二，設定margin:0 auto;後，元素仍不居中；

一， clear float

作為乙個前端菜鳥，常常在為了讓兩個div水平排列，或者想讓一些元素在其父元素框內靠左或靠右時，使用css float 屬性。而又常常因為忘記 清除浮動 而導致看到自己做出來介面時，實力懵逼加不解，這才知道「樣式表」也不是好惹的。

因為給元素設定了float屬性之後，會自動生成塊級框，不管元素本身是什麼是何種元素；其次浮動框不會在文件的普通流中（從文件流中脫離，無法撐開父元素）。這也是為什麼忘記清楚浮動會導致做出來的介面和預期不一樣的原因。

經過各方參考了解了清楚浮動方法，主要是參考w3cplus上的解決方案。

w3cplus clear float

clear:both;

clear屬性規定元素的哪一側不允許其他浮動元素，而屬性值both,表示在元素的左右兩側均不允許出現浮動元素。

使用這種方法清除浮動的具體操作時，給浮動元素新增乙個額外的兄弟元素div或者br，並定義樣式為」clear: both」。

.clear
一般來講記住此方法的核心，clear:both;就可以了，但是作為前端應可能的處理瀏覽器相容性問題，而且後面三個屬性並不難理解，所以我每次都會寫上。這種方法，有乙個我覺得不完美的地方，就是新增了乙個額外的元素只是為了清除浮動。

2.　overflow

.includefloat
overflow屬性指出如果內容溢位乙個元素的框發生什麼。其屬性值，auto，hidden都可用來清除浮動，但前者據說對seo比較友好(前端好像老會提到這個seo，打算之後寫一篇來**一下)。

在這裡我第一次看到zoom屬性，不明白是什麼意思，一番網上衝浪之後，我了解到這是乙個ie專有的屬性，用來解決一些，ie相容性問題。

關於zoom，傳送門

上面的清除浮動據說還可以，這樣寫:

.includefloat 


* html


.includefloat
3.　clearfix

這種方法據說是目前最拉風的一種清除浮動方法，我認為主要是因為此方法用到了css偽類。

.clearfix


:before,


.clearfix


:after


.clearfix: after


.clearfix
這種方法的原理和第一種clear:both;一樣。

上面這種方法有個優化公升級版本，也是我現在在使用的：

.clearfix


:before,


.clearfix


:after


.clearfix


:after


.clearfix
這段**我每次 在重置css的時候就會寫上了，一來是怕自己忘記了，二來是在需要清除浮動的時候，直接新增乙個clearfix類名就可以了，不需要再去寫css**了。

二，設定margin:0 auto;後，元素仍不居中

設定margin:0 auto;後，元素仍不居中原因應該是忘記給元素設定width值，

剛開始使用css時，發現給乙個元素設定其左右外邊距值為auto時，居然可以讓元素居中，也是欣喜了好一陣，畢竟剛開始時，感覺什麼讓元素水平，垂直居中，分分鐘讓我生無可戀。（傳送門　大神帶我玩轉居中）但是使用這個屬性時，我老是忘記設定元素的width值，而且往往不想給元素乙個固定的寬度，所以也就看不到居中的效果。

好啦，這次先記錄到這，see you next time!

如有錯誤，請多指教。

總結 易錯點

題目要求是 結尾，我使用了str 1 str 2 single line containing only marks the end of a test case.題目給的是 f1 1 f2 2 fn fn 1 fn 2 n 3 我卻從f0開始推，並且迴圈跟著從0開始了 題目可能會出現一道腦筋急轉彎...

C 易錯點總結

1.下面這段 考察變數的作用域問題。cpp view plain copy include using namespace std void other intmain 答案如下 main 0 10 0 other 4 0 15 main 0 10 8 other 6 4 15 考察點 區域性作用域...

pandas易錯點總結

1.按照多個條件篩選時，應當使用 而不是and,如 lc.loc lc grade b lc loan amnt 5000 2.單一series賦值給series之前需要轉換資料格式，如int,float,datetime 3.loc,iloc,ix區別 loc按索引名稱取值，如 import pa...