526互联

前端学习-HTML/CSS刷题笔记01

发布时间 2024-01-11 18:06:41作者: ayubene

1 清除浮动

方法1 双伪元素法：在style中给父元素添加伪元素代码

了解zoom:1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            *zoom: 1;
        }
        .left {
            width: 100px;
            height: 100px;
            float: left;
        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
        }

        .wrap::after,
        .wrap::before {
            content: "";
            display: table;
        }

        .wrap::after {
            clear: both;
        }

    </style>
</head>
<body>
    <div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>
</html>

方法2 给父元素添加一个div子元素,然后给这个元素在style中设置"clear:left"（清除左侧内容浮动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            /* *zoom: 1; */
        }
        .left {
            width: 100px;
            height: 100px;
            float: left;
        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
        }

        /* .wrap::after,
        .wrap::before {
            content: "";
            display: table;
        }

        .wrap::after {
            clear: both;
        } */

        .clearfix {
            /* 清除左侧内容浮动效果 */
            clear: left;
        }
    </style>
</head>
<body>
    <div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

方法3 在style中，给父元素添加：overflow:hidden

缺陷：假如父元素有需要溢出的元素显示，当父元素设置了overflow：hidden后，会导致这些溢出的元素内容无法正常显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            /* *zoom: 1; */
            overflow: hidden;
        }
        .left {
            width: 100px;
            height: 100px;
            float: left;
        }
        .right {
            width: 100px;
            height: 100px;
            float: left;
        }

        /* .wrap::after,
        .wrap::before {
            content: "";
            display: table;
        }

        .wrap::after {
            clear: both;
        } */

        /* .clearfix {
            clear: left;
        } */
    </style>
</head>
<body>
    <div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
        <!-- <div class="clearfix"></div> -->
    </div>
</body>
</html>

2 单位长度px、em、rem

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

3 instanceof

instanceof知识点

请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    

    <script>
         function _typeof(left,right) {
            return toString(value);
        }
    </script>
        

</body>
</html>

4 两个参数以字符串形式拼接

function _splice(left,right) {
    // 补全代码
    //方法1：
    // return `${left}${right}`
    //方法2：
    //return String(left)+String(right); 
    //方法3：
    //return left+String(right);
    //方法4：
    return left.toString()+right.toString();
    //方法5：
    //return left+''+right;
    
}

5 求阶乘

普通方法

        function _factorial(number) {
            let res = 1;
            for (let i = 1;i <= number;i++) {
                res *= i;
            }
            return res;
        }

递归方法

function _factorial(number) {
    // 补全代码
    if(number==1){return 1}
    return number*_factorial(number-1)
}

6 sort排序

从到小排序

<script type="text/javascript">
   function _sort(array) {
     return array.sort((a, b) => b - a);
  }
</script>

7 js截取数组

使用join+split

function truncate(arr,item) {
    let arrNew = arr.join().split(',');
    arrNew.push(item);
    return arrNew;
}
console.log(truncate([1,2,3,4],10));

8 拼接2个数组

使用concat

function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

使用join+split

function concat(arr1, arr2) {
    return (arr1.join() + ',' + arr2.join()).split(',');
}

9 map()方法

function square(arr) {
    // let arrNew = arr.map(item => item*item);
    let arrNew = arr.map(function (item) {
        return item*item;
    });
    return arrNew;
}

10 map()和filter()结合

map遍历元素进行操作，filter过滤元素

function findAllOccurrences(arr, target) {
    let arrNew = arr.map(function(e, index) {
        return e === target ? index : -1;
    }).filter(function(i) {
        return i != -1;
    });
    return arrNew;
}

11 正则表达式和parseInt

输入：'0x12'
输出：0

function parse2Int(num) {
    num = num.match(/\d+/)[0];
    return parseInt(num);
}

12 字符串字符统计

使用正则表达式+replace去掉空格
从后往前计算字符数量

function count(str) {
    let result = {};
    str = str.replace(/\s/g, "");
    while(str.length) {
        let len = str.length - 1;
        result[str[len]] ? result[str[len]]++ : result[str[len]] = 1;
        str = str.slice(0, len); 
    }
    return result;
}

13 对象的一些方法

以数组的形式输出对象各个属性的键名。

Object.keys()

function _keys(object) {
    return Object.keys(object);
}

let...in

function _keys(object) {
    let arr = [];
    // return Object.keys(object);
    for(let i in object) {
        arr.push(i);
    }
    return arr;
}

类型转换 转为object

function _numbertoobject(number) {
   return {number};
}

function _stringtoobject(string) {
   return {string};
}

14 时间戳转换为时间

function _date(number) {
    let theDate = new Date(number);
    let year = theDate.getFullYear();
    let month = theDate.getMonth() + 1;
    let day = theDate.getDate();
    return year + '-' +month + '-' + day;
}

15 数字取整

function _int(value) {
    return parseInt(value);
    // return Math.floor(value);
    // return Math.cell(value);
    // return Math.trunc(value);
}

16 数组反转

function _reverse(array) {
    // return array.reverse();
    return myReverse(array);
}
function myReverse(array) {
    let arrNew = [...array];
    let leftIndex = 0;
    let rightIndex = arrNew.length - 1;

    while(leftIndex < rightIndex) {
        let tmp = arrNew[leftIndex];
        arrNew[leftIndex] = arrNew[rightIndex];
        arrNew[rightIndex] = tmp;

        leftIndex++;
        rightIndex--;
    }
    return arrNew;
}

17 apply函数

apply函数知识点

function _max(array) {
  return Math.max.apply(null,array);
}

18 正则表达式+match

查询数组中是否有数字 有true 没有false

function _search(string) {
    if(string.match(/\d+/g)) {
        return true;
    }
    else {
        return false;
    }
}

19 indexOf() 方法

indexOf() 方法返回值在字符串中第一次出现的位置。
如果未找到该值，则 indexOf() 方法返回 -1。

function _indexof(array,value) {
    return array.indexOf(value);
}

20 数字反转

function _reverse(number) {
    // let str = number.toString();
    // return str.split('').reverse().join('');
    if(number < 0) {
        return parseInt('-'+String(-number).split('').reverse().join('')) ;
    }
    return parseInt(String(number).split('').reverse().join('')) ;
}

21 伪数组对象 arguments

伪数组对象 arguments 是一个类数组对象，它包含了函数的所有参数。因此，如果要返回一个函数的所有参数，只需要将 arguments 对象返回即可。

function getArguments (a,b,c) {
    return arguments;
}

22 JS动态创建节点

function createLi(array){
    let ul = document.querySelector('ul');
    for(let i = 0;i < array.length;i++) {
        ul.insertAdjacentHTML('beforeend',`<li>${array[i]}</li>`);
    }
}