Better

Ethan的博客,欢迎访问交流

关于 UI 规范与 CSS 换肤

整理项目 CSS 存在的问题,如何减轻样式编写痛感,以及如何实现动态换肤。


设备像素与物理像素

容易混淆的名词。


CSS 图形变化

最近的工作涉及到图形变换会比较多,不过都是基于具体 2D 和 3D 场景的,但其实 CSS 就自带类似的变换功能,且同样支持 3D 场景,回忆小小总结下


利用 Grid 网格布局解决 Flex 布局最后一行均匀排列问题

Grid 布局相比 Flex 布局,个人觉得其实更容易理解,只是属性比 Flex 来的更多而已。先总结下属性的基本使用,然后解释下 Flex 存在的问题,以及 Grid 如何解决


CSS background

最近发现自己写 CSS 的时候,感觉很不熟练了,比如最近用到的 background 属性,在这里做点小笔记


Angular: tips and tricks for CSS structure

Angular 中关于 CSS 的建议与技巧,正确理解 Angular 中的特殊选择器 :host 和 :host-context,以及如何在 @import 规则中使用绝对路径。


再读《CSS 世界》内容总结

由于之前读 《CSS 世界》有些匆忙,趁这段时间,重新阅读了一下,收获还是特多的,尤其是内联盒模型那一块,对于 CSS 一些奇怪的现象有了很好的理解。


等高布局、多栏自适应布局

两侧或多侧等高布局,在网页设计中是十分常见的,最近在重看 CSS 世界时,觉得有必要对 CSS2 中几种实现方式进行实践和总结,一起来看看吧。


label for check input did't work in iOS browser

在项目中,由于原生的input自带样式使用丑陋,因此一般会将input结合label使用,设置input不可见,通过点击label的方式触发input,但有个奇怪的现象,在ios浏览器上,针对checkbox类型的input并没有点击效果。在这里记录下解决办法。


不定高度元素实现transition过渡动画

在开发中,控制元素的消失与现实,如果直接使用display:none,会显得很生硬,如果加上一点动画效果,看上去就会美好很多,在移动端,因为CSS3动画支持性良好,所有移动端的JavaScript框架都会没有动画模块的,此时,使用CSS实现动画就成为了最终选型。实际开发中,如果高度不定的元素加上height的动画,从0到auto的话,简单适应CSS就有点搞不定了