二阶段周总结

一、flex布局

       1.作用：灵活快速的开发网页，避免了浮动脱标的情况，非常适合用于结构布局。

       2.组成：弹性容器（父级）、弹性盒子（子级）、主轴和侧轴。

       3.使用：给父级添加display：flex；

                    主轴的属性：justify-content:center（居中）/space-around（空白间距在盒子两侧）/space-between（空白间距在盒子之间）/space-evenly（空白间距在盒子和容器之间）。

                    侧轴的属性：align-items：center（居中）/stretch（拉伸高度）。

                    给盒子自身添加的属性：①align-self：center（居中）/stretch（拉伸高度）。②flex：数值（父级剩余尺寸的份数）;

       4.主轴方向属性：flex-direction：column（列，垂直）；主轴默认为水平（cow）排列。

       5.换行属性：flex-wrap：wrap（换行）/nowrap（不换行，默认的）。

       6.行对齐方式属性：align-content：center（居中）/space-around（空白间距在盒子两侧）/space-between（空白间距在盒子之间）。

二、移动适配

       1.rem移动适配：是相对于HTML标签的字号计算结果的星对单位，1rem=1HTML字号大小。使用方法是：①添加媒体查询：@media（媒体特性）{选择器{属性：值；}}，例如：@media（width:375px）{html{font-size:37.5px;}}，添加了几个媒体查询，就会适配几种视口设备；②添加flexible.js框架来自动配合rem实现适配：<script src="./js/flexible.js"></script>，可以依赖框架里已经写好的代码实现各种视口宽度设备的适配。特点;HTML字号大小为视口宽度的十分之一。

       2.vw/vh移动适配：相对于视口宽/高的尺寸计算结果的相对单位，1vw/vh的值为宽/高的百分之一。特点：不需要额外添加媒体查询或者js框架，直接写宽高代码就可实现各种视口设备的适配，简单适用。

三、less的使用：是css的一个预处理器，使css具备一定的逻辑性和计算能力（嵌套写法和算术运算），可以快速生成对应的css代码。相关写法如下：

 

嵌套写法

变量写法

 

导入其他less文件写法

指定路径导出写法

禁止导出

算术写法

 

 

 

 

 

 

 

 

四、响应式布局：核心就是媒体查询，根据视口宽度，设置差异化样式。

       1.常用写法：max-width和min-width。连续使用max时从大到小，连续使用 min时从小到大，避免层叠的情况。link写法：

        2.bootstrap框架的使用方法：先引入样式

 再调用里面的类名。

       3.栅格系统：用于布局响应式网页，把网页等分成12份，根据每个内容占的份数进行排布。

代码：

四个盒子在大中小屏中分别占的份数为3/6/12，分别代表一行显示4个、2个、1个

       4.字体图标的引用：与iconfont字体图标方法一样，先引入样式表，再引用两个类名。

       5.轮播图的引用方法：先引入bootstrap的样式表，再引用 两个js，最后复制对应代码修改部分内容。