前端的一些问题及解决（1）
昨天在给新人修改前端代码的过程中发现一些细节问题，然后仔细研究了下，做下总结，方便团队成员学习。
项目背景：
使用框架bootstrap，做的一个web版的自适应网站。
问题一：如何扩大多选按钮或者单选按钮的点击范围？
问题重现，
只是单纯的增加选框的大小，不希望直接点击整个列表项选择，因为点击产生的事件是进入列表项查看具体邮件内容。
思考过程，
1、很自然的先想到直接增加checkbox 的width和height
但是实际中发现只是增加了可点击范围，实际的选框大小并没有变化，还导致了整体的布局发生改变。
2、通过点击事件动态改变checked和unchecked背景图来实现，不影响布局的情况下增大的点击范围。效果比较好，只不过在列表项很多，性能要求很高，想要更改维护的时候相对比较麻烦。
解决方案，
此问题最终采用了方案一，适当增加一些宽高对布局影响不大，做其他元素做相应调整
问题二：lable标签对内部元素的作用及影响？
lable标签的作用：
可以使标签内的区域指向label标签for属性指代的对象的事件。
无label标签:<input id="name" type="checkbox" /> 文本
有label标签:<label for="name"><input id="name" type="checkbox" />文本</label>
有label标签的这一段，点击标签中的文本，可使多选框聚焦。
lable是内联元素，所以它符合内联元素的特点，即：
1、和其他元素都在一行上；
2、高度、行高和顶以及底边距都不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。
当lable内部包裹块状元素时，无法对内部的块状元素产生宽高上的作用,但是可以影响其内部元素的排版，如text-align:right
问题三：对盒子模型直接加透明度，有时会产生半像素，如何解决？
增加padding值，1px
问题四：calc()函数内部的函数值百分比指的是对比谁的值？
是css3中一个函数属性，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，参考链接：https://www.css88.com/book/css/values/functional/calc().htm
函数内部的百分比是相对于其父亲节点来计算的。