HTML

CSS

1. 行盒和块盒是 CSS 盒模型中的两种基本盒子类型，它们有以下区别：

  1. 行盒是由一行内的一组连续的行内元素组成的，而块盒则可以包含多个行盒和其他块盒。

  2. 行盒的宽度是由其包含的行内元素的宽度决定的，而块盒的宽度可以通过设置宽度属性或使用默认宽度来确定。

  3. 行盒的高度是由其包含的行内元素的高度决定的，而块盒的高度可以通过设置高度属性或使用默认高度来确定。

  4. 行盒的布局方式是从左到右排列，而块盒的布局方式是从上到下排列。

总之，行盒和块盒在 CSS 盒模型中有着不同的作用和表现形式，开发者需要根据实际需求来选择使用哪种类型的盒子。

2. 行盒元素有哪些？块盒元素有哪些？行块盒元素有哪些？他们各有什么区别？

  1. 行盒元素是指在CSS中具有”inline”或”inline-*”值的display属性的元素。常见的行盒元素包括<span>、<a>、<strong>、<em>等。行盒元素在布局时会尽量紧凑地排列在一行上，并根据内容的大小进行调整。

  2. 块盒元素是指在CSS中具有”block”或”inline-block”值的display属性的元素。常见的块盒元素包括<div>、<p>、<h1>到<h6>等。块盒元素会独占一行，宽度默认为父元素的100%。

  3. 行块盒元素是指既具有行盒特性又具有块盒特性的元素。常见的行块盒元素包括<button>、<input>、<textarea>等。行块盒元素会独占一行，但宽度根据内容自适应。

注意：这些元素之间的区别主要在于它们的布局特性和默认显示方式。行盒元素会尽量紧凑地排列在一行上，而块盒元素会独占一行。行块盒元素则具有行盒和块盒的特性，既能在一行上排列，又能独占一行。这些特性对于页面布局和元素排列非常重要，开发者可以根据需要选择合适的元素类型来实现所需的布局效果。

3. 高度坍塌问题

在CSS中，高度坍塌（Collapsing Margins）是指当两个或多个垂直相邻的元素具有相邻的外边距时，外边距会合并成一个较大的外边距，而不是简单地相加。

高度坍塌可能会导致意外的布局效果，特别是在垂直方向上。这种行为符合CSS规范的定义，但在某些情况下可能并不是我们期望的。

下面是一些解决高度坍塌的常见方法：

  1. 使用padding代替margin：如果可能，你可以使用padding属性替代margin属性。padding不会导致高度坍塌，因此可以避免这个问题。

  2. 使用overflow: auto或overflow: hidden：将容器元素的overflow属性设置为auto或hidden，可以创建一个新的块格式化上下文（Block Formatting Context），这样可以阻止外边距的合并。

  3. 使用浮动（float）：对于某些布局需求，将元素浮动也可以解决高度坍塌的问题。浮动元素会创建一个新的块格式化上下文，从而阻止外边距的合并。

  4. 使用display: inline-block：将元素的display属性设置为inline-block，可以防止外边距的合并。不过需要注意的是，这可能会对布局造成其他影响，比如会引入行框（line box）和文字基线（baseline）的调整。

  5. 使用border或outline：为元素添加一个边框（border）或轮廓线（outline），可以阻止外边距的合并。这是一种常见的技巧，尤其是在布局中需要使用margin的情况下。

JS

在 JavaScript 中，有几种方法可以将数字取整到整数：

  1. 使用 Math.round() 方法将数字四舍五入为最接近的整数。

  2. 使用 Math.ceil() 方法将数字向上取整为最接近的整数。

  3. 使用 Math.floor() 方法将数字向下取整为最接近的整数。

  4. 使用 parseInt() 或 parseFloat() 方法将数字转换为整数或浮点数。如果使用 parseInt() 方法，可以通过传递第二个参数来指定数字的进制。例如，parseInt(‘10’, 2) 将把二进制字符串 ‘10’ 转换为十进制整数 2。

前端工程师工作中场合用的20个方法集合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//1 打印当前时间
const now = new Date();
console.log(now)

//2 判断是否为数组
const  arr = [1,2,3,4,5,6,7,8,9,10] 
const ifIsArray = Array.isArray(arr)
console.log(ifIsArray)

//3 去重
const arr1 = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5]
const arr2 = [...new Set(arr1)] 

//4 连接数组
const arr3 = [1,2,3,4,5]
const arr4 = [6,7,8,9,10]
const arr5 = [...arr3,...arr4]
const res = arr3.concat(arr4)
console.log(arr5) //方法一
console.log(res) //方法二

//5 数组sort()排序
const arr6 = [1,2,3,4,5,6,7,8,9,10]
const arr7 = arr6.sort((a,b) => a-b); //从小到大
const arr8 = arr6.sort((a,b) => b-a); //从大到小
console.log(arr7)
console.log(arr8)

//6 数组去除最后一个元素
const arr9 = [1,2,3,4,5,6,7,8,9,10]
const arr10 = arr9.slice(0,-1)
console.log(arr10)

//7 数组翻转
const arr11 = [1,2,3,4,5,6,7,8,9,10]
const arr12 = arr11.reverse()
console.log(arr12)

//8 对象的长度
const obj = { a: 1, b: 2, c: 3 }
console.log(Object.keys(obj)) //["a", "b", "c"]
console.log(Object.values(obj)) //[1, 2, 3]
console.log(Object.entries(obj)) //[["a", 1], ["b", 2], ["c", 3]]
const objLength = Object.keys(obj).length
console.log(objLength) //3

//9 数组拍平
function falt(arr){
    if(!Array.isArray(arr)){
        return
    }
    let res = []
    arr.forEach(item => {
        if(Array.isArray(item)){
            res = res.concat(falt(item))
        }else{
            res.push(item)
        }
    })
    return res
}
const arr13 = [['a',1],['b',2],['c',3]]
console.log(falt(arr13)) //["a", 1, "b", 2, "c", 3]


//10 如何判断一个对象是否为空对象
const obj1 = {}
const isEmptyObj = Object.keys(obj1).length === 0 && obj1.constructor === Object //constructor返回对创建此对象的数组函数的引用
console.log('isEmptyobj',isEmptyObj) //true

//11 url
const currentUrl = window.location.href //获取当前url

//12 
window.location.replace('https://www.baidu.com') //跳转到百度

//13 cookie
document.cookie = 'name=name;value=value;expires=date;path=path;domain=domain;secure' //设置cookie

//cookie expires = 
const ifExpires = document.cookie.split(';').some(item => { //some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
    return item.trim().indexOf('expires') //trim() 方法用于删除字符串的头尾空格。在后面加上===0，可以判断expries是否过期
})
console.log(ifExpires) //判断数组中是否有expries
// 获取cookie
const cookie = document.cookie
console.log(cookie)

//删除cookie
document.cookie = 'name=;expires=Thu, 01 Jan 1970 00:00:00 GMT'

//14
const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth||0) //获取浏览器视口宽度
const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight||0) //获取浏览器视口高度