关于Html+css阶段学习总结

一、学习经历

进入大学不久，就加入了社团，从而对前端有了一个初步的了解，之后也做过一些学校的官网，积累了一些微小的经验。
到了大二的时候，学校开设了专门的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，还需要不断的练习。