- [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>