CSS3各种小妙招,工作中绝对会碰到

我们都知道,不同版本浏览器对css的解析是有些分别的,特别是IE6,和IE7.虽然现在使用老版本的人数不多,但是还是有部分人在使用,我们并不能完全忽略这群用户。

1.实现div文字溢出自动省略号截取

2.规定行数的截取效果

3.修改默认radio按钮样式

默认的radio样式非常的难看,并且不容易布局所有我们有时候需要修改为自定义的样式或者颜色。基本分为五步:

第一步:就是我们的html结构:

第二步:生成一个伪元素,作为美化版的单选按钮,先给伪元素添加一些样式,这里可以自定义样式效果

第三步:选中按钮时候的样式效果

第四步:隐藏原来的按钮

4.inline-block属性间距

现象分析

此问题是设置样式属性displayinline-block。应用常例是li属性设置水平放置后出现间隙。

照图说话;

例如上图很明显可以看出第二行间隙比第一行小,第一行为间隙样例,我本来设置两个li之间间距为15应该为第二行效果,但是在html写出代码:

效果就是第一行的效果,第二行是使用js进行添加的li就是正确的margin-right:15px.而第二行确多出一部分空隙。然后我再次修改html代码为:

效果为:

这样就没有间隙了,看出问题所在了,就是因为写代码元素标签之间的空格所致。但是我们有不能所有的代码都按照写在一行,一是不易于读不易于维护,二是很乱。

解决方案总结:

写成一行(不可取也是一种方式,,哈哈哈)第二中就是有规则分分行,例如我这个就可以这样写:

3.借助注释语句来去除空格

4.不写结束标签,就是li的结束标签不写即可:

5.样式的问题还是采用样式解决,哈哈使用文字间距属性letter-spacing。只需要在间隙元素上设置为0px,然后看多出多少元素在简单元素的父元素设置负数值就好了。例如我这个就是在li元素设置{letter-spacing:0px;}然后在父元素设置ul{letter-spacing:-8px}

5.calc计算属性

左右布局中一部分定值一部分比例布局,这个时候是不是很纠结,一部分是需要固定的宽度,另一部分想根据浏览器大小自动适应。

完美的计算就是自适应部分使用百分百布局,可是又不能%,因为已经被占用了一部分定值。这个时候就需要calc计算属性了,你可以写成:%-定值这样规定宽度,相当于在这个宽度属性这里写了一个百分百布局只是减去的一些值。

6.左右float布局后父元素没有自适应高度

这个是实际项目中发现的问题,在一个大的div中放置两个子div元素进行左右布局:float:left;和float:right;之后父div没有适应子元素高度,父元素高度为0;

解决办法:父元素div增加:overflow:hidden;

回到顶部

7.根据页面切换不同的IE文档模式

很多时候我们都不注意低版本的文档切换,因为新项目很少要I8以下了。很不幸的遇到了老项目整合或者老项目扩展新功能。

例如老项目只支持ie8以下,而你的新页面是IE9起步,恭喜你拉哈哈。你不会让用户去按F12根据不同的页面切换文档模式的太傻了。那怎么办,当然是我们自动切换了。

我们使用x-ua-


转载请注明:http://www.aierlanlan.com/rzfs/5136.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了