随笔分类 - CSS
摘要：前言 在 "CSS魔法堂：改变单选框颜色就这么吹毛求疵！" 中我们要模拟原生单选框通过 键获得焦点的效果，这里涉及到一个常常被忽略的属性—— ，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^ Spec是这样描述它的 作用 用于创建可视对象的轮廓(元素的
阅读全文
摘要：前言 是否曾经被业务提出"能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！"，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开 重新开发一个，发现要模拟选中、未选中、不可用等状态很繁琐，而涉及单选框组就更烦人了，其实我们可以通过 、`::before :checked
阅读全文
摘要：前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完 不占用原来的位置，而 保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！ 深入 我们
阅读全文
摘要：前言 继上篇《 "CSS魔法堂：稍稍深入伪类选择器" 》记录完伪类后，我自然而然要向伪元素伸出“魔掌”的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！ 初识伪元素 说起伪元素我第一想到的莫过于 和`::after`这两个了
阅读全文
摘要：前言 过去零零星星地了解和使用 、`::after content`等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。 伪类 伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有 、`:visited
阅读全文
摘要：前言 在 "《CSS魔法堂：Transition就这么好玩》" 中我们了解到对于简单的补间动画，我们可以通过 实现。那到底多简单的动画适合用 来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习
阅读全文
摘要：前言 以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。 属性介绍 首先先我们简单粗暴了解 属性
阅读全文
摘要：前言 Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。 Flex就这么简单 浏览器兼容性 一说到兼容性就是永远的痛，不过幸运的是只要在IE10加
阅读全文
摘要：前言 对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。 到底什么是FOUC？ 页面加载解析时，页面以样式A渲染；当页
阅读全文
摘要：前言 说起box shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box shadow的那些事。 二话不说看效果 3D小球 纸张阴影(来自@张鑫旭老师) 细读属性 看到上面这么绚丽的效果，是不是迫不及待想弄清box shadow
阅读全文
摘要：前言 当CSS3推出 属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border radius还分水平半径和垂直半径，然后又发现border top left/right radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真
阅读全文
摘要：前言 当CSS3推出 属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border radius还分水平半径和垂直半径，然后又发现border top left/right radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真
阅读全文
摘要：前言 当CSS3推出 属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border radius还分水平半径和垂直半径，然后又发现border top left/right radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真
阅读全文
摘要：前言 当CSS3推出 属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border radius还分水平半径和垂直半径，然后又发现border top left/right radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真
阅读全文
摘要：前言 是否记得《读者文摘》中那一篇篇优美感人的文章呢？那除了文章内容外，还记得那报刊、杂志独有的多栏布局吗？ 当我们希望将报刊、杂志中的阅读体验迁移到网页上时，最简单直接的方式就是采用多栏布局来对内容排版，然而在过去我们仅能通过float+positioned来模拟多栏布局，
阅读全文
摘要：前言 每当来个需要既要水平排版又要设置固定高宽时，我就会想起 ，还有为了支持IE5.5/6/7的hack 。然后发现盒子间无端端多了个不可选的空白符，于是想尽办法修复这个bug。 直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟，原来我错了。那不是bug，是我不懂而已。
阅读全文
摘要：前言 对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。 "《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》" "《CSS魔法堂：你
阅读全文
摘要：前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正。 被埋没的志向——文字环绕 回忆一
阅读全文
摘要：前言 刚接触CSS时经常听到看到一个词"文档流"，那到底什么是"文档流"呢？然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到D
阅读全文
摘要：前言 当我们以 之名让元素脱离Normal flow的控制后，以为通过 和`top`属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。 后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。 以Normal flo
阅读全文