坎帕斯学院日常讨论

话题：width：100%和width：auto的区别

width：100%

元素宽度等于父级元素的宽度。

width：auto

元素的宽度等于父元素的宽度减去margin，padding，border这些。

高度知识点

子元素的margin和padding百分比知识点根据父元素的width来算。

//test1
<style>
    body{
        margin:0;
        padding:0;
    }
    .main{
        width:500px;
        background:red;
    }
    .test{
        width:auto;
        padding:20px;
        margin:10px;
        border:5px solid blue;
        background:green;
    }
</style>

<div class="main">
    <div class="wrap">
        <div class="test">123</div>
    </div>
</div>

test width=父元素width-margin-padding-border

//test2
<style>
    body{
        margin:0;
        padding:0;
    }
    .main{
        display:inline-block;
        background:red;
    }
    .test{
        width:auto;
        padding:20px;
        margin:10px;
        border:5px solid blue;
        background:green;
    }
</style>

<div class="main">
    <div class="wrap">
        <div class="test">123123123123123</div>
    </div>
</div>

test width=123123123123123+margin+padding+border

//test3
<style>
    body{
        font-size:20px;
        margin:0;
        padding:0;
    }
    .main{
        display:inline-block;
        background:red;
        width:500px;
    }
    .test{
        width:auto;
        padding:20px;
        margin:10px;
        border:5px solid blue;
        background:green;
    }
</style>

<div class="main">
    <div class="wrap">
        <div class="test">123123123123123</div>
    </div>
</div>

test width=500-padding-margin-border
这里的500px并不是继承，而是因为div块级元素的影响而来的。

//test4a
<style type="text/css">
	body{
		font-size: 20px;
		padding: 0;
		margin: 0;
	}
	.first1{
		background: red;
		width: 200px;
		height: 400px;
		overflow: hidden;
	}
	.second1{
		height: 25%;width: 25%;
		margin-top: 10%;
		background-color: green;
		padding-left: 10%;
	}

	</style>
</head>
<body>
	<div class="first1">
		<div class="second1"></div>
	</div>
</body>

test width=50,height=100,margin-top=20

2017.4.19 21:00

话题：document.getElementByClassName()返回的是什么？

是一个HTML集合。

集合和数组的区别

HTML集合：一直与文档保持着链接，每次你需要最新的信息时，都会重复执行查询的过程，哪怕只是获取集合里的元素个数，即集合的length属性也是这样。（简单的说就是这个集合会实时改变）

案例：

var alldivs document.getElementsByTagName('div');
for(var i=0;i<alldivs.length;i++){
    document.body.appendChild(document.createElement('div'));
}
//该循环会一直循环下去，因为每次添加一个div之后，alldicvs.length的值也会改变，导致循环条件一直为true，一直循环。

关于闭包和词法作用域

案例：

function foo(){
    concile.log(a);//2
}
function bar(){
    var a=3;
    foo();
}
var a=2;
bar();
//原理：js的运行原理是词法作用域，而非动态作用域，因此当foo函数被调用的时候，对a进行查询的时候会直接在全局作用域中查询。