1. calc() calc():在流体布局上,可以通过calc()计算得到元素的宽度. 2. vw/vh/vmin/vmax的使用 vw/vh/vmin/vmax是视窗单位,也是相对单位.相对的不是父节点或页面的根节点,而是由视窗(viewport)的大小决定的,单位1,代表类似于1%. 视窗是浏览器实际显示内容的区域. vw:视窗宽度百分比: vh:视窗高度百分比: vmin:当前vw和vh中较小的一个值: vmax:当前vw和vh中较大的一个值: vmin.vmax的作用:在做移动端页面开…

CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题.使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用…

Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解css. 一.字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): “Arial”.“Times New Roman”.“宋体”.“黑体”等;font-style(字体…

转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个空格,不然浏览器识别不了,比如:calc(100% - 5px); 兼容性: HTML: <div class="out"> <div class="in">in</div> </div> CSS: .out{ width…

前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation-play-state animation 1. @keyframes @keyframes 规则中指定了 CSS 样…

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东.更不是我们一直说的IE滤镜…

CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.CSS3选择器与jQuery中所提供的绝大部分选择器兼容. 一.属性选择器: ele[attr] 元素包含该attr属性就可以捕获到 ([]前面的ele可以不写,如果不写的话按通配*[attr])ele[attr=value] 元素包含该attr属性,且该attr的value有且只有一个并且完全相等的…

  @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶.如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的,为了能让更多的朋友知…

:nth-child(2)选取第几个标签,“2可以是你想要的数字” .demo01 li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 .demo01 li:nth-child(n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 .demo01 li:nth-child(-n+4){background:#090} :nth-child(2n)选取偶数标签,2n也可…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶.如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如…