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中,可以使用各种属性来控制每个盒模型的组成部分,例如widthheight属性用于设置内容区域的宽度和高度,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)

你可能感兴趣的:(web-学习笔记,前端)