height: 100% 没有效果

做项目的时候遇到了给一个 div 的样式设置 height: 100% 加上背景颜色，结果没反应，也就是说height: 100% 并没有起作用，之前我用好像都没什么问题。

先来分析一下height: 100% 的作用，是使当前元素的高度与其父元素的高度一样。假如父元素的高度是 100px ，那么该元素的高度也是 100px，height: 50% 的话高度就是 50px，所以在计算该元素的高度之前先要求出父元素的高度。

所以我也给 div 的父元素 body 也设置了个 height: 100% ，可是页面还是没有反应，因为 body 还有个父元素 html ，所以也要给 html 设置了个 height: 100%，这样才起效果。

页面的宽度没有设置的话默认是 width: 100%，但是高度就不行了，浏览器高度没有默认值，所以必须设置高度的值才会有效。
more >>

怎么用 CSS 实现鼠标指向某个图标会自动在该图标上方显现相关内容呢？效果如下：

more >>

box-sizing

在做项目的过程中，有时定义了两个宽度相同的 div ，但是为其中一个添加了 padding 和 border 之后，宽度却不一样了，因为被 padding 和 border 硬生生给撑开了，这种事情是非常苦恼的，之前是通过减少宽度来使总宽度保持一致。直到发现了这个属性。

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

我的那个问题只需要在两个 div 内设置box-sizing:border-box就 ok 了，这属性设置的意思是此元素的内边距和边框不再会增加它的宽度。这样 div 的宽度就不会因为 padding 和 border 的设置而改变了。

默认值是box-sizing:content-box，这个就是平时说的标准盒子模型了，设置边框和内边框会使宽度增加。

由于这也是实验中的属性，使用时最好加上浏览器前缀。
more >>

项目起源

手机的看书软件有夜间模式来降低屏幕的亮度，在黑夜的环境下使眼睛没有那么疲惫。所以想到在用户浏览网页的时候也有这个功能就好了。而且实现也不难，在借鉴一些前辈的思路完成了这个作品

项目功能

按下按钮使背景颜色变深，文字颜色变亮，再按一下就回复原状

实现思路

按钮用隐藏 checkbox ，把 label 设置成按钮的方法。然后监听 checkbox 如果发生 onchange 事件，就判断 checkbox 是否为 changed ，若是改变背景和字体颜色，若不是，变为原来的颜色。
more >>

return 后面换行的问题

这是在一个 JS 的面试题里看到的，觉得应该注意一下，先看下面的两个函数：

1
2
3
4
5

function fool(){
	return{
		bar:"hello"
	};
}

1
2
3
4
5
6

function foo2(){
	return
    {
		bar:"hello"
	};
}