在css3中新增了width的属性值：max-content;min-content和fit-content、fill-availablea，用来实现以内容为主的尺寸计算方式。fill-available的意义——自动填满剩余的空间

width 是定义元素内容区的宽度；height是定义元素在内容区的高度.在内容区外面可以增加内边距（padding）、边框（border）和外边距（margin），这样的话就成了我们常说的盒子模型，后期内容中会给大家讲到这些

本文并不是否决基于media queries的响应式处理，只是提供另外的一个解决问题的思路。如果你的PC和Mobile的有很多不同的逻辑处理，试试这种一棒子打死的“响应式”策略。

flex容器 + flex项目 ==> flex布局。justify-content 设置主轴上的对齐方式，默认flex-start，也就是左对齐。align-items 设置交叉轴上的对齐方式，默认stretch，也就是拉伸。