随笔分类 -  CSS

涵盖CSS
视差滚动原理与实现
摘要：1：视差滚动 Parallax Scrolling 指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页技术。 2：特性 效果不凡，适合个性展示，适合讲故事，但是滚动容易迷航，需要较强的导航能力 3：原理 传统的网页，文字，图片，背景都是按相同方向速度滚动，而视差滚动则是在 阅读全文
posted @ 2018-04-27 14:40 ming-os9 阅读(307) 评论(0) 推荐(0)
关于Vertical Align的理解
摘要：1：vertical-align 翻译就是垂直-对齐... 2：关于line-height的点 2.1：如果一个标签没有定义height属性，那么其最终表现的高度一定是由line-height起作用。（一个div如果没设置至少大于1像素的高度值时，此div高度为0，如果div里打了个空格或者文字，那 阅读全文
posted @ 2018-04-26 11:26 ming-os9 阅读(174) 评论(0) 推荐(0)
三行代码CSS竖向居中
摘要：这里无需设置高度或者父元素的position属性。（IE9可用） 如果想兼容老浏览器。 然而，元素沿translateY移动时会损失半个像素导致元素模糊，则使用preserve-3d 对 parent-element. 阅读全文
posted @ 2018-04-20 15:58 ming-os9 阅读(177) 评论(0) 推荐(0)
CSS 交集选择器和并集选择器
摘要：交集选择器是and 也就是要同时满足 且只能交2个只能交2个只能交2个，第一个是标记，第二个是class或者id，之间不可以有空格 eg: span.small-height 并集选择器是or，也就是 左边或者右边 用","隔开. 交集选择器 span.small-height{width:100% 阅读全文
posted @ 2018-04-20 10:38 ming-os9 阅读(1142) 评论(0) 推荐(0)
Cubic-bezier 曲线
摘要：cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线函数。 cubic-bezier(x1,y1,x2,y2) 此图中: P0:(0,0) P1:(x1,y1) P2:(x2,y2) P3:(1,1) （x1,x2 范围为 0-1） （y1,y2没规定，但是过大没必要也没意 阅读全文
posted @ 2018-04-19 17:51 ming-os9 阅读(1007) 评论(0) 推荐(0)
CSS Pixel 和 Device pixels
摘要：Web developers need CSS pixels, that is, the pixels that are used in CSS declarations such as " 1 width:300px; 2 font-size:14px; ". These pixels have 阅读全文
posted @ 2018-04-19 11:14 ming-os9 阅读(174) 评论(0) 推荐(0)