CSS/javaScript 学习记录

1、box-shadow 添加阴影
2、针对absolute/relative的理解
3、Flex布局可以纵向平均分布么？
4、隐藏后释放/不释放占用的空间
5、javaScript 添加数据到最后和最前面
6、js 获取第一个子节点

1、box-shadow 添加阴影

阴影.jpg

2、针对absolute/relative的理解(http://www.cnblogs.com/coffeedeveloper/p/3145790.html)

2.1 加了absolute后宽/高都会变成自适应(还受到父容器的影响)，它会变成包裹性，会改变display属性
2.2 加了absoute后，会脱离文档流
2.3 加了relative后，设置margint，只会相对自己的位置进行位置偏移，视觉上发生了偏移
2.4 加了relative，不会脱离文档流，不会修改display属性，设置宽/高无效

3、Flex布局可以纵向平均分布么？

这个要看条件的，比如父布局高度固定，比如写800px

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <style>
        body{
          display:flex; 
          flex-direction:column;
          height:500px;  <!--父布局，高度固定-->
        }
        div{
          height:100px;
          width:100px;
          border:1px solid currentcolor;
          display:inline-block;
        }
        
        div:nth-child(1){
          flex:1;
          color:red;
         
        }
        div:nth-child(2){
          color:blue;
        }
        div:nth-child(3){
          color:yellow;
        }
    </style>
</head>
<body>
   <div></div>
<div></div>
<div></div>
</body>
</html>

父布局高度固定.png

在上面的代码里面总高度是500PX，我们看到3个不同颜色的DIV，每个DIV默认高度都是100PX的像素，但是第一个高度采用了flex：1，所以剩下的高度给了第一个DIV。
如果我们父布局就是300PX，那我们第一个DIV的高度就无法占的比其它DIV多了

无法占的比其它div多.png

如果你父布局采用百分比，比如父写100%，其它不变，效果跟上面的一样。
如果父子都采用了百分比，比如父是100%，3个DIV写20%，直接塌缩了

塌缩.png

总结：
在纵向上，父布局必须要高度固定（固定值），然后子布局首先占自己独有的高度，剩下的高度再进行分配。

4、隐藏后释放/不释放占用的空间

隐藏后继续占用空间

　document.getElementById("typediv1").style.visibility="hidden";//隐藏 
　document.getElementById("typediv1").style.visibility="visible";//显示

隐藏后不继续占用空间

　document.getElementById("typediv1").style.display="none";//隐藏 
　document.getElementById("typediv1").style.display="";//显示

5、javaScript 添加数据到最后和最前面

var a = [];// 创建数组
a.push(obj); // 添加到最后
a.unshift(obj); // 添加到第一个位置

6、map遍历，获取key和value

文章摘自：https://blog.csdn.net/pang_da_xing/article/details/75676014
遍历map对象

var map = [{  
             key : "百度",  
             value : "李彦宏"  },
            {
             key : "阿里巴巴",  
             value : "马云"  },
        ];  

  for (var key in map) {  
            console.log(map[key]);  
        }
//输出结果
//Object {key : "百度", value : "李彦宏"}
//Object {key : "阿里巴巴", value : "马云"}

遍历map集合

var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
//方法一：
m.forEach(function (item) {
     console.log(item.toString());
});

//方法二：
m.forEach(function (value, key, map) {
    console.log(value)
 })
// 输出:
// black
// red
// 2
//方法三：
for (var [key, value] of m) {
  console.log(key + ' = ' + value);
}
// 输出:
// 1 = black
// 2 = red
// colors  = 2

6、js 获取第一个子节点

最原始的博主写的有问题，后面我改了，下面的可以直接使用。
原始博主 https://blog.csdn.net/duanshuyong/article/details/7562423
html

  <div id="dom">
        <div></div>
        <div></div>
        <div></div>
        
    </div>

 var a = document.getElementById("dom");
        del_ff(a);
        console.log('获取a的全部子节点:')
        console.log(a.childNodes);//获取a的全部子节点；
        console.log('获取a的父节点:')
        console.log(a.parentNode); //获取a的父节点；
        console.log('获取a的下一个兄弟节点:')
        console.log(a.nextSibling);//获取a的下一个兄弟节点
        console.log('获取a的上一个兄弟节点:')
        console.log(a.previousSibling );//获取a的上一个兄弟节点
        console.log('获取a的第一个子节点:')
        console.log(a.firstChild);//获取a的第一个子节点
        console.log('获取a的最后一个子节点:')
        console.log(a.lastChild);//获取a的最后一个子节点

//去除空格
 function del_ff(elem)
    {
        var elem_child = elem.childNodes;
        for (var i = 0; i < elem_child.length;)
        {
            if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
            {
                elem.removeChild(elem_child[i])
            }
            else
            {
                i++;
            }
        }
    }

js获取子节点.png