web(问题小结)

最新推荐文章于 2023-01-14 19:30:00 发布

原创最新推荐文章于 2023-01-14 19:30:00 发布 · 220 阅读

CC 4.0 BY-SA版权

本文深入探讨CSS中border属性的两种设置方式的区别，content属性在伪元素:before和:after中的应用，border-collapse属性对表格边框的影响，以及选择器优先级、鼠标事件mouseleave与mouseout的差异，最后对比了数组方法splice()和slice()的功能与使用场景。

[border:0;]与[border:none;]的区别

[borde:0;]：把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
[border:none;]：把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

css content属性

// 设置:before 及 :after 伪元素，必须设置 content 属性，否则一切都是无用功
// content 属性与 :before 及 :after 伪元素配合使用
//生成文本内容， 在元素头或尾部来插入生成内容
//默认地，插入生成的内容往往是行内内容，可以用属性 display去转换为块级元素

<p>我是P元素</p>

 p:after{                            //在p元素之后生成50*20的元素
            content:"";              //不使用content属性，:after不起作用
            display: inline-block;   //默认为行级元素，不显示，需改为块级元素
            width:50px;
            height:20px;
            border:1px solid #000;
        }
        p:before{
            content:"我是p前面的元素 "
        }

运行结果为：
在这里插入图片描述
3.css border-collapse属性

属性值	描述
collapse	边框会合并为一个单一的边框，会忽略 border-spacing( border-spacing属性仅在separate 下起作用)
separate	默认值，表格默认被隔开
inherit	继承父元素 border-collapse的值

//属性设置表格的边框是否被合并为一个单一的边框
//如下图，表格默认被隔开

在这里插入图片描述

//table设置border-collapse:collapse;如下图

在这里插入图片描述
4.选择器优先级问题

//  ！important > 行内样式 > id选择器 > class选择器 > 标签 > 通配符
//  同一级别中后写的会覆盖先写的样式

5.mouseleave与mouseout的区别

<body>
    <div class="box">
            <div class="child"></div>
     </div>
<script>
    var box = document.getElementsByClassName("box")[0];
    box.onmouseenter=function(){
        console.log("MouseEnter!");
    };
    box.onmouseover=function(){
        console.log("MouseOver!");
    };
    box.onmouseout=function(){
        console.log("MouseOut!");
    };
    box.onmouseleave=function(){
        console.log("MouseLeave!");
    };
</script>
</body>

依次从父元素进入经子元素再离开父元素，执行结果为：
在这里插入图片描述
小结：
a.mouseout离开绑定元素和其任何子元素都会触发；
b.mouseleave只有离开绑定元素才会触发

6.数组方法 splice()和slice()

//slice(start,end)

//截取数组从start位置开始，end位置结束的元素(取前不取尾),构成新的数组；
//返回新的数组，原数组不受影响；

//splice(index,number,item1,item2,...)
//index：从索引值为index的位置开始
//number：要删除的元素个数，不删除可写为0
//item1，item2,...：要向数组中添加的元素
//原数组被改变，如果有删除的元素，该方法返回被删除的元素数组

//例：
/*无删除元素*/
<script>
    var arr=[1,2,3,4,5,6];
    var arr1=arr.splice(1,0,"add1","add2");
     //从一号位置开始不删除元素，添加"add1","add2"两个元素
    console.log(arr);      
    //原数组被改变，输出[1, "add1", "add2", 2, 3, 4, 5, 6]
    console.log(arr1);
    //输出[]
</script>

/*有删除元素,*/
<script>
    var arr=[1,2,3,4,5,6];
    var arr1=arr.splice(1,4,"add1","add2");
    //从一号位置开始删除4个元素，添加"add1","add2"两个元素
    
    console.log(arr); 
     //原数组被改变，输出[1, "add1", "add2", 6]
    console.log(arr1);  
     //输出被删除的元素数组[2，3，4，5]
</script>