flexbox布局，媒体查询自适应屏幕大小，box-sizing

box-sizing的用途：防止盒子被撑大。

假设有个块元素，width和height都是200px，如果这个块元素的border是1px，那么这个时候块元素的实际宽高就是202px；假设块元素设置padding属性为1px，那么这个时候块元素的实际宽高就是204px。所以，块元素的padding和border实际都会撑大这个盒子。

要让盒子保持原来的尺寸，不受border和padding的影响的话，可以在css中加这么一句话：

* {

        box-sizing: border-box;

}

box-sizing更改默认的计算元素宽高属性值。更改为border-box后，width=content+border+padding

媒体查询自适应屏幕大小

不同的设备浏览器大小是不同的，媒体查询就是查询窗口大小动态的显示或者调整元素。

@media (min/max-width: px)

{

        元素 {

                width: px;

                height: px;

}

}

@media (prefers-reduced-motion:no-preference){* {

  scroll-behavior: smooth;

}}

flexbox布局

弹性布局方式，与常规的流式或块式布局不同。items 将会在 主轴 (main axis) 或者在 交叉轴(cross axis) 排版。

display: flex