關於Html+css階段學習總結

Kerjinl發表於2018-04-02
HTMLCSS

一、學習經歷

進入大學不久，就加入了社團，從而對前端有了一個初步的瞭解，之後也做過一些學校的官網，積累了一些微小的經驗。
到了大二的時候，學校開設了專門的html+css課程，從中也學到許多新的html，css知識，也學到了如何規範的編寫程式碼。但由於個人的懶散，兩年半的時間大多是渾渾噩噩的度過，到頭來並未學到太多有深度的知識。
再之後，通過專業老師的指導，開始進行前端知識的全面及系統性的學習。而這篇文章便是對這次學習的一次階段性總結。

二、學習感受

細枝末節，一點一滴的積累

聽專業老師講課，最明顯的一點感受，就是他會提出一些特別的方法，用最簡單的屬性來實現你想要的效果。
例如 呼吸燈 案例。

在我看到這個案例時，第一想法當然是將 div 設定為 border-rudios:50% 的圓形容器，兩個一巢狀，再通過animation 或 js 來控制動畫就完事了。

<body>
    <div class="container">
        <!-- 正方形，呼吸燈的容器 -->
        <div class="rec">
            <div class="outer_circle">
                <div class="inner_circle">
                    
                </div>
            </div>
        </div>
        <!-- 資料資訊顯示 -->
        <div class="info">
            HI
        </div>
    </div>
</body>

然而，老師卻提了一個問題，如何控制寬高相等？————當然是設定固定寬高了！ 老師又問，有沒有別的比較簡單的方法呢?————當然是有的啊！老師這樣問，那當然是有的吧:)然而我那榆木腦袋卻是想不出個什麼方案出來。

子元素對於父元素有繼承關係，其寬度預設填充父元素寬度，此時，諾是將父元素設為正方形，使子元素高度為100%，那麼子元素是不是必然也是一個正方形？再通過父元素的 padding 屬性來控制子元素的大小，這樣豈不是很方便？當然，前提得將 div 設定為 邊框盒子(box-sizing:border-box)。

    <style>
    .container {
        width: 230px;
        height: 330px;
        background-color: #343434;
        margin: 0 auto;
    }
    .rec {
        height: 230px;
        box-sizing: border-box;/*邊框盒子，外圓是被擠出的*/
        padding: 34px;
    }
    .rec > .outer_circle {
        box-sizing: border-box;
        height: 100%;
        border:6px solid #999;
        border-radius: 50%;
        padding: 10px;
    }
    .rec > .outer_circle > .inner_circle {
        box-sizing: border-box;
        height: 100%;
        border:16px solid #fff;
        border-radius: 50%;
    }
    .info {
        color: #fff;
        text-align: center;
        padding: 1em 0;
    }

</style>

原來 padding 還可以控制子元素的大小！在這之前，我僅用它進行定位而已。
後來，我又學到，在容器（邊框盒子）寬度不固定時，如何使其成為一個正方形（在練習手機音樂播放介面時）。

width: 50%;
height: 0;
padding-bottom: 50%;

在父元素寬高不固定時，通過 padding-bottom 使得容器高度與寬度一致，從而製作成圓。

總結

如上所說的關於 padding 知識，都是對基本屬性及知識點熟練掌握之後便可以較為容易想到的，可見那些基礎知識點是多麼的重要。
希望之後自己能多注重基礎知識的積累，並將其融匯貫通。
html+css 的學習並不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握 css，還需要不斷的練習。

相關文章