随笔分类 - css
摘要：/***滚动条**/ ::-webkit-scrollbar { width: 8px; height: 6px} /* 滚动槽*/ ::-webkit-scrollbar-track { background:rgba(239,239,239,1)} /* 滚动条滑块*/ ::-webkit-sc
阅读全文
摘要：<style> ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px;background-color: #ffe184;} li{padding:10px; background-color: #ff4d52; }
阅读全文
摘要：在IE6-8中完全是不支持CSS3 Media Queries的。那么为了让IE6-8支持，我们就很有必要的在IE9以下的浏览器中加上media-queries.js或者respond.js脚本： <!--[if lt IE 9]> <script src="html5shiv.min.js"></
阅读全文
摘要：语法 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 为选择器分组时，将单独的选择器单独放在一行。 为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。 每条声明语句的 : 后应该插入一个空格。 为了获得更准确的错误报告，每
阅读全文
摘要：transition 属性是一个简写属性，用于设置四个过渡属性： transition-property transition-duration transition-timing-function transition-delay transition-property是用来指定当元素其中一个属性
阅读全文
摘要：http://www.css88.com/tool/css3Preview/Transform.html transform的含义是：改变，使…变形；转换 transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：
阅读全文
摘要：background-color:transparent;就是把背景色设置为透明。 实际上background默认的颜色就是透明的属性。所以写和不写都是一样的 span{ width: 0; height: 0; display: inline-block; } border-top: 60px s
阅读全文
摘要：white-space,text-overflow,overflow overflow: hidden;text-overflow:ellipsis;white-space: nowrap; -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他
阅读全文
摘要：Firefox 4+、Chrome 以及 Safari 不支持 resize。 resize 属性规定是否可由用户调整元素的尺寸。 none用户无法调整元素的尺寸。 both用户可调整元素的高度和宽度。 horizontal用户可调整元素的宽度。 vertical用户可调整元素的高度。
阅读全文
摘要：很多前端都是用.clearfix:after{ .....} 和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法： 首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们， after伪类由于受到ie6 7的不支持所以大多数时
阅读全文
摘要：display:inline和display:block区别 一、什么是双边距Bug？ 先来看图： 我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下
阅读全文
摘要：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 1、行内样式，指的是html文档中定义的style 行内样式包含在你的html中 对你的元素产生直接作用，比如: 2、ID选择器 Id也是元素的一种标识，比如#div 3、类，属性选择
阅读全文
摘要：由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀， 如：-moz- firefox火狐 -ms- IE浏览器 -webikt- chrome谷歌 -o- 欧朋 box-shadow(阴影效果) border-colors(为边框设
阅读全文
摘要：display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私
阅读全文
摘要：前言：刚刚接触css3的盒模型，感觉对于解决水平垂直居中、固定宽度/高度和可变宽度/高度同时存在这样的问题很有效。但是最近在看一个腾讯手机端框架（Frozen UI ）的时候发现一个很神奇的多行文字截断的样式，感觉：我靠，怎么那么神奇，如下图 框了一下它的css，如下图： 我一看这貌似是盒模型的用法
阅读全文
摘要：作者： 阮一峰 日期： 2010年3月15日 随着浏览器的升级，CSS3已经可以投入实际应用了。 但是，不同的浏览器有不同的CSS3实现，兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站，该网站总结了一些常用功能的写法。 以下就是这些写法的详细介绍。所有代码都经过了Firefox 3
阅读全文
摘要：border-radius实现圆角效果 view sourceprint? 1.1 CSS3代码： 2.2 3.3 -webkit-border-radius:10px; 4.4 -moz-border-radius:10px; 5.5 border-radius:10px; 6.6 margin:
阅读全文
摘要：Android2.3的overflow问题 在android2.3及以下系统版本的浏览器不支持overflow：scroll / auto，即在页面元素里面的内容如果超过了父元素或祖先元素的高度是无法滚动的，可以通过css3的transform来实现滚动，代表作：iscroll。 Android2.
阅读全文
摘要：原文链接：http://caibaojian.com/flexbox-guide.html原文链接：http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程，原文为：A Complete Guide to Flexbox。文中详细的介绍了
阅读全文
摘要：.faq a { outline: none; star: expression(this.hideFocus=true); } 其实IE有提供隐藏该虚线框的正经办法。上边的CSS表达式中是js的语法，html中该这样写 <br><a href="#" hideFocus>链接</a><br> 注意
阅读全文
浙公网安备 33010602011771号