浅谈css3

css3

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

   @font-face {   
    font-family: BorderWeb;   
    src:url(BORDERW0.eot);   
    }   
    @font-face {   
    font-family: Runic;   
    src:url(RUNICMT0.eot);   
    }   
    .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }   
    .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }复制代码

淘宝网字体使用

@font-face {  
        font-family: iconfont;  
        src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);                
}复制代码

3. 圆角

border-radius: 15px;

4. 多列布局 （multi-column layout）

多列布局的几个重要属性来设置多列布局的样式 但是多列布局有兼容性问题 所以不建议使用
5.阴影（Shadow）
box-shadow: 10px 10px 5px #888888;
6.css弹性盒子模型
父级定义

father { display: box; }复制代码

似乎也可以是：

father { display: inline-box; }复制代码

后，即为允许子级元素按盒模型分配空间
子级元素可以这样分配资源

first_boy { box-flex: 2; }
second_boy { box-flex: 1; }
three_boy { box-flex: 1; }复制代码

也可以这样

first_boy { box-flex: 2; }
second_boy { box-flex: 1; }
three_boy { width：300px；}复制代码

7. CSS3制作特效

1) Transition 对象变换时的过渡效果

• transition-property 对象参与过渡的属性
• transition-duration 过渡的持续时间
• transition-timing-function 过渡的类型
• transition-delay 延迟过渡的时间

2) Transforms 2D转换效果
主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）
3) Animation动画特效

transforms与animation的区别：

其实可以将animation理解为有好多帧的动画，而transform是只有两个帧的特殊的animation

BFC块原理（块级格式上下文）

Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。常见的盒子类型block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context。
　　这里我们也通俗的理解一下：
　　BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

less是如何写css文件的：

客户端
我们可以直接在客户端使用 .less（LESS 源文件），只需要从 lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

<link rel="stylesheet/less" type="text/css" href="styles.less">复制代码

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

<link rel="stylesheet/less" type="text/css" href="styles.less">复制代码

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

服务器端

@import “variables.less”;复制代码

.less 文件也可以省略后缀名，像这样：

@import “variables”;复制代码

引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。

变量
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

@border-color : #b5bcc7; 

.mythemes tableBorder{ 
  border : 1px solid @border-color; 
}复制代码

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
清单 5. LESS 文件

@width : 20px; 
#homeDiv { 
 @width : 30px; 
 #centerDiv{ 
 width : @width;// 此处应该取最近定义的变量 width 的值 30px 
 } 
} 
#leftDiv { 
 width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

}复制代码

经过编译生成的 CSS 文件如下：
清单 6. CSS 文件

#homeDiv #centerDiv { 
 width: 30px; 
} 
#leftDiv { 
 width: 20px; 
}复制代码

继承
less也有继承方法，这样可以我们的css也可以像js文件一样避免代码的冗余，更高效的开发。

嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段

<div id="home"> 
<div id="top">top</div> 
<div id="center"> 
<div id="left">left</div> 
<div id="right">right</div> 
</div> 
</div>复制代码

清单 17. LESS 文件

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
  #center{ 
       border:outset; 
       height : 300px; 
       width : 90%; 
       #left{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
       #right{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
   } 
}复制代码