随笔分类 - CSS
摘要:今天在一款三星 4.2.2 的 webview 里,出现 animation 特别快的问题,把: 修改为: 就好了 .xxx 也定义 width 了,但百分比还是出错了,不靠谱
阅读全文
摘要:1. Android,定义 2. iOS,定义 注,呼起数字键盘后,用户输入是否为纯数字,最大最小值限制,还是由 js 处理了。 iOS 不支持设置 min/max
阅读全文
摘要:如今 css 的单位越来越多了,px, em, rem, 微信的小程序又出来个 rpx 可以用 less 自动生成需要的单位 但当你只是想把一个已有的页面转换成小程序时,可能更需要一个 px -> rpx 的小工具,比如这个
阅读全文
摘要:出自:小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 blur.svg 参考: 不得不收藏的——IE中CSS-filter滤镜小知识大全 Blur Filter 在线 demo--IE滤镜
阅读全文
摘要:/** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines($lineCount: 2){ display: -webkit-box; -webkit-line-clamp: $lineCount; -webkit-box-orient:...
阅读全文
摘要:$unit: .667px; @function px($value){ @return $unit * $value; } $unit: 1px; 时 px(1) 就是 1px 一般情况下,设计师给的 psd 是 720px,为了切图时方便调试,就把 $unit 默认设置为 。667px,即 2/3 等上线时,如果要按实际大小显示,再定义 init-scale,就把 $unit 改成...
阅读全文
摘要:编译scss文件时,如果出现如下错误 解决办法就是在报错的scss文件顶部加上编码类型即可: 引自:这里
阅读全文
摘要:需求:如果是竖图,按宽度等比缩放,显示中间的正方形如果是横图,按高度等比缩放,显示中间的正方形如:用到 background-size: cover;示例:
阅读全文
摘要:word-break:normal;word-wrap:break-word;引自 这里
阅读全文
摘要:1. 理想中的效果是这样的2. 然后想改一下圆圈的大小3. 容器大小为偶数,图片大小为奇数,就会使图片并不真正居中,如果仔细量一下,会发现图片上面比下面多1px!貌似只有 background-size: 100% 100%; 可以解决这个问题:
阅读全文
摘要:css中是这样写的:div{ border-bottom: 1px solid #dfe5e4;}但在手机上,像素比不为 1 ,由于 webview 的灰度渲染, border 一般会显示为 2-3px如何使手机上的 border 也显示为 1px ?尝试了div{ background...
阅读全文
摘要:.box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; /* box-orient *...
阅读全文
摘要:引自:http://www.w3cplus.com/css/front-end-web-development-quiz.htmlQ7:下面代码弹出值是什么?x = 1;function bar() { this.x = 2; return x;}var foo = new bar();...
阅读全文
摘要:span{ display: block; background: #f4f4f4; color: #333; font-size: 14px; -webkit-border-radius: 20px; border-radius: 20px; text-a...
阅读全文
摘要:pointer-events : none; 引自:http://www.thinkphp.cn/topic/4702.html
阅读全文
摘要:问题: 手机浏览器上,竖直并排的两张图片中间有条线。 设置了margin, padding, font-size, line-height 都为0,还有问题解决办法: 只要上面的图片高度为偶数,就可以避免这个bug
阅读全文
摘要:很多时候,"更多"会和title在一行显示,放在右边我们可能马上想到这样做:h1 a{ float: right;}<h1>这是个title<a>更多</a></h1>但其实应该这样做:h1 a{ float: right;}<h1><a>更多</a>这是个title</h1>是不是很奇妙?引自《无懈可击的web设计》
阅读全文
摘要:让ie也能享用css3但导入的文件太大,有40K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu
阅读全文