盒模型
盒模型主要用来描述元素所占空间的内容。它由四部分组成：margin、border、padding、content 盒模型包括两种：标准盒子模型和IE盒子模型
标准盒子模型：width = content(默认的，box-sizing:content-box)
IE盒子模型： windth = border+border+content(box-sizing:border-box)
文档流和元素定位
正常的文档流在HTML里面为从上到下、从左到右的排版布局
文档流布局可以使用position样式进行调整，包括static(默认值)、relative、absolute、fixed、inherit（继承父元素）
属性值为relative时，元素会保持原有文档流，但相对本身的原始位置发生位移，且会占用元素原本的位置
属性值为absolute时，元素会脱离文档流且不占位，相对于设置了定位的父元素(不包括static定位)发生位移。如果没有找到设置了定位的父元素，则相对于浏览器窗口进行定位
属性值为fixed时，元素会脱离文档流且不占位，相对于浏览器窗口进行定位
元素堆叠z-index
当同级元素不设置在-index或者z-index相同时，后面的元素会叠在前面的元素上方
当同级元素z-index不同时，z-index大的元素会叠在z-index小的元素上方
z-index的值的设置效果还会受到父元素的z-index的值的影响。z-index的值的设置只决定同一父元素中的同级子元素的堆叠顺序
常见页面布局方式
常见的页面布局方式包括：传统布局、flex布局、grid布局
flex布局是一种一维的布局模型，即弹性布局
flex布局常用的方式包括：
flex-direction：调整flex元素在主轴的排列方式
flex-wrap：实现多行flex容器如何进行换行
justify-content：调整flex元素在主轴上的对齐方式
align-items：调整flex元素在交叉轴上的对齐方式
grid布局又称为网格布局，它将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系
使用grid布局可以实现网页的响应式布局；实现灵活的12列布局；与其他布局方式结合，与css其它部分协同合作
grid布局适用于较大规模的布局，flex布局适合页面中的组件和较小规模布局
