文档章节

css杂类收集2

bosscheng
 bosscheng
发布于 2015/12/11 10:22
字数 1278
阅读 65
收藏 0
点赞 0
评论 0

过滤器实现

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元素之间不能有空格。


© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 78
博文 211
码字总数 91232
作品 0
南京
前端工程师
16个优秀网站设计网站

大家都希望自己的网站特别又好看,其实自己设计的东西才是自己最喜欢的,网站也是,我相信大家对基本的代码是掌握的,但离成为一个优秀的网站设计师还有一段距离,不要紧,只要有了好的指引,...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng ⋅ 2015/10/21 ⋅ 0

WEB 开发疑难杂证收集:简单但让你头疼的问题

1.启动Tomcat时报找不到类的错误,但明明在lib下是存在的: 2. Eclipse 频繁崩溃,信息如下 3.编译通过,但在运行时报Class not find 4.启动Tomcat报Class not find。 5.启动TOMCAT ERROR 6 ...

灌直 ⋅ 2013/11/12 ⋅ 10

移动端解决方案--mobileHack

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案: 工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备...

1354057778 ⋅ 2015/10/22 ⋅ 0

css杂类收集3

实现一个不定宽的区域居中显示 .wrap{ text-align:center;} .inner{ display:inline-block;} <div class="wrap"> <div class="inner"> </div></div>......

bosscheng ⋅ 2016/03/15 ⋅ 0

CSS复杂选择器

CSS 复 杂 选 择 器 对CSS复杂选择器做一个简单的总结: 1-2 相邻兄弟选择器、通用兄弟选择器 This is Very important. Really? More?<...

好好学习en ⋅ 2017/12/13 ⋅ 0

10个非常不错的CSS技巧

在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时,我经常“不断推敲和...

曾沙 ⋅ 2012/09/05 ⋅ 12

Google LOGO的CSS Sprite

css-sprite 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,实现了动画,而...

bestvist ⋅ 2017/11/11 ⋅ 0

mac下免费svn工具

做为一个中国人,没有用收费软件习惯(社会压力让我还没解决温饱问题,杂还敢用收费软件),所以就收集了一些免费的svn tools for Mac OS 1. Versions 这个多好用,其实是收费的,但是我有一...

长平狐 ⋅ 2012/08/13 ⋅ 0

css禁止鼠标事件

css禁止鼠标事件 zak的成长记录2017-12-194 阅读 css 最近在做一些按钮控制类的需求,从jser思维方式出发,老是根据样式或者属性对按钮触发方法做一些判断然后return掉。 后来在重构兄弟的启...

zak的成长记录 ⋅ 2017/12/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部