歸類一下CSS初級的東西

 

   css基礎的東西集中體如今了「磊盒子」這一個枯燥無味的東西上面，靈活的運用盒子的內外邊距，浮動，定位以及一些基礎的屬性，將一個靜態的頁面變得磊出來，這是CSS基礎的練習。

在css基礎練習裏面有幾點須要注意的小點：

1.margin的塌陷問題，這個問題分文兩點，一種是上下同級的盒子的上外邊距和下外邊距的塌陷問題，這個狀況勁量避免就好，不值一提；第二個問題就須要有良好的意識去注意子盒子的外邊距是否會引發父盒子的外邊距的塌陷，須要不須要運用邊框1px 外加transparent使邊框透明化的方法，使得這個問題獲得解決。

2.padding的問題，padding做用於一個「盒子」的時候，須要注意會不會由於加了padding而使得盒子自己被撐大了，由於一個盒子咱們通常說大小包括盒子自己的width和height還有邊框border的大小以及padding的大小。若是在設置padding以後，盒子被撐大了，而且不是咱們所想要的效果，那麼咱們就須要在盒子的width和height上面前去所設置的padding值，若是padding值設置的是兩邊都有，那麼就須要減去兩倍的padding值。因此說，在不是和熟練的狀況下，除非真的很麻煩，最好仍是連寫，否則容易漏掉一些值以及語句，使得咱們忘記去減掉。

3.浮動的問題，浮動分爲左浮動和右浮動，而且浮動是脫離標準流的，會使本來的行內元素變成行內塊元素，再也不佔據原來的位置，會對後面的「盒子」形成影響，因此咱們須要去清楚浮動。清楚浮動通常有四種方法： overflow： hidden|auto|scro； 插一個單獨的標籤閉合浮動； 單僞類閉合浮動； 雙僞類閉合浮動；

單僞類清楚浮動：

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 

 .clearfix {*zoom: 1;} (這個事爲了適應ie六、7這些奇葩）
雙僞類：

.clearfix:before,.clearfix:after{  content:"."; display:table;}

.clearfix:after{ clear:both;}
.clearfix{*zoom:1;}
浮動配合margin能夠實現盒子的位置的調試，不過對於位置特別刁鑽的，定位就行了
4.定位 定位時一種和隨性的放盒子的方式，只須要知道移動多少距離，就能夠完美的將一個盒子放在上面
定位通常用的有 相對定位：relative； 絕對定位：absolute； 固定定位：fixed; 系統默認的就不說了
相對定位沒有脫離標準流 絕對定位脫離了標準流 
定位要配合邊偏移來使用，包括四個屬性：top bottom left right；

通常來講，說道定位補得不說精靈圖，或者說叫雪碧圖，這個東西通常都用定位來，個別的用浮動。

想要學習前端開發的同窗，能夠加羣：434623999 學習哦！