CSS3学习笔记2

1. CSS3中的变形与动画(下)

1.1 Keyframes介绍

​ Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

​ 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果

浏览器的支持情况：Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

<!--HTML:第1行创建一个动画名叫“changecolor”，在“0%”时背景色为red,在20%时背景色为blue，在40%背景色为orange，在60%背景色为green，在80%时背景色yellow，在100%处时背景色为red-->
<div>鼠标放到我身上</div>
<!--CSS:-->
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

1.2 animation的使用

1.2.1 CSS3中调用动画

​ animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果

语法：animation-name: none | IDENT[,none|DENT]*;

1. IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；

2. none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

   注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-

1.2.2 CSS3中设置动画播放时间

​ animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法：animation-duration: <time>[,<time>]*

​ 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）

1.2.3 CSS3中设置动画播放方式

​ animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式

语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

方式与transition中的transition-timing-function一致

1.2.4 CSS3中设置动画开始播放的时间

​ animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间

语法：animation-delay:<time>[,<time>]*

1.2.5 CSS3中设置动画播放次数

​ animation-iteration-count属性主要用来定义动画的播放次数

语法：animation-iteration-count: infinite | <number> [, infinite | <number>]*

1. 其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2. 如果取值为infinite，动画将会无限次的播放

1.2.6 CSS3中设置动画播放方向

​ animation-direction属性主要用来设置动画播放方向

语法：animation-direction:normal | alternate [, normal | alternate]*

1. normal是默认值，如果设置为normal时，动画的每次循环都是向前播放
2. alternate的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放

1.2.7 CSS3中设置动画的播放状态

​ animation-play-state属性主要用来控制元素动画的播放状态

参数：其主要有两个值：running和paused。

​ 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态

1.2.8 CSS3中设置动画时间外属性

​ animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。其四个属性值对应效果如下：

// html:
<div><span></span></div>
// css
@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
}

2. 布局样式相关

2.1 多列布局

2.1.1 Columns

语法：columns：<column-width> || <column-count>

参数：列宽和列数

举例：要显示2栏显示，每栏宽度为200px，代码为：columns: 200px 2;

2.1.2 column-width

语法：column-width: auto | <length>

取值说明：

2.1.3 column-count

​ column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：column-count：auto | <integer>

取值说明：

例如：将列分成四列显示，代码如下：column-count:4;

2.2 列间距column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：column-gap: normal || <length>

取值说明：

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：

column-count: 3;
column-gap: 2em;

2.3 列表边框column-rule

​ column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色,但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

语法规则：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

取值说明：

例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：

column-rule: 2px dotted green;

2.4 跨列设置column-span

​ column-span主要用来定义一个分列元素中的子元素能跨列多少

语法：column-span: none | all

例如：将第一个标题跨越所有列，代码：column-span:all;

2.5 盒子模型

​ 在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：box-sizing: content-box | border-box | inherit

其中最为关键的是box-sizing中content-box和border-box两者的区别:

content-box：外边距2+边框2+内填充*2+内容的高或宽（写的元素的高或宽）；

border-box：外边距2+写的元素的高或宽（边框2+内填充*2+内容的高或宽，这些都已经包括在了写的高或宽中）；

2.6 CSS3 伸缩布局(Flexbox布局)

功能特点：

1. 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2. 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3. 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4. 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5. 可以控制元素在页面上的布局方向；
6. 可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序

案例：

1. 创建一个flex容器:任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，.flexcontainer{ display: -webkit-flex; display: flex; }

2. Flex项目显示:Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

3. Flex项目列显示

   .flexcontainer{ 
   	display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: column; 
       flex-direction: column; 
   }
   

4. Flex项目移动到顶部:关键点：取决于主轴的方向。justify-content 属性定义了项目在主轴上的对齐方式。align-items 属性定义项目在交叉轴上如何对齐。 如果主轴是水平的方向，通过align-items设置；如果主轴是垂直的方向，通过justify-content设置。

   .flexcontainer{ // 列
       -webkit-flex-direction: column; 
       flex-direction: column; 
       -webkit-justify-content: flex-start; 
       justify-content: flex-start; 
   }
   .flexcontainer{ // 行
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: row; 
       flex-direction: row; 
       -webkit-align-items: flex-start; 
       align-items: flex-start; 
   }
   

5. Flex项目移到左边：flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

   .flexcontainer{ // 行
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: row; 
       flex-direction: row; 
       -webkit-justify-content: flex-start; 
       justify-content: flex-start; 
   }
   .flexcontainer{ // 列
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: column; 
       flex-direction: column; 
       -webkit-align-items: flex-start; 
       align-items: flex-start; 
   }
   

6. Flex项目移动右边

   .flexcontainer{ // 行
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: row; 
       flex-direction: row; 
       -webkit-justify-content: flex-end; 
       justify-content: flex-end; 
   }
   .flexcontainer{ // 列
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: column; 
       flex-direction: column; 
       -webkit-align-items: flex-end; 
       align-items: flex-end; 
   }
   

7. 水平垂直居中：在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

   .flexcontainer{ 
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: row; 
       flex-direction: row; 
       -webkit-align-items: center; 
       align-items: center; 
       -webkit-justify-content: center; 
       justify-content: center; 
   }
   .flexcontainer{ 
       display: -webkit-flex; 
       display: flex; 
       -webkit-flex-direction: column; 
       flex-direction: column;
       -webkit-align-items: center;
       align-items: center;
       -webkit-justify-content: center;
       justify-content: center;
   }
   

8. Flex项目实现自动伸缩:可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。

   .bigitem{ 
       -webkit-flex:200; 
       flex:200; 
   }  
   .smallitem{ 
       -webkit-flex:100; 
       flex:100; 
   }
   

3. Media Queries与Responsive设计

3.1 Media Queries

3.1.1 媒体类型

​ Media Queries最大的特色就是通过CSS3来查询媒体，然后调用对应的样式

1. 媒体类型

   

2. link方法：link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。

   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
   <link rel="stylesheet" type="text/css" href="print.css" media="print" />
   

3. @import方法：引用样式文件，也可以引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。

   @importurl(reset.css) screen;   
   @importurl(print.css) print;
   

   在<head>中的<style>标签中引入媒体类型方法。

   <head>
   <style type="text/css">
       @importurl(style.css) all;
   </style>
   </head>
   

4. @media方法：是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。

   • 在样式文件中引用媒体类型：

     @media screen {
        选择器{/*你的样式代码写在这里…*/}
     }
     

   • 使用@media引入媒体类型的方式是在标签中的

3.1.2 Media Queries使用方法

使用方法：@media 媒体类型 and （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型，随后是指定媒体特性。媒体特性的书写方式和样式的书写方式相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：(max-width: 480px)

Media Queries在实际项目中常用的方式：

1. 最大宽度max-width：是指媒体类型小于或等于指定的宽度时，样式生效

   @media screen and (max-width:480px){
    .ads {
      display:none;
     }
   }
   // 当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏
   

2. 最小宽度min-width：是指媒体类型大于或等于指定宽度时，样式生效。

   @media screen and (min-width:900px){
   .wrapper{width: 980px;}
   }
   // 当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。
   

3. 多个媒体特性使用：可以使用关键词**"and**"将多个媒体特性结合在一起

   // 当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
   @media screen and (min-width:600px) and (max-width:900px){
     body {background-color:#f5f5f5;}
   }
   

4. 设备屏幕的输出宽度Device Width：可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）

   <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
   // 上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，
   

5. not关键词：使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。即not关键词表示对后面的表达式执行取反操作，如

   @media not print and (max-width: 1200px){样式代码}
   // 样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中
   

6. only关键词：only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

   <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
   // 如果没有明确指定Media Type，那么其默认为all，是指被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上
   

Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀

3.2 Responsive设计

3.2.1 Responsive术语

1. 流体网格：流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小

2. 弹性图片：弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸，如

   // 断点解决图片自适应的例子。
   <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
   
   // 对应的CSS代码：
   @media (min-device-width:600px){
   img[data-src-600px]{
     content: attr(data-src-600px,url);
     }
   }
   @media (min-device-width:800px){
     img[data-src-800px] {
     content:attr(data-src-800px,url);
     }
   }
   

3. 媒体查询：使用这个属性可以让你的设计根据用户终端设备适配对应的样式

4. 屏幕分辨率：是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率

5. 主要断点：设备宽度的临界点

设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点

3.2.2 Responsive布局技巧

1. 抛弃

   第一， 尽量少用无关紧要的div；

   第二，不要使用内联元素（inline）；

   第三，尽量少用JS或flash；

   第四，丢弃没用的绝对定位和浮动样式；

   第五，摒弃任何冗余结构和不使用100%设置。

2. 保留

   第一，使用HTML5 Doctype和相关指南；

   第二，重置好你的样式（reset.css）；

   第三，一个简单的有语义的核心布局；

   第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

3.2.3 meta标签

使用方法：<meta name="viewport" content="" />

在content属性中主要包括以下属性值，用来处理可视区域:

3.2.4 不同设备的分辨率设置

1.1024px显屏

@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}     

2.800px显屏

@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}     

3.640px显屏

@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}     

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}     

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}     

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}     

4. 用户其他重要属性

4.1 自由缩放属性resize

​ 允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小

语法：resize: none | both | horizontal | vertical | inherit

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  resize: horizontal;
}

4.2 CSS3外轮廓属性

​ 外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用

语法：outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

取值说明如下：

案例：

div {
  padding: 20px;
  margin: 30px;
  outline: red solid 2px;
  border: 2px solid green;
}
// 制作双色边框效果

4.3 CSS生成内容

​ 在Web中插入内容，通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

// 通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：
a:after {
    content:attr(title);
    color:#f00;
}

者被激活时呈现，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用

语法：outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

取值说明如下：

案例：

div {
  padding: 20px;
  margin: 30px;
  outline: red solid 2px;
  border: 2px solid green;
}
// 制作双色边框效果

4.3 CSS生成内容

​ 在Web中插入内容，通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

// 通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：
a:after {
    content:attr(title);
    color:#f00;
}