The idle Process

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