“CSS相关”目录存档
2017年02月15日,星期三
column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。
而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~
阅读全文…
标签:box-flex, column, column-count, columns, css3, 布局
发布在 CSS相关 | 31 条评论 »
2016年11月26日,星期六
在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。
随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。
本文几乎就是业界关于CSS3 var()变量首发的文章,希望里面的内容能够对您的工作和学习有所帮助~~
阅读全文…
标签:calc, css3, CSS变量, css相关, currentColor, var, 变量
发布在 CSS相关 | 57 条评论 »
2016年11月18日,星期五
技术的发展往往会带来相应的思维方式上的转变,这样才能相辅相成,发挥新技术的潜力,如果还是使用以前的思维模式,怎么说呢,有着劳斯莱斯加着92#汽油在跑的感觉。
传统的实现,包括现在移动端几乎所有的实现套路都是下面这样的,无论是标签还是按钮,都是先设定一个基础类名,写下基本样式,然后不同的颜色重新命名一个状态类名,覆盖默认的边框色或者背景色或者文字颜色,是什么颜色就写什么颜色。
但,实际上,如果采用基于color重构UI组件的策略,则可能会有意想不到的裨益……
阅读全文…
标签:background-color, border, color, currentColor, UI, 按钮, 组件
发布在 CSS相关 | 17 条评论 »
2016年11月12日,星期六
一看名称,很多小伙伴可能认为是个什么生僻的东西,实际上,这玩意只是名字怪怪的,功能关键时刻还是很管用的。
unicode-range是一个CSS属性,一般和@font-face规则一起使用。在自定义字体的时候,可以指定某些字符使用该字体,其他字符依然使用默认的或者其他的字体。这种特性在某些场景非常有用,也可以用来实现一些特殊的效果。
本文有详尽文字阐述,必要的源代码展示,精彩的实例页面和签到好处的效果截图以及多个字符处理相关的工具露脸,总之希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:font-face, unicode-range, Unicode编码, 中文字体, 字体
发布在 CSS相关 | 16 条评论 »
2016年09月16日,星期五
大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”
不知道大家有没有思考过这样一个问题。
然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。
看似合理,实际上这种解释是表面的,错误的……
阅读全文…
标签:animation, 循环, 死循环, 渲染, 父选择器, 百分比
发布在 CSS相关 | 36 条评论 »