响应式布局入门

1.设置最大宽度

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

2.父元素属性设置

.row{
    width:100%; /*宽度设置为窗口宽度*/
    display:flex;  /*弹性盒模型*/
    flex-wrap:wrap;  /*放置在一行（？）*/
}

3.子元素宽度设置

.row1{
    width:8.33%;
}

.row2{
    width:16.66%;
}

.row3{
    width:25%;
}
...

子元素将页面划分成12列，上面分别为1/12,2/12,3/12,4/12…的列宽度

4.页面效果

5.相关学习资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

6.负空间
（1）内边距：padding:10px;
（2）外边距：margin:10px;

7.溢出处理
添加属性：overflow:auto;

8.媒体查询(使页面显示适用于不同设备)

@media only screen and (max-width:300px) {
    p{
        background:#ccc;
    }
}

9.Normalize.css
一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
http://jerryzou.com/posts/aboutNormalizeCss/

10.占位图

<a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a>

图片来源：https://placeholder.com/

11.各种字体
https://fonts.google.com/