CSS学习小记（五）

2017-06-03

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%，但是高度就不行了，浏览器高度没有默认值，所以必须设置高度的值才会有效。

rem

做 WEB APP 的时候考虑屏幕适配时接触的一个长度单位，和 px 、 em 这些差不多，rem 是（font size of the root element），根据根元素去适配字体大小，广泛被用来做移动端的响应式适配。为什么？因为它跟 px 不一样，rem 是根据根元素字体大小的不同设置来转换成不同大小的 px 。所以 rem 的大小不是固定不变的。

使用 rem 前，先在根元素也就是 html 元素上定义一个字体大小，如：

1
2
3

html{
   font-size: 30px;
}

那么该页面下所有使用 rem 为长度单位的元素都会以上面这个字体大小为基准转换成相应的 px。如：

div{
   width: 5rem;
   height: 2rem;
   background: #999;
}

那么这个 div 的长和宽的转换方式就是各自乘于 30 (也就是根元素设置的字体大小)所得到的结果就是对应的 px 了。也就是等价于：

div{
   width: 150px;
   height: 60px;
   background: #999;
}

所以利用这一特性，只要用媒体查询或者 JS 的方法根据不同的屏幕大小改变根元素的字体大小就可以做到自适应屏幕大小了。

还有一问题就是知道目标屏幕大小如何求出对应的根元素字体大小。

有一种方法，先得到原网页的宽度 A，再找到目标屏幕的宽度 B，将 B / A 得到的数值就是这个比例值，然后将原网页的根元素字体大小乘于这个比例值就得到目标屏幕的根元素字体大小。

By the way，一般主流的浏览器默认的字体大小是 16px

JQuery 一些问题

插写一条 JQuery 的问题，最近在看《JQuery 权威指南》的时候因为书出版太久的原因，一些内容与现在最新版的 JQuery 有些出入，碰了不小壁。这里记录一下。

从 JQuery 1.8 开始，ajaxStop() 和 ajaxStart() 等实现 AJAX 的方法只能绑定 document 元素，也就是说只能这样用：

1	$(document).ajaxStop(callback);

这个改变也没有什么不方便的

JQuery 的 submit 方法不知道从什么时候开始，不能直接绑定在 input 元素上了，只能绑定在 form 元素上。这个改变也是挺好的，毕竟提交的是表单，更加一目了然。

书中有一个使用 JQuery 的 Cookie 插件保存表单内容到浏览器的例子，里面有个 checkbox 框让用户选择是否保存信息。判断的方法是：

1
2
3

if($("#chkSave").attr("checked")){
     /*内容*/
}

无奈并没有结果，调试发现$("#chkSave").attr("checked")的值是undefine，无论有没有勾选复选框。

理由我懂，因为复选框里根本没有设置checked这个属性，加上这个属性后，就意味着默认是选中的状态，上面代码也能生效了。但是这明显不是我想要的结果。

我改用：

1
2
3

if($("#chkSave").is(":checked")){
     /*内容*/
}

就搞定了

之后再上网查了下，看了几篇博文，才明白原来 jQuery 1.6 开始新增了一个方法 prop() 估计是用来将功能分工的，马上用 prop 试试：

1
2
3

if($("#chkSave").prop("checked")){
     /*内容*/
}

也是成功了。这两个都具有设置和获取元素属性的方法要怎样使用，官方给出的建议是：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

如此就明白了该怎么使用了，具体参考博客：

jQuery 中 attr() 和 prop() 方法的区别