标签 css 下的文章

CSS调整页面灰度

作者: Secbone
时间: 2014-08-05
分类: 前端技术
评论

很好，这篇主要是mark用，方便以后再翻阅

首先是用到CSS的filter属性，最开始貌似是IE4开始加的私有属性，可以实现透明、模糊、阴影、发光、灰度等效果，代码是长这样式儿的：

filter: gray /* IE6 - IE9 */

再后来IE10就开始抛弃这个属性了，但是CSS3借鉴了这个做法，标准的CSS Filter方案里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果，然后代码是长这样式儿的：

filter: grayscale(100%);    /* 标准写法 */

然后对各个浏览器再单独加前缀

css filter的浏览器兼容情况是这样的：

Chrome31+，

Safari7+，

Opera20+，

ios Safari6+,

Android Browser4.4+,

Blackberry 10+均支持了-webkit-filter的方式，

但是：

IE不支持，firefox不支持

再然后呢，Firefox虽说不支持css filter，但是支持svg effects for html，html文件可以调用svg里面的效果，不仅仅是滤镜、还可以是mask、clip等

然后呢，Firefox下我们可以写成这样的：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

很好，现在就只剩下 IE10 和 IE11 了，那么有什么办法呢？

呵呵，很高兴的告诉你，CSS不行！

但是我们可以用js

http://james.padolsey.com/demos/grayscale/grayscale.js

这个插件，引进来以后用

grayscale(document.body);

执行生效

但是 ---- 注意！！！！！

这货执行起来非常的慢，并且后面如果后续的动态修改的dom是不生效的，所以不建议使用

然后那我们的CSS就可以写成这样：

html {
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
        -webkit-filter: grayscale(100%); /* chrome+ */
        filter: grayscale(100%); /* 未来浏览器 */
        filter: gray; /* ie6-8 */
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*ie6-9 */
}

恩恩，大概就长这样儿，不兼容 IE10 和 IE11

貌似还有几个jQuery的插件，但是没有去试，如果有发现好的欢迎留言告诉我～

最后，为鲁甸祈福～

对于position属性值absolute和relative的一点小测试

作者: Secbone
时间: 2012-10-22
分类: 前端技术
评论

在开始小测试之前先来看看这两个属性值的定义：

CSS2.0 HandBook上的解释：

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。

当设定position:absolute

如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位

如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

当设定position: relative

则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

那么下面我们来通过代码来认识一下：

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

这里我们有两个绿色的div，里面分别有一个红色的小div

那么，下面我们给红的的div设置一下top和left属性

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	top:50px;
 	left:50px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

我们发现红div并没有移动，这是因为我们没有设置position属性，没有给它参照物，那么，我们给红色的div加上一个position:relative看看

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:relative;
 	top:50px;
 	left:50px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

我们发现两个红色的div都相对于它原来的位置偏移了，这正和上面定义说的relative是相对于自己原来的位置偏移一样

那么我们把position属性设置成absolute会是什么样的呢？

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:absolute;
 	top:250px;
 	left:350px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

我们发现两个红色的div重叠到了一起，并且我们发现这两个红色的div可以独立的跳出绿色的div，这里我们就可以知道absolute这个值的参照物是同一个———屏幕左上角，也就是body标签。

那么就有一个问题，既然我们知道absolute这个值是单独拿出来排布的，也不占空间（因为relative只是对于原来的位置偏移，元素还是占据它原来的空间），那么我们有时候希望某些元素可以不占据空间但又能参照自己的父级元素进行定位时，我们该怎们办呢？

其实只要把父级元素的position设置成relative就可以了，我们来看下效果：

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 	position:relative;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:absolute;
 	top:50px;
 	left:50px;
 }
 .blue{
 	width:100px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

我们可以看到，红色的div已经是absolute了，但是它还是实现了同前面relative时一样的布局效果，并且它并没有占据体积，所以后面的蓝色的div可以很顺利地占据顶头的位置。

嗯嗯，大概要说的就这么多。。。。

额，最后，到了我提问题的时间了，代码如下：

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	float:left;
 	width:100px;
 	height:100px;
 	background-color:red;
 }
 .blue{
 	width:200px;
 	height:200px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
         <div style="clear:both"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
         <div style="clear:both"></div>
     </div>
 </body>
 </html>

红色的div是flout:left的，然后后面有一个蓝色的div，再然后clear掉了。

问题是，然后在chrome下，蓝色的div占站在了顶头的位置，也就是说chrome是先渲染了蓝色的div然后再把红色的div给clear了，而在IE6,7,8（IE9没测）下是先clear掉了红色的div之后，再渲染蓝色的div，也就是红色的div有了体积以后再渲染了蓝色的div，所以蓝色的div被挤开了。。。

希望前端大牛能帮我指点一下，正确的渲染和clear的顺序应该是什么样的？遇到这样的情况要怎么兼容？先谢谢啦~

对于float属性的一些理解

作者: Secbone
时间: 2012-09-20
分类: 前端技术
评论

今天下午，几个人在屋里研究了一下css的float属性，因为这是一个很有用也让人很蛋疼的属性，下面把自己的一些小理解分享一下~

首先，我们先来写一个有三个div是float的一个页。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
 	</div>
 </body>
 </html>

额。。。好吧，怎么看着有点儿像某个国家的国旗？！。。。。好吧好吧，先这样吧。。。。

然后我们在这三个div下面在加一个div，但是不设置float属性。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

有木有发现什么？是滴，这个div直接无视掉了前面三个div，丝毫无压力的占据了三个div底下最靠上的位置。。。。

一般按照我们的理解，这个新的div应该是会被前面三个div的位置挤下去，呆在屏幕下面的位置，而现在它却好像是与另外三个div平起平坐的位置，丝毫没有感觉到它们的存在。。。

这是为什么呢？我们的一种猜测是，float的元素是没有体积的，他们的体积是单独算的。。。

那么我们来试一下。。。。

我们把最外面的box的的高度去掉来看一下效果。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:500px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

可以看到，最外面的box高度只是blue这个div撑起来的一点，也丝毫没有三个float的div的存在感。。。

那么，基本上就可以证明float元素的体积是不与其他元素一起计算的。。。

但是，float元素它们到底在哪呢？

由刚才的实验我们看到，float元素是浮在其他元素之上的。。。。

总结一下今天下午的理解：

float元素是类似于漂浮物的浮在其他元素之上，而其他元素则是类似于在水下的感觉，对于它们来说，它们是感觉不到float的存在的，这也就出现了前面的无视float元素体积的现象。。。。

而大部分时间我们是希望其他元素能感觉到float元素的存在的，这时候，我们有2种办法：

一种方法是：我们可以把其他元素也写上float属性，使它们从水底浮到水面上来，与float元素一层，这样也就感觉到float元素了。。。

还有一种方法就是：我们可以在float元素后面加上一个div，这个div写上clear属性，就是这样。。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div style="clear:both"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

这样的话，它会清除float元素的影响，让其他元素可以感知到float元素的存在，从而实现我们想要的效果。。。。

嗯嗯，大概就是这个样子，有什么理解不对的地方还请大牛们多多指教哈~