css杂类收集2

2019独角兽企业重金招聘Python工程师标准>>>

过滤器实现

div{
    filter:alpha(opacity=50);  // ie8-
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE 8 */ 
    opacity:0.5; // ie9+ and other browser
}

ps：对于 opacity属性设置了之后，其子元素也会有透明度的。

ie实现渐变

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='',endColorstr='',GradientType=0);

ps: 
startColorstr 指的是
endColorstr  指的是
GradientType 指的是

filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);

ie滤镜的实现

  filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

ps:该滤镜必须配合background属性一起使用，否则该滤镜失效

css3 平移，旋转，缩放的ie实现方式（工具）

http://www.useragentman.com/IETransformsTranslator/

transition 设置对象变换时候的过度效果

transition-property  设置对象中的参与过渡的属性
transition-duration  持续时间 
transition-timing-function 动画效果  linear,ease, ease-in  ease-out  ease-in-out step-start step-end 
transition-delay 延迟时间 （多少秒之后执行）

背景的线性渐变效果

background-image:-moz-linear-gradient(top,'','');
background-image:-webkit-gradient(linear,0 0, 0 100%,from(),to());
background-image:-webkit-linear-gradient(top,'','');
background-image:-o-linear-gradient(top,'','');
background-image:linear-gradient(top bottom,'','');

// 低版本的ie 使用自带的滤镜解决
filter:progid:DIImageTransform.Miscrosoft.gradient();
filter:progid:DIImageTransform.Miscrosoft.gradient(enabled=false);

-webkit-font-smoothing 让字体看起来更加清晰

-webkit-font-smoothing: antialiased | none | subpixel-antialiased  

// antialiased 反锯齿
// none 小像素文本
// subpixel-antialiased  浏览器默认行为

增强图标字体的显示效果

.glyphicon{
    position:relative;
    top:1px;
    display:inline-block;
    font-family:'Glyphicons Halflings'
    font-style:normal;
    font-weight:normal;
    line-height:1px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;   // 设置grayscale对于图标字体表现更清晰，减轻次像素渲染带来的相邻像素色彩污染问题
}

关于伪类:before 和:after 

对于伪类:before 和 :after ： 在指定的元素内容（不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。
ps:需要注意的是，如果没有content属性，伪类元素将没有任何作用，但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在html源代码无法可见，伪类元素像其他元素一样会继承父类元素的一些css 属性

对于兼容性： ie8+ 

一般用法： clearfix的实现

关于a标签的love 和hate（link,visited,hover,active）

未移入a标签的时候link
移入a标签的时候 link,hover
点击a标签的时候 link,hover,active
点击后未移入a标签的时候link,visited
点击后移入a标签的时候link,visited,hover
点击后再次点击a标签的时候 link,vistied,hover,active

如果存在多个样式，后面的样式会覆盖前面的样式，所以这四个伪类定义的时候是有顺序要求的。

如何清除图片下方出现的几个像素空白间隙

img{display:block}

img{vertical-align:top;}

#test{
    font-size:0;line-height:0;
}

如何让文本垂直对齐文本输入框

#test{vertical-align:middle}

为什么 standard mode 下 ie无法设置滚动条的颜色

将原来设置在body上的滚动条颜色样式定义到html标签选择符上就可以了

如何使得文本溢出边界不换行强制一行显示

设置的容器的width 和 whilt-space :nowrap 就可以了。然后可以设置 overflow：hidden ;text-overflow:ellipsis 就可以了。

文本自动换行

word-wrap 设置成break-word 就可以了

如何设置内联元素的高度

默认内联样式是不能设置height 元素的，只有通过将内联元素重新定义成行快级或者内联块元素之后，就可以了。

对于inline-block的理解

对于display:inline-block的元素，既具有了inline的属性，又拥有的block的属性，也就意味这他拥有了width，height，margin，padding，border属性。这些属性 是line 属性不具备的。

对于inline-block属性，具有很多兼容性的问题需要解决。

css3的 transition 过度效果触发的条件

一般需要在focus hover 之后才会被触发的。

text-overflow触发的条件

text-overflow 拥有两个选值： clip /ellipsis

触发的条件，同时满足
1.必须是块容器
2.overflow 必须是为非visible
3.显式或者隐式的定义 width /height 为非 auto
4.white-space 为 nowrap

white-space 与word-break 与 word-wrap的区别

white-space

在ie中，让div区域不占据空间

需要添加三个属性
height：0；
line-height：0；
font-size：0；

css 的兼容性写法

.demo {				
                                color: red;/*所有现代浏览器*/
				color: green\9;/*所有IE浏览器*/
				color: lime\0;/*IE8-9浏览器*/
				*color: red;/*IE6-7浏览器*/
				+color: blue;/*IE7浏览器*/
				_color: orange;/*IE6浏览器*/
			}
			
涉及到前缀的写法
-webkit-transition:
   -moz-transition:
       -o-transition:
            transition:

ie6 min-height 的实现

selector {

  min-height:500px;

  height:auto !important;   // ie6 不支持这个属性，

  height:500px;   // 因为height 之前设置了 !important 所以对于支持 !important 属性的浏览器，这个设置时没有意义的。
                        // 但是对于 ie6 是有效的。
}

解决inline-block元素之间的空白间距

ul {
    list-style: none outside none;
    padding: 10px;
    background: green;
    text-align: center;
    font-size: 0;    /*  设置字体大小  */
}

ul li {
    display: inline-block;
    zoom: 1;
    background: orange;
    padding: 5px;
    font-size: 16px;  /* 恢复字体大小 */
    letter-spacing: normal; /*  对象中的字符之间的最小，最大，最佳间隔 */
}

inline-block 元素如果换行显示了，会出现区域占据的

解决方案：
    inline-block元素之间不能有空格。

转载于:https://my.oschina.net/bosscheng/blog/542669