css
无颜君
这个作者很懒,什么都没留下…
展开
-
textarea 在浏览器中固定大小和禁止拖动
HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局,使页面变得不美观。可以通过添加如下两个样式禁用拖动,固定大小转载 2015-11-17 20:15:39 · 358 阅读 · 0 评论 -
WEB开发中,输入框被弹起的虚拟键盘遮挡住原因收集
1.position:fixed 引起的。2.body高度100%所致。原创 2016-08-01 14:51:29 · 1241 阅读 · 0 评论 -
CSS实现兼容性的渐变背景(gradient)效果
一、IE系列 (1)语法:filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientT转载 2016-07-19 17:55:29 · 2448 阅读 · 0 评论 -
关于文字内容溢出用点点点(…)省略号表示
更新于2015-10-08对于现代浏览器,例如webkit内核的浏览器,或者移动端,是可以实现多行文本内容超出点点点…最后一行显示的,典型的CSS组合如下:.box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;转载 2016-06-20 20:15:10 · 509 阅读 · 0 评论 -
transitionend animationend 事件兼容问题
平时在做动画的时候,如果涉及交互比较多一些的时候。比如像拆礼盒,摇筛子等基于微信的小游戏,transitionend和animationend这个两个事件都会用到,之前做微信的小游戏过程中,把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理,虽然浏览器的支持结果大同小异,但是还是有一些细微的差别的,其中微信和qq浏览器(其实是同一个)对于两个事件都需要加前缀!一、transit转载 2016-06-16 20:00:44 · 7797 阅读 · 0 评论 -
css img标签高度等于宽度.
以下只是个人笔记,遇到的坑.使用JS计算的话页面加载的时候会重新渲染, 导致闪屏,用户体验非常差..所以只能用CSS解决, 具体代码如下;{CSDN:CODE:}父级容器css width: 60%;height: 0;padding-bottom: 60%;position: relative;子容器css width: 100%;height: 10原创 2016-04-29 12:24:32 · 3832 阅读 · 0 评论 -
修改输入框placeholder文字默认颜色-webkit-input-placeholder
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; }::-moz-placeholder { /* Moz转载 2016-04-27 11:44:34 · 577 阅读 · 0 评论 -
解决弹性盒子模型容器因为文字大小而被撑开
解决方法就是在 flex item 中加上 width:0,让宽度由 box-flex 属性来分配原创 2016-03-11 11:26:41 · 1912 阅读 · 0 评论 -
sublime 自动添加兼容前缀插件autoprefixer
安装插件autoprefixer步骤:1、确保Node.js已经安装,未安装请 点击 这里>>2、下载autoprefixer插件 https://github.com/sindresorhus/sublime-autoprefixer3、打开sublime ,选择菜单 Preferences > Browse Packages 将下载的压缩包解压到这4、设置快捷转载 2016-03-30 15:36:06 · 4193 阅读 · 0 评论 -
css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1:设置Meta标签首先我转载 2016-01-14 19:24:05 · 276 阅读 · 0 评论 -
DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上“style:"height:100%;"”是无效的。那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。方法就是在css当中增加上:html, body{ margin:0; height:100%;转载 2015-12-08 01:18:23 · 759 阅读 · 0 评论 -
css指针样式
1、cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)常用c转载 2015-12-05 17:35:29 · 1550 阅读 · 0 评论 -
子DIV块中设置margin-top时影响父DIV块位置的解决办法
子DIV块中设置margin-top时影响父DIV块位置的解决办法在文章《实现文本滚动》中子DIV块#main中设置margin-top时,若父DIV块#box中没有“overflow:hidden;”,则子DIV块中margin-top会影响父DIV块的位置解决办法1:若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden;解决办法2:转载 2016-01-05 23:34:28 · 338 阅读 · 0 评论 -
css 填坑常用代码分享
以下是常用的代码收集,没有任何技术含量,只是填坑的积累。转自:https://github.com/jsfront/src/blob/master/css.md1. css 2.x文字换行/*强制不换行*/white-space:nowrap;/*自动换行*/word-wrap: break-word;word-break: normal;/*强制英文单词转载 2015-11-28 23:35:49 · 268 阅读 · 0 评论 -
js浏览器兼容问题总结及解决办法
javascript部分1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行解决方法:改用 document.formName.elements["elementName"]2. 集合类对象问题问题:代码中许多集合类对象取用时使用(),IE能接受,FF不能转载 2015-11-21 13:29:03 · 842 阅读 · 0 评论 -
巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)
一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C转载 2016-02-16 14:37:12 · 3158 阅读 · 0 评论