彩云Sky

ui设计,交互设计,用户体验,前端工程师

微信公众号:彩云译设计(caiyunyisheji)

前端的一些问题及解决(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()计算得到元素的宽度,参考链接:http://www.css88.com/book/css/values/functional/calc().htm

函数内部的百分比是相对于其父亲节点来计算的。



评论
热度 ( 4 )
  1. シ空芯仌ゞ彩云Sky 转载了此文字

© 彩云Sky | Powered by LOFTER