css tricks总结

让box居中

可以固定宽度，然后左右的margin都设为auto

body {
    width: 200px;
    margin: 20px auto;
    border: 20px solid #bdc3c7;
}

让box自适应窗口

max-width:只要比width的60%大，就stay700px，比60%小，就跟随窗口比例缩放。

body {
    width: 60%;
    max-width：700px；
    margin: 20px auto;
    border: 20px solid #bdc3c7;
}

全文统一字体

只要在body里面设font-family，这样下面的元素会继承body了。
就不用在一个一个元素里面单独加了。

rem em px

https://www.cnblogs.com/wind-lanyan/p/6978084.html

在做项目的时候用什么单位长度取决于你的需求，我一般是这样的：
像素（px）：用于元素的边框或定位。
em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

文字居中

text align：center／right／left

css加背景

body {
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544809475101&di=d4fa43c571460db43091ff03c0099696&imgtype=0&src=http%3A%2F%2Fimg.qdaily.com%2Farticle%2Farticle_show%2F201806251150599DzdWFy1coqpjxlt.jpg%3FimageMogr2%2Fauto-orient%2Fthumbnail%2F%21755x450r%2Fgravity%2FCenter%2Fcrop%2F755x450%2Fquality%2F85%2Fformat%2Fjpg%2Fignore-error%2F1);
background-size: cover;
background-position: center;
color: white;
}

@media

设备小于1200px的时候应用下面的样式
反之min-width: 1200px，设备大于1200px的时候应用下面的样式

@media (max-width: 1200px){
    #headinggroup h1 {
        font-weight: 100;
        font-size: 3rem;
    }
}