小白的前端进阶学习1-静态网页

小白的前端进阶学习1-静态网页

实习用vue做了仿饿了么app之后，发现自己html+css+js这部分还有一些知识比较欠缺，所以决定通过静态网页查漏补缺！！
本人是网络工程专业，但是兜兜转转还是觉得对前端非常感兴趣，自学ing，为了能成为一个前端工程师，冲啊！！

总结：

1. 版心、通栏
   进行页面开发必须理解版心和通栏，通俗一点讲版心就是页面的主题内容所占的部分 通常两侧会留有一些空白
   通栏的宽度常常是与整个页面宽度一直的，两侧没有留白

个人认为理解通栏和版心的概念对于提高代码的复用非常有帮助。

2. margin传递问题：

出现：父元素包裹子元素div 给子元素设置margin-top时，margin-top会加到父元素上
html：

    <div id="box"></div>
    <div id="box1">
        <div id="box2"></div>
    </div>

css:

    #box {width:200px; height:200px; background:pink;}
    #box1{ width:200px; height:200px; background:red;}
    #box2{ width:100px; height:100px; background:blue; margin-top:100px;}

预想的效果：

实际的效果：这里可以看到虽然是给蓝色div设置的margin-top，但实际上这个margin-top是加给了整体的div 。

解决方案：

1. 触发BFC规范
（1）浮动元素：float除none以外的值
（2）绝对定位元素：position（absolute、fixed）
（3）display为inline-block、table-cells、flex
（4）设置overflow除visible以外的值（hidden、auto、scroll）
第1、2条设给父容器或子容器均可
第3、4条加给父容器

2. 父容器加边框

    #box {width:100px; height:100px; background:pink;}
	#box1{ width:100px; height:100px; background:red;border:1px solid red;box-sizing: border-box;}
    #box2{ width:50px; height:50px; background:blue;margin-top: 25px; }

注意：这里使用box-sizing是让盒子整体宽高为100px，因为在盒模型中，默认的width和height不包括border。

3. 通过父容器的padding来调整box2的位置

    #box {width:100px; height:100px; background:pink;}
	#box1{ width:100px; height:75px; background:red;padding-top:25px;}
    #box2{ width:50px; height:50px; background:blue; }