“css相关”目录存档

小tips:了解CSS/CSS3原生变量var

2016年11月26日,星期六

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

本文几乎就是业界关于CSS3 var()变量首发的文章,希望里面的内容能够对您的工作和学习有所帮助~~

阅读全文…

解决文字和text-decoration:underline下划线重叠问题

2016年11月23日,星期三

CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

有,方法还不少……

阅读全文…

基于CSS color属性的静态UI组件重构策略

2016年11月18日,星期五

技术的发展往往会带来相应的思维方式上的转变,这样才能相辅相成,发挥新技术的潜力,如果还是使用以前的思维模式,怎么说呢,有着劳斯莱斯加着92#汽油在跑的感觉。

传统的实现,包括现在移动端几乎所有的实现套路都是下面这样的,无论是标签还是按钮,都是先设定一个基础类名,写下基本样式,然后不同的颜色重新命名一个状态类名,覆盖默认的边框色或者背景色或者文字颜色,是什么颜色就写什么颜色。

但,实际上,如果采用基于color重构UI组件的策略,则可能会有意想不到的裨益……

阅读全文…

CSS content换行技术实现字符animation loading效果

2016年11月13日,星期日

CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~

阅读全文…

CSS unicode-range特定字符使用font-face自定义字体

2016年11月12日,星期六

一看名称,很多小伙伴可能认为是个什么生僻的东西,实际上,这玩意只是名字怪怪的,功能关键时刻还是很管用的。

unicode-range是一个CSS属性,一般和@font-face规则一起使用。在自定义字体的时候,可以指定某些字符使用该字体,其他字符依然使用默认的或者其他的字体。这种特性在某些场景非常有用,也可以用来实现一些特殊的效果。

本文有详尽文字阐述,必要的源代码展示,精彩的实例页面和签到好处的效果截图以及多个字符处理相关的工具露脸,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

2016年10月25日,星期二

CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。

怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。

我们一般采用一些CSS hack技巧,例如使用:root伪类,从功能上满足了我们的开发需求,但提高了我们的CSS权重,很容易增加我们CSS代码的复杂度,那有没有更好的实现呢?

阅读全文…

深入CSS ::first-letter伪元素及其实例等

2016年09月30日,星期五

首先,::first-letter本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span标签的方式,实现更为广泛更灵活的样式控制。

但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter等就非常有用,而且多半扮演英雄或者救星的角色……

阅读全文…

从height:100%不支持聊聊CSS中的“死循环”

2016年09月16日,星期五

大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”

不知道大家有没有思考过这样一个问题。

然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。

看似合理,实际上这种解释是表面的,错误的……

阅读全文…

聊聊CSS世界中的margin-box

2016年09月16日,星期五

盒尺寸由4个盒子组成,分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是,对于的CSS关键字中却没有margin-box,唯独缺了margin-box,这是为什么呢?

阅读全文…

基于vw等viewport视区相对单位的响应式排版和布局

2016年08月8日,星期一

一般而言,屏幕越大,我们希望文字大小也越大,元素的尺寸也能等比例放大,尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果,目前主流的实现是通过设定根元素的font-size大小,具体元素或模块使用rem或em单位来实现。

使用vm配合calc计算,可以让我们的根元素的font-size大小动态化智能化,可以让我们的布局真正意义适配于各种设备尺寸。

阅读全文…