【消灭代办】第2周 - 数组判断、开发工具、transform:matrix、Grid

 2018.11.19代办一：【数组判断】

代办描述：

　　怎么判断一个数组是数组呢？其实这个也是一个常考的题目

关键考点：

　　1、js中对象类型判断的几种方法

　　2、数组的知识和灵活运用

解决方案s：

　　篇幅过长，另开新页：【怎么判断一个变量是数组类型的？】

 

2018.11.20代办二：【 学习开发工具】

代办描述：

　　开发工具怎么换成4g网络

2018.11.21代办三：【 transform:matrix（）】

代办描述：

 以前系统的看过transform的各个属性值。github

但实际上对于这个属性值没有仔细学。

然后看了看W3C的简介和张大神的讲解，总结如下：

嗯，在开始学习前，被大神灌了一碗鸡汤

 

不过看到后边我发现这么一个css属性值，还需要懂大学时候的线性代数知识、三角函数等

作为一个高中开始就不学数学的艺术生来说，真的是败在了起跑线上。。。

所以，我就姑且先站在巨人的肩膀上了解这个属性值吧。把重要的核心知识点‘请’过来。 [捂脸]

以下知识点见原文：

理解CSS3 transform中的Matrix(矩阵)

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2427

1、transform的那些简单属性都是基于matrix的。

2、变换的中心点默认为图形的中心点。但是重新设置中心点的时候，是从图形左上角为出发点画坐标轴并进行重新更新的。

3、matrix（）中的六个参数及在矩阵中的位置

4、矩阵的计算公式

5、matrix表示偏移需要这么设置：

6、matrix表示缩放对应的参数设置

第一个1，表示横向缩放。第二个1表示纵向缩放。

7、matrix表示拉伸倾斜对应的参数设置

8、matrix表示旋转

 

实在是太复杂了看原文吧。。。

 

2018.11.22代办四：【background-size】如何只让宽度100%填充，高度自适应。

说是经常用这个属性，但是对其还是不太熟悉。

background-size可以设置两个参数：a、b。且参数可以是长度值也可以是百分比值

长度值的情况：
background-size： 20px 30px；（在图片的宽高是20*30时，效果上刚好原图显示。）

百分比的情况：

background-size： 100% 100%；（让图片填充盒模型的范围，如果图片所在和模型的宽高比与图片不想等的话，可能会把图片拉伸变形）

有时候，我想要宽度100%填充，高度自适应，

background-size： 100% auto;

 

但其实，第二个参数不填写，默认为auto，

所以可以写：

background-size： 100%；

 

还有两个参数类型，cover和contain

cover，意思就像其英语含义，就是覆盖，用整个图将整个盒模型范围式填充，保证短边能填满整个区域。如果图片宽度小于盒模型宽度就进行拉伸。

 

contain，是容纳的意思。只要图片中，尺寸较长的一边能完全展示就行了。也就像让整个图片完全展示出来不被裁切就行了。但是会有短边填不满留白的情况。

 

2018.11.23 代办五：【grid】实现九宫格效果

目标样式大致如下：

 

其他具体实现方法汇总见另一篇文章：css布局 - 九宫格布局的方法汇总（更新中...）

今天主要补充Gird这一种写法的代码。

grid学习的路径这里提供三篇文章，可以俗称的那种哦！

5分钟学会 CSS Grid 布局

CSS Grid 布局完全指南(图解 Grid 详细教程)

如何使用 CSS Grid 快速而又灵活的布局

 

2018.11.24 代办六：【nth-child】css3选择器的特殊应用 - 九宫格效果

详见汇总博文 - 九宫格布局

2018.11.25 代办日：【三列布局】九宫格效果汇总 - 补充表格布局 - 汇总完毕

 详见汇总博文 - 九宫格布局

 

 

 

 

 

2018-11-25  21:45:13 第一周整理完毕~继续加油！