当前位置：网站首页>小知识点随笔记

小知识点随笔记

2022-07-21 23:12:00 【Buliang_C】

1. transform: translate(-50%, -50%);

将会将元素位移自己宽度和高度的-50%
记住transform只能设置一个，下面的transform会覆盖掉上面的。
即使你写的是: 只会执行下面的那行代码，上面的都被覆盖掉了。
transform: translateX(-50%);
transform: translateY(-50%);

2. nth-child 和 nth-of-type

nth-child
按照当前选择的兄弟元素个数来算。
nth-of-type是取当前元素的兄弟元素的第n个，nth-child取的是当前元素的第n个节点的当前元素
nth-of-type
按照类型来计算，如果是class那么碰到不同类型的，单独一类，符合条件的选中。

<style> 
div:nth-child(3){
    	 // 取不到了,因为第三个兄弟元素被P给占了，不是div了。 
background:#ff0000;
}
div:nth-of-type(3){
    		// 取到第三个div，因为nth-of-type是按照兄弟节点的类型来取的，不是按照个数。
background:#000000;
}
</style>
<div>
  <p>第一个段落。</p>
</div>
<div>
	<p>第二个段落。</p>
</div>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
<div>
	<p>第三个段落。</p>
</div>

3. childNodes和children

Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
在这里插入图片描述
Element.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection 。
在这里插入图片描述

4. 当slice遇到undefined

众所周知，Array.prototype.slice(start,end); 选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。返回一个新数组，包含数组中被选中的元素。

let arr = [1,2,3];
arr.slice(0,1);		// 将第0个元素切割出来，得到[1];

当start为undefined的时候，则会按照0来计算。跟null一样。

let arr = [1,2,3];
arr.slice(undefined,1);		// 将第0个元素切割出来，得到[1];
原网站

版权声明
本文为[Buliang_C]所创，转载请带上原文链接，感谢
https://blog.csdn.net/o__o__o__o/article/details/125621412

边栏推荐

猜你喜欢

随机推荐