前端整理

即便很忙很忙,也請你放下手中的事,抽出一點時間,來總結一下過往的點點滴滴。git


這篇文章是我近兩天看了「網易雲課堂」的心得,記錄下來留做之後能夠回顧。我在GitHub上也有上傳代碼:源碼地址github

我自己是一個PHPer,因此稍微複雜一點的Html和Js就暈乎乎的,大體的解題思路我其實很是清楚,但一遇到Css我就迷糊。相對定位、絕對定位、樣式繼承、浮動等等吧字體


首先說一下基礎類型選擇器
包括標籤選擇、ID選擇、class選擇,在開發中,咱們也會遇到一個標籤應用多種樣式的狀況,好比:<div class="circle font-32"></div>這裏其實就是類選擇器,多個類之間使用空格隔開。在好比在Css文件中會常常看到這樣的代碼:body,ul,ol{margin:0px; padding:0px},多個標籤選擇器見使用逗號隔開,表示每一個標籤都應用這樣的樣式;又或者.circle ul表示class=「circle」下的ul標籤應用的樣式,這中帶有層級關係的樣式,也使用空格進行分割。code

其次就是在開發的過程當中,常常會忽略margin個padding的佔位,致使div換行顯示。實際一個div的大小其實爲:margin + padding + width;繼承

在其次就是一些小的細節:好比外邊距的合併,在一個元素出如今另外一個元素的上邊時,第一個元素的下外邊距與第二個元素的上外邊距會發生合併;在float操做以後,通常都會追加一個<div style="clear:both;">來消除浮動的影響;ci

最後總結一下居中的使用:1、要求字體的line-height等於div的height,這樣能夠作到垂直劇中;2、使用margin:0px auto也能夠作到div水平居中開發

相關文章
相關標籤/搜索