css,世界上没有绝对简单的事情
2016-06-23 13:51
891 查看
引文
自从学了前端的基础,自认为是没什么css是能难倒我的,可是事实是,世界上没有绝对简单的事情,实际上还有好多的东西等待我们去发掘。详解
1、有些浏览器不完全支持css3,现在可以用 modernizr 工具去检测浏览器是否支持,以及支持哪些项。2、除了内联元素和块级元素,还有几个标签的默认display并不是block/inline,下面举几个栗子:
table { display:table }
input { display:inline-block }
textarea { display: }
3、textarea无法实现自动扩高的解决办法,利用块级元素标签来实现。
<div contenteditable="true" style="height:200px; min-height:200px; outline:none;"></div>
contenteditable="true" 可编辑的
height 固定高度
outline:none 在火狐点击编辑时会出现虚框,会让人发现这是个冒牌货,去掉虚框
4、 引入css样式表避免用@import,在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。
5、让谷歌支持字体10px,单默认最小是12px,-webkit-transform:scale(0.8)。
6、下载图片,<a href="a.jpg" download="自定义图片名称">点击下载</a>。
7、改变form表单placeholder字体颜色,input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ color:#666; }
8、文本框只读不可编辑 readonly disabled
9、-webkit-appearance: none; 去除input默认样式,可自定义样式
相关文章推荐
- css 样式技巧
- html+css 菜单的制作
- 经常被忽略的几个CSS3属性之强大应用(一、timing-function: steps() 二、animation-direction 三、timing-function: cubic-bezier())
- 解决浏览器background-image属性不支持css3动画
- Sublime Less 自动编译成css
- CSS div水平垂直居中和div置于底部
- CSS高级
- css px 和 % ,em 等混合计算宽度或者高度
- HSSFWorkbook 设计Excel样式
- CSS 样式异步加载
- 外部JS文件调用外部的Css文件
- 值和单位
- Table在DIV中以滚动条方式显示
- 清除浮动——clearfix
- 如何把Button按钮样式换成ImageButton?
- 简单重写类型为radio的input元素样式
- 用CSS设置当鼠标移动到图片内时显示文字
- 使用CSS3滤镜让图片反转颜色
- JQ 特效下拉列表 写出与css一样的效果
- CSS外部样式表+伪选择器