2020/7/28前端学习日记
CSS3
Flex
-flex布局是什么
Flex 是 Flexible Box 的缩写，意味“弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都能指定为flex布局。
使用方法：display:flex
webkit内核浏览器需要加上-webkit-前缀
display:-webkit-flex
注意，设为flex布局后，子元素的float，clear，vertical-align属性将失效。
-基本概念
水平轴为主轴，主轴开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。垂直的叫交叉轴，开始位置叫做cross start，结束位置叫做cross end。
-容器属性
-
flex-direction
决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse
} -
flex-wrap
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowap: 默认不换行
wrap: 换行，第一行在上方
wrap:reverse: 换行，第一行在下方 -
flex-flow
flex 是 flex-direction属性和flex-wrap属性的简写形式，默认为row nowarp
.box {
flex-flow: flex-direction || flex-wrap;
} -
justify-content
定义了在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
} -
align-items
定义了在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
baseline: 项目的第一行文字的基线对齐
stretch（默认值）: 如果项目未设置高度或设为auto将占满整个容器的高度。 -
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线将不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | sapce-around | stretch;
}
项目属性
- order
定义了项目的排列顺序。数值越小排列越靠前，默认为0. - flex-grow
项目放大比例，默认为0，即如果存在剩余空间也不放大。 - flex-shrink
项目缩小比例，默认为1，即如果空间不足，项目将缩小。 - flex-basis
定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性计算主轴是否有多余的空间。默认值为auto，即项目本来的大小。 - flex
flex是flex-grow，flex-shrink，flex-basis的简写，默认值为0，1，auto。后两个属性可选。 - align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素align-items的属性，如果没有父元素，则等同于stretch。
清楚浮动的几个方法（BFC）
- 使用带有clear属性的空元素
- 使用overflow属性
- 给浮动的容器添加浮动
- 使用邻接元素处理，给浮动元素后面的元素添加clear属性
- 使用after伪元素，在元素末尾添加一个看不见的元素块清理浮动
BFC
三种常见方案
- 普通流
- 浮动
- 绝对定位
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发的几种条件
- body根元素
- 浮动元素：float除none以外的值
- 绝对定位元素：position
- display为inline，table-cells，flex
- overflow除了visible以外的值
算法题
剪绳子
给你一根长度为 n 的绳子，请把绳子剪成整数长度的 m 段（m、n都是整数，n>1并且m>1），每段绳子的长度记为 k[0],k[1]…k[m-1] 。请问 k[0]k[1]…*k[m-1] 可能的最大乘积是多少？例如，当绳子的长度是8时，我们把它剪成长度分别为2、3、3的三段，此时得到的最大乘积是18。
示例 1：
输入: 2
输出: 1
解释: 2 = 1 + 1, 1 × 1 = 1
示例 2:
输入: 10
输出: 36
解释: 10 = 3 + 3 + 4, 3 × 3 × 4 = 36
提示：
- 2 <= n <= 58
这题一开始我的第一想法就是递归，虽然也知道递归肯定会超时，但是还是想试试。果不其然超时了。看到这题的标签是动态规划，想了半天不知道怎么规划，最后看了题解的我沉默了。
先看第一位大神的题解（这位大神已经连续三题碰到了，不得不说真的是大佬）。首先是严谨的用数学公式证明了以下两点：
1.当所有绳段相等时，乘积最大；
2.最优绳段长度为3.
至于怎么证明的就不列出来了，我是没看懂。。
于是问题就很简单了：将绳子长度小于等于3的单独输出，之后其他情况可以分为三种：分为若干个长度为3的绳段后剩下0，1，2三种情况。
剩下0：将所有的3相乘；
剩下1：将最后一个3和1合并成为4；
剩下2：将所有3和2相乘。
就有了以下代码：
class Solution {
public int cuttingRope(int n) {
if(n == 2) return 1;
if(n == 3) return 2;
int a = n/3;
int b = n%3;
if(b == 0) return (int)Math.pow(3,a);
if(b == 1) return (int)Math.pow(3,a-1) * 4;
// if(b == 2) return (int)Math.pow(3,a) * 2;
return (int)Math.pow(3,a) * 2;
}
}
后来看另一个解法发现，随着绳子长度变长，最优解的数列是一个有规律的数列，即每n>6时，n的值为n-3的三倍，所以答案也显而易见了。
剪绳子2
给你一根长度为 n 的绳子，请把绳子剪成整数长度的 m 段（m、n都是整数，n>1并且m>1），每段绳子的长度记为 k[0],k[1]…k[m - 1] 。请问 k[0]k[1]…*k[m - 1] 可能的最大乘积是多少？例如，当绳子的长度是8时，我们把它剪成长度分别为2、3、3的三段，此时得到的最大乘积是18。
答案需要取模 1e9+7（1000000007），如计算初始结果为：1000000008，请返回 1。
示例 1：
输入: 2
输出: 1
解释: 2 = 1 + 1, 1 × 1 = 1
示例 2:
输入: 10
输出: 36
解释: 10 = 3 + 3 + 4, 3 × 3 × 4 = 36
这题的总体思路是与上题一样的，只不过多了个取余的过程。上代码。
class Solution {
public int cuttingRope(int n) {
if(n <= 3) return n - 1;
int a = n/3;
int b = n%3;
if(b == 0) return (int)pow(3,a);
if(b == 1) return (int)(pow(3,a-1)*4%1000000007);
return (int)(pow(3,a)*2%1000000007);
}
private long pow (int n, int m){
long res = 1;
for(int i = 0;i < m;i++){
res *= n;
res %= 1000000007l;
}
return res;
}
}
（写的有点捞。。）
二进制中1的个数
请实现一个函数，输入一个整数，输出该数二进制表示中 1 的个数。例如，把 9 表示成二进制是 1001，有 2 位是 1。因此，如果输入 9，则该函数输出 2。
示例 1：
输入：00000000000000000000000000001011
输出：3
解释：输入的二进制串
00000000000000000000000000001011 中，共有三位为 ‘1’。
示例 2：
输入：00000000000000000000000010000000
输出：1
解释：输入的二进制串
00000000000000000000000010000000 中，共有一位为 ‘1’。
示例 3：
输入：11111111111111111111111111111101
输出：31
解释：输入的二进制串
11111111111111111111111111111101 中，共有 31 位为 ‘1’。
public class Solution {
// you need to treat n as an unsigned value
public int hammingWeight(int n) {
int res = 0;
while(n != 0){
res += n&1;
n >>>= 1;
}
return res;
}
}
n&1 = 1 说明最后一位是1
n&1 = 0 说明最后一位是0
java中无符号右移是>>>
还有另一个方法
这可太秀了，学不来。。
树的子结构
输入两棵二叉树A和B，判断B是不是A的子结构。(约定空树不是任意一个树的子结构)
B是A的子结构， 即 A中有出现和B相同的结构和节点值。
例如:
给定的树 A:
3
/ \
4 5
/
1 2
给定的树 B：
4
/
1
返回 true，因为 B 与 A 的一个子树拥有相同的结构和节点值。
示例 1：
输入：A = [1,2,3], B = [3,1]
输出：false
示例 2：
输入：A = [3,4,5,1,2], B = [4,1]
输出：true
我的思路是先使用A的根结点与B的根结点进行匹配，如果值相同则调用函数isAContainsB来判断A是否包含B。若值不相等，则递归查询左子结点和右子结点。
/**
* Definition for a binary tree node.
* public class TreeNode {
* int val;
* TreeNode left;
* TreeNode right;
* TreeNode(int x) { val = x; }
* }
*/
class Solution {
public boolean isSubStructure(TreeNode A, TreeNode B) {
if(A == null || B == null) return false;
// else if(B == null) return true;
if(A.val == B.val && isTreeAreSame(A,B)) return true;
return isSubStructure(A.left,B) || isSubStructure(A.right,B);
}
boolean isAContainsB(TreeNode A, TreeNode B){
if(A == null && B != null) return false;
else if(B == null) return true;
else if(A != null && B != null &&(A.val != B.val)) return false;
return isAContainsB(A.left,B.left) && isAContainsB(A.right,B.right);
}
}
难得自己写出双百的解法，鼓掌！！
二叉树镜像
请完成一个函数，输入一个二叉树，该函数输出它的镜像。
例如输入：
4
/
2 7
/ \ /
1 3 6 9
镜像输出：
4
/
7 2
/ \ /
9 6 3 1
示例 1：
输入：root = [4,2,7,1,3,6,9]
输出：[4,7,2,9,6,3,1]
/**
* Definition for a binary tree node.
* public class TreeNode {
* int val;
* TreeNode left;
* TreeNode right;
* TreeNode(int x) { val = x; }
* }
*/
class Solution {
public TreeNode mirrorTree(TreeNode root) {
if(root == null) return null;
TreeNode tmp;
tmp = mirrorTree(root.left);
root.left = mirrorTree(root.right);
root.right = tmp;
return root;
}
}
递归，简单。