
css
小小笔记
这个作者很懒,什么都没留下…
展开
-
background-position的向右对齐用法
一直只知道background-position: (x轴位置) (y轴位置),如果靠近左边偏移7px就写成background-position: 7px 20px;这样的,但是像右要怎么办?以前我是傻傻的给父容器计算了宽度,然后就向左偏移固定的宽度,然后才发现原来可以写成这样background-position: right 7px center;代表在右边偏移7px;原创 2017-04-05 15:36:33 · 6893 阅读 · 0 评论 -
图片hover时有遮罩
以往想到给图片加个蒙版遮罩,之前都会这样写 img{width:400px;} .div1{position: relative;display: inline-block;} .span1{position: absolute;top:0;bottom: 0;left:0;right:0;background: rgba(0,0,0,.5);display: none;z-index原创 2017-07-29 15:15:03 · 2743 阅读 · 0 评论 -
CSS:span元素margin-top无效的根源
之前在弄页面的过程就发现了个很奇怪的现象,就是行级标签总是padding-top和margin-top等都不能作用,一直以为是自己写的代码哪有问题,刚好今天闲着就去百度了下,才发现原来是行级标签的特性使其如此,面对这种情况,要想其生效,可以设置为display:inline-block;以下是我从新浪博客那边看到的内容,贴下来以便以后观看http://blog.sina.com.cn...原创 2016-07-08 10:44:56 · 748 阅读 · 0 评论 -
低版本ie对dipaly:none不友好的替代写法
问题:低版本下元素使用dipaly:none,这个元素则默认不在文档里了,点击会没有效果,导致jq或者js的click失效。解决方案:html:<p class="p1">我不见了<p>1、clip.p1{position:absolute;clip:rect(0 0 0 0)}2、opacity.p1{position: absolute...原创 2018-08-30 09:03:59 · 237 阅读 · 0 评论 -
一些奇妙的css技巧
一、用flex实现两栏或三栏自适应布局css.flex{ display: -webkit-box; display: -webkit-flex; display: flex;}.flex-item{ -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}.right{ text-a...原创 2019-03-27 11:11:16 · 241 阅读 · 0 评论 -
视频转码后,video只能播放声音,不能播放画面
最近用video来播放视频,用格式工厂把mov,mpg格式的视频转码成了MP4格式,结果video只能播放声音,不能播放画面,但是用视频播放器能播放出来。 解决方法:视频的编码格式不对, MP4有4种编码,MPEG4(DivX),MPEG4(Xvid),AVC(H264), HEVC(H265),用工具转换成H264编码就可以网页正常播放了...原创 2018-04-13 16:24:55 · 6218 阅读 · 0 评论