前端经典问题一

1. padding百分比参照对象与外边距合并
   子元素的四个方向的padding的百分比，是相对于其父元素的内容宽度
   外边距合并的条件为相邻，解决问题是在外边距之间加边框或内边距
2. 三角形
   边框，锥形渐变，线性渐变加旋转，裁剪，svg，canvans
3. 行内块元素
   行内块是通过display设置的，行内元素无法设置宽高，浮动与定位必是块级
4. 继承条件
   css中，当一个元素没有相关样式时才会从父元素继承，但要是元素在浏览器的默认样式中有设置，就不会继承父元素的样式
5. 数组本质是对象
   var arr = [];
   arr[0] = 1;
   arr[‘0’] = 2;
   console.log(arr[0] + arr[0]);//4
   console.log(arr[0]);
   console.log(arr[‘0’]);

在js中数组的本质就是一个对象
arr[0] = 1;
就相当于：
{
0：1
}
0是属性名，在js中自动转换为字符串，效果如下：
{
‘0’：2
}
6. 图片自适应与图片元素与保持宽高比，父元素底部空隙
img{
            width:300px;
            height:300px;
            border:10px solid red;
            object-fit:cover
        }

   

图片与文字是行内元素，有参考线
（1）父元素字体大小设置为0；
（2）图片设为块盒display：block
7. 隐式类型转换
console.log(undefined > null);//false
        console.log(undefined < null);//false
        console.log(undefined === null);//false

,<做比较时，先把原始数据类型转换为数字number，undefined转为NAN，null转为0

8. containing block（包含块）

p标签所占的位置就是内容块，p标签一般占的就是其父元素div的contain这一部分的空间 注：p元素中不能嵌套div 9. 自增与自减 var a = 1; console.log(a++ * (++a + a++) )//6 ++a先自增，自增后的结果作为值计算；a++先自增，自增前的原值作为值计算 10. js数据类型 基本数据类型： Boolean Null Undefined Number BigInt String Symbol 引用数据类型： Object 11. js与es区别

BOM：浏览器对象模型
DOM：文档对象模型
12. 0.3-0.2===0.1//false
javascript数字类型只有number类型，相当于强类型语言中的double类型（双精度浮点型），不区分浮点型和整数型
小数转二进制，乘2，取整数
在 JavaScript 中所有数值都以 IEEE-754 标准的 64 bit 双精度浮点数进行存储的
 IEEE-754 标准下双精度浮点数由三部分组成，分别如下：

sign(符号): 占 1 bit, 表示正负;
exponent(指数): 占 11 bit，表示范围;
mantissa(尾数): 占 52 bit，表示精度，多出的末尾如果是 1 需要进位;
13. 对象本质是地址
var a = {
n:0,
};
var b = a;
a.n = a = {n:1};
console.log(b.n);//{n:1}
解析：
地址1 {
n : 地址2
}
地址2 {
n : 1
}
a：地址2
b: 地址1
14. 求余与求模
x = -5；y = 1
求余：-1
x rem y = x - fix(x/y)*y 向零取整
求模：1
x mod y = x - floor(x/y)*y 向下取整
15. 递归对数组求和
需要一个状态转移方程
常用的斐波那契数列（1 1 2 3 5 8）
f（n） = f（n-1） + f（n-2）
f（1） = 1
f（2） = 1
数组：[4，2，6，1，8]
sum(arr,i) = arr[i] + sum(arr,i+1)
sum(arr,maxi) = arr[maxi]

16. 短路运算
    var a = 1；
    console.log(a++ || a++);//1
    ||的运算结果，返回第一个为真的数据
17. 括号运算符返回最后一个
    console.log(1,2,3);//3
18. 消息队列
    setTimeout(function(){
                console.log(1);
            },0);
            for(var i = 0; i < 1000; i++){}
            console.log(2);
            //打印顺序：2，1
    事件循环：A，B，排队的过程
    A（执行栈）：执行代码（不会等待，交给B）----》全局代码，计时器（fn，0）
    B（计时线程）：计时器（fn，0），等待0秒执行函数，但他没执行函数的能力，就将fn放到队列中
    排队（事件队列 ）：0—》fn，等A执行完全局代码，把fn函数交给A执行
    setTimeout：函数调用
19. 网页整体页面设置黑白色与滚动条平滑
    找到网页根元素，设置css3中的属性
    filter：grayscale（1）；
    filter：滤镜
    grayscale：灰度放大镜
    （0~1）：0表示原本色彩，1表示黑白色彩
    找到网页html元素，设置css3中的属性
    scroll-behavior：smooth；
20. 解决浮动元素造成高度塌陷
    （1）为父元素设置高度
    （2）设置bfc（设置overflow：hidden）
    （3）清除浮动
    i：子元素中在所有浮动元素后加span标签，设置其style=“display：block；clear：both”
    ii：父元素加伪元素
    .father::after{
    content:‘’;
    display:block;
    clear:both;
    }
21. 固定定位fixed；解析与渲染；粘滞定位sticky
    会脱离文档流，相对于屏幕视口定位；但当元素的祖先的transform，perspective或filter属性非none时，fixed相对的位置由视口改为该祖先
    解析并不等于渲染
    解析：把他提取成dom对象，把他增加到dom树里边去
    渲染：在页面中将他画出来，让大家看见
    sticky：参考系在父元素的包含块，临界值，找向其父元素设置overflow：hidden，若没有则相对于视口，常用于吸附的导航栏，文章目录
22. 相对路径与绝对路径
    相对路径以 ./ ; …/ ;啥都没写
23. 文本分散对齐与从右向左书写古诗词
    #a {
                /* 只作用于其他行，不作用于最后一行 /
                text-align:justify;
                / 补充最后一行没分散对齐的情况 /
                text-align-last:justify;        
            }
    下要不要组合
    .pome{
                writing-mode:vertical-rl;
    }
      / 古诗中有数字的话不会正常显示 /
    .number{
      / test-orientation设置单个文本朝向 /
    test-orientation:upright;
    / test-combine-upright设置文字正常朝向 /
    test-combine-upright:all
    }
    / 古诗中作者靠下显示 */
    .author{
    test-align:end;
    }
24. 布尔判定
    false: false, ‘’, null, undefined, 0, NaN
    true: 其他情况
            console.log(!undefined);//true
            console.log(!null);//true
            console.log(!0);//true
            console.log(!NaN);//true
            console.log(![]);//false
            console.log(!{});//false
25. 布尔判定
    [] + {}
    ‘[object Object]’
    加法两端是对象，首先调用对象的两个方法，先调用 对象.valueOf() ，看返回的是否是原始数据类型，若不是继续调用 对象.toString()
    [ ]: .valueOf()为[ ]; .toString()为 ‘’
    {}: .valueOf()为{}; .toString()为’{ object Object}’
    [] + {}为字符串的拼接
    {} + []
    0
    js理解错，理解成前边{}为代码块，最后改成+[],+不是加，而是表示正负，最后变成 + ’ ',为0
26. 原始类型访问下标是包装类做处理
    var str = ‘hello world!’;
            console.log(str[0]);//h
            console.log(new String(str[0]));//h
    27.随机数获取36进制
    Math.random().toString(36).substr(2);
    28.无限递归与无限循环
    //无限递归
            function m(){
                m();
            }
            m();//报错，因为栈溢出

//无限循环
        while(true){}//不会报错，cpu只在那转，不占空间

var user = {
            name: ‘张三’,
        };
        //数据劫持
        Object.defineProperty(user, ‘name’, {
            get: function () {
                console.log(‘正在读取name属性’);
                return user.name;
            },
        });
        console.log(user.name);//报错，栈溢出

//解决方案
        var user = {
            name: ‘张三’,
        };
        //数据劫持之前进行暂存
        var value = user.name;
        Object.defineProperty(user, ‘name’, {
            get: function () {
                console.log(‘正在读取name属性’);
                return value;
            },
        });
        console.log(user.name);