CSS遇到的一些注意点

1、关于height:100%和height:100vh的区别

vh 也就是 viewpoint height  ，作用是设置高度跟屏幕一样，宽度不用设置，自适应

vh 就是当前整块屏幕可视高度的1%，也就是说  height:100vh  相当于 height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

2、弹性布局（display：flex）

    #wrapper{
            /* border: 1px solid red; */
            /* viewpoint height 设置div高度跟屏幕一样，宽度不用设置，自适应 */
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

详细可参考链接：https://www.cnblogs.com/hellocd/p/10443237.html

3、1em = 16px（弹性布局的单位）

1em代表字母的高度

4、媒体查询

@media

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 

5、部署网站

（1）购买服务器

（2）GitHub部署（不过仅限于本地访问）

（3）http-server

（4）parcel