Html&CSS 今日心得

今天和秋秋一塊兒review了一下我本身寫的登陸頁面。她給我提了幾個point，對我頗有啓發。

 

css樣式的代碼和html代碼分離。

我本身作的時候是在google console裏面調好了樣式之後就直接copy到了對應的tag裏，而不是在css中經過selector來找到元素後設置樣式。

這樣的作法我感受和java代碼中一樣的函數在個各種中反覆出現有些相似。將html和css徹底分離開來有幾個好處：

邏輯上，看html代碼的時候不用關心它對應的樣式，而只用關心html的結構；

另外在之後修改的時候，這樣的作法就避免了須要到多處去尋找相應的地方修改。例如：我想修改<div class="example">...</div>這個div的樣式時，若是我有部分樣式是寫在html裏，有部分寫在了css裏，甚至我都不肯定哪些在html哪些在css裏，我就必須檢查兩個文件。可是若將html和css很明確的分隔開來，修改的時候就省下了很多麻煩。

 

border設置

在設置border時我是這樣作的：

    border-style: solid;

    border-width: 1px;

    border-color: gray;

今天才知道這樣就OK了：

   border：1px, solid, gray

 

padding和margin的區別

我想把兩個元素之間的間隔距離拉大，使用了padding。但其實更好的作法是使用margin。padding和margin的區別是：

 

簡單的說padding是內容和邊框的間隔，而margin是元素和元素之間的間隔。也就是說若是我用了padding來加大元素間的間隔，當元素的背景和大背景相同時確實是達到了效果，可是其實這兩個元素的border仍是挨在一塊兒的。而當使用margin的時候才真正的將兩個元素從border到內容分割了開來。

 

margin的使用

margin: 10px, 20px, 10px, 20px; ->對應的是上，右，下，左，也就是上下10px，左右20px

margin: 10px, 20px; ->對應：上下，左右，效果同上

margin: 10px, 20px, 30px;->對應：上10px，左右20px，下30px

margin還可使用auto方法來自動設置，可是使用auto時必須同時給該元素設置width，不然margin並不知道如何進行自動的設置：

    margin: 0 auto;

    width: 1170px;

這樣的效果是：元素寬爲1170px，兩邊的間隔將自動設定。

 

overflow-hidden的使用

本身實踐的時候已經發現了須要使用overflow-hidden來清樣式，這樣上一層的樣式纔不會影響到下面的元素的樣式。可是個人使用方法是在須要clean flow的地方顯示的寫出了overflow-hidden。

我認爲這樣作並無大的問題，只是這樣一來css中增長了不少重複代碼。

解決方法是在須要clean flow的tag下加上一個clear-float的class：

/*style.css中*/

.clear-float {

     overflow: hidden;

}

/*login.html中*/

<div class="footer clear-float"> …</div>

 

position的使用

我認爲position相對於別的樣式來講相對複雜，由於它很難調到本身滿意的樣子。position使用的時候，將會把當前的元素從context flow裏單獨拿出來設置樣式，這樣形成的一個結果就是後面的元素就不會根據html的context flow來爲該使用了position的元素留出位置。所以，在使用position的時候必定要記得給元素顯示的設置width和height。

postion有三個屬性：fixed，relative，absolute。總結來講：

fixed：相對瀏覽器的位置固定。

relative：相對定位元素會相對於它在正常流中的默認位置偏移。

absolute：相對於static定位之外的第一個父元素進行定位。

 

總結

之前總以爲html很簡單，css很麻煩。其實都錯了，html有很深的講究，實現一樣的結構使用的html有好有壞，好的html是結構清晰調理分明的，讓人一眼就能明白總體結構和各部分語義。css看起來很複雜，須要不停的調整來達到本身想要的效果，可是其實也有不少的方法須要更多的實踐和練習去發現和熟悉。

html和css也須要保持代碼的整潔。clean code不是隻對後臺代碼纔有效的準則。