开发小技巧

104 阅读1分钟

前端开发中的小技巧

一,绝对定位的妙用

利用绝对定位来实现页面中的元素固定在某个位置并且不随整体页面的大小的改变而改变此位置

此思想步骤:

​ 1,先利用绝对定位把要定位的元素定位到整体页面的中间部分

​ 2,然后以整体页面的中间位置为参考物

​ 3,再左右设置外边距调动,调到合适的位置

二,单行文字和多行文字溢出显示..

代码:

​ 单行文字:

.ellipsis_1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

​ 多行文字:

.ellipsis_2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

三,数字类型数据转换的注意点

<script>
        // Number(数据)
        console.log(Number('1234acs'));  // 如果转换的数据中包含非数字内容会返回NaN 不是一个数字
        console.log(Number('1234'));  // 1234


        // parseInt() 转换为数字型,只保留整数,没有四舍五入

        console.log(parseInt('12345.123'));  // 12345
        console.log(parseInt('12345.123abc'));  // 12345
        console.log(parseInt('abc12345.123'));  // 返回NaN 不是一个数字

        // 转换为数字型,会保留小数 parseFloat()
        console.log(parseFloat('110.11'));   // 110.11
        console.log(parseFloat('110.11abc'));   // 110.11
        console.log(parseFloat('abc110.11'));   // 返回NaN 不是一个数字

        // 区别:
        // 1.Number() 只能放数字类型的字符,不能放abc这样的
        // 否则返回的是 NaN   not A number

        // parseFloat 经常用于过滤px单位

    </script>

四,字符串类型与数字类型的隐式转换

在字符串前面加一个“+”号

+‘4’===4

五,函数的细节补充

1,两个相同的函数,后面的会覆盖前面的函数

2,在函数中实参的个数可以和形参的个数不一样

3,如果形参过多会自动填上undefined

4,如果实参过多,多余的实参会被忽略

六,not选择器

作用:用来取消一些特定样式下的css效果

/* 选中box下的全部son 但是标签不能是p */
        .box .son:not(p) {
            background-color: #0a0;
        }
<div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <p class="son">3</p>
        <p class="son">3</p>
        <p class="son">3</p>
        <p class="son">3</p>
</div>