每日两题 T18

算法

LeetCode T面试题 01.07. 旋转矩阵[1]

描述

给你一幅由 N × N 矩阵表示的图像，其中每个像素的大小为 4 字节。请你设计一种算法，将图像旋转 90 度。

不占用额外内存空间能否做到？

示例1

给定 matrix = 
[
  [1,2,3],
  [4,5,6],
  [7,8,9]
],

原地旋转输入矩阵，使其变为:
[
  [7,4,1],
  [8,5,2],
  [9,6,3]
]

示例2

给定 matrix =
[
  [ 5, 1, 9,11],
  [ 2, 4, 8,10],
  [13, 3, 6, 7],
  [15,14,12,16]
], 

原地旋转输入矩阵，使其变为:
[
  [15,13, 2, 5],
  [14, 3, 4, 1],
  [12, 6, 8, 9],
  [16, 7,10,11]
]

分析

二维数组的操作，并且要求 原地 操作，不能额外开辟空间。

双重循环，逐个先将 [i][j] 位置元素与 [j][i] 位置元素交换，最后将二维数组内层数组反转即可。

代码

/**
 * @param {number[][]} matrix
 * @return {void} Do not return anything, modify matrix in-place instead.
 */
let rotate = (matrix) => {
  for (let i = 0; i < matrix.length; i++) {
    for (let j = i; j < matrix[i].length; j++) {
      [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]]
    }
  }
  matrix.forEach(row => row.reverse())
};

前端

介绍下 BFC 及其应用

BFC （block format context）就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响

创建BFC的方式

1.html 根元素2.float 浮动3.绝对定位4.overflow 不为 visiable5.display 为表格布局或者弹性布局6.行内块元素、网格布局、contain值为layout、content或 strict的元素

BFC的特性

1.内部box会在垂直方向，一个接一个地放置。2.Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）4.形成了BFC的区域不会与float box重叠5.计算BFC高度时，浮动元素也参与计算

References

[1] 面试题 01.07. 旋转矩阵: https://leetcode-cn.com/problems/rotate-matrix-lcci/