web前端面试题-基础题2

web前端面试题

1，什么是css初始化？并说说为什么要初始化css样式

css初始化是指：开发者对浏览器的默认样式进行重置

（1），浏览器差异

因为浏览器的兼容问题，不同的浏览器默认样式不同，如果直接写样式，会出现差异，布局出现错乱，所以要进行样式初始化，使得布局统一。

（2），提高编码质量

2，外边距合并，margin为负值？

相邻两个盒子垂直方向尚的margin会发生重叠，视觉上生效的是较大的margin

父盒子中给子盒子设置了上边距会出现在父盒子上方

解决方法：

（1）以内边距代替外边距

（2）给子盒子设置浮动

（3）给父盒子设置边框

（4）绝对定位

margin为负值:那个方向上是负值，盒子最终呈现出的就是向该方向进行一个移动

3，说一说圣杯布局（双飞翼布局），单飞翼布局

圣杯：两端固定，中间自适应

方法1：弹性布局，flex=1

方法2：定位，左右盒子定位，中间盒子宽度100%，设置内边距空出位置。

方法3：浮动+margin负值

单飞翼布局：一端固定，另一端自适应

方法1：浮动，一个宽度设置100%，并向向左（向右）设置外边距空出一个固定大小区域给到单飞翼布局的固定端。

方法2：定位，

方法3：弹性布局

<div class='box'>
    <div class='left'></div>
    <div class='right'></div>
</div>
<style>
    .box{
        display:flex;
        width:100%
        heigth:400px;
    }
    .left{
        width:300px;
    }
    .right{
        flex:1
    }
</style>

4，nth-child()和 nth-of-type()的区别

同：两者都是用来选择父元素下的子元素伪类选择器；

区别：nth-child()着重于元素在父元素的位置，例如：li:nth-child(3)其实两个选择条件，在父元素中排在三位，并且是li的元素才会被选中，如果第三个位置是其他元素，则li:nth-child(3)不会选中任何元素；

nth-of -type()则着重于类型，关注的是父元素中某一类元素的顺序，例如：li:nth-child(3)，选中的是父元素中的第三个li元素。

5，盒子模型

盒模型（Box Model）是CSS中用来描述和布局元素的基本概念。每个HTML元素都可以被看作是一个矩形框，而盒模型正好描述了这个框的属性和组成部分。

盒模型由四个主要的组成部分组成：

1. Content（内容区域）：元素的实际内容，例如文本、图像等。内容区域的宽度和高度可以通过CSS属性进行设置。

2. Padding（内边距）：内容区域与边框之间的空白区域。内边距可以用来控制内容与边框之间的间距。内边距的大小可以通过CSS属性进行设置。

3. Border（边框）：围绕内容和内边距的线条。边框可以给元素添加外观和样式。边框的样式、宽度和颜色可以通过CSS属性进行设置。

4. Margin（外边距）：边框之外的区域，用于控制元素与其他元素之间的间距。外边距的大小可以通过CSS属性进行设置。

在CSS中，可以使用各种属性来控制每个盒模型的组成部分，例如width和height属性用于设置内容区域的宽度和高度，padding属性用于设置内边距，border属性用于设置边框样式，margin属性用于设置外边距。

目前市面上有两种盒模型：标准盒模型、怪异盒模型(边框盒子)

标准盒模型总宽度：width+padding+border+margin

怪异盒模型总宽度：width(content+padding+border)+margin

css3中可以利用属性box-sizing来指定盒模型类型，默认是标准盒模型，box-sizing:border-box;指定盒子为怪异盒。

6，数组扁平化

数组扁平化是指将一个多维数组转换为一个一维数组

let arr = [1,2,[3,4],[5,6,[7,8]]
//方法1，利用es10提供的一个函数
arr.flat(1)
// => 1,2,3,4,5,6,Arr(2) 只能将第一层扁平化
arr.flat(2)   //两层扁平化处理
arr.flat(Inifinity) //对所有层进行扁平化

//方法2，使用递归
let newArr = []
function myFlat(arr){
    arr.forEach((item)=>{
        if(Array.isArray(item)){
            myFlat(arr)
        }else{
            newArr.push(item)
        }
    })
}
myFlat(arr)