css3基础

一，CSS3能做什么？

https://www.imooc.com/code/379
CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

• 1，选择器
  以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。

• 2，圆角效果
  以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。

• 3，块阴影与文字阴影
  可以对任意DIV和文字增加投影效果。

• 4，色彩
  CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。

• 5，渐变效果
  以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。

• 6，个性化字体
  网页上的字体太单一？使用@Font-Face 轻松实现定制字体。

• 7，多背景图
  一个元素上添加多层背景图片。

• 8，边框背景图
  边框应用背景图片。

• 9，变形处理
  你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。

• 10，多栏布局
  可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

• 11，媒体查询
  针对不同屏幕分辨率，应用不同的样式。

二，CSS3边框

1，圆角效果 border-radius

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

实心上半圆：

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    }

实心圆：

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

2，阴影 box-shadow

https://www.imooc.com/code/382

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

1、多个阴影用逗号隔开；

2、投影方式默认为外部；

3、内部阴影设置inset即可。inset可以写在参数的第一个或最后一个，其它位置是无效的。

4、X轴Y轴偏移量允许负值

5、阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

3，为边框应用图片 border-image

https://www.imooc.com/code/383

• repeat
  重复：切割后图片，不会变形，如果不能整除，会缺少部分。
• round
  铺满：切割后图片，可能压缩或拉伸。
• stretch
  铺满：切割后图片，会拉伸为整个边长。

三，CSS3颜色

1，颜色之RGBA

• RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：color：rgba(R,G,B,A)

• 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

代码示例：background-color:rgba(100,120,60,0.5);

2，渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

这一小节我们来说一下线性渐变：

参数：

第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图：

四，CSS3文字与字体

1，text-overflow

文字省略：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

2，嵌入字体@font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

比如：

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

3，文本阴影text-shadow

语法：text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff

五，CSS3背景

1，background-origin

设置元素背景图片的原始起始位置。

语法：
background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

效果如下：

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

2，background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：
background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

3，background-size

https://www.imooc.com/code/691
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：
background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4，multiple backgrounds（多重背景）

缩写或分开写

注意：

• 用逗号隔开每组 background 的缩写值；
• 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
• 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
• background-color 只能设置一个。

示例代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>多重背景</title>
<style type="text/css">
.demo{
    width: 300px;
    height: 140px;
    border: 1px solid #999;

    background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
    background-position: left top, 100px 0, 200px 0;
    background-repeat: no-repeat;

    margin:0 0 20px 0;
}
.task {
    width: 300px;
    height: 140px;
    border: 1px solid #999;

    background:url(http://static.mukewang.com/static/img/logo_index.png)  left top/225px 80px no-repeat, 
               url(http://static.mukewang.com/static/img/logo_index.png) right bottom /50% 40% no-repeat;

}


</style>  
</head> 
<body>
<div class="demo"></div>
<div class="task"></div>
</body>
</html>

5，制作导航菜单综合练习题

小伙伴们，根据所学知识，使用CSS3实现下图的导航菜单效果

任务
1、制作导航圆角

提示：使用border-radius实现圆角
2、制作导航立体风格

提示：使用box-shadow实现立体风格
3、制作导航分隔线

提示：使用渐变与伪元素制作
4、删除第一个和最后一个导航分隔线

提示：使用伪元素删除第一个和最后一个分隔线

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作立体导航</title>
    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
    <style>
        body{
          background: #ebebeb;
        }
        .nav{
          width:560px;
          height: 50px;
          font:bold 0/50px Arial;
          text-align:center;
          margin:40px auto 0;
          background: #f65f57;
          border-radius: 8px;
          /*制作圆*/
          box-shadow:0px 6px 0px #c95247;
          /*制作导航立体风格*/

        }
        .nav a{
          display: inline-block;
          -webkit-transition: all 0.2s ease-in;
          -moz-transition: all 0.2s ease-in;
          -o-transition: all 0.2s ease-in;
          -ms-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
        }
        .nav a:hover{
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
        }

        .nav li{
          position:relative;
          display:inline-block;
          padding:0 16px;
          font-size: 13px;
          text-shadow:1px 2px 4px rgba(0,0,0,.5);
          list-style: none outside none;
        }
        /*使用伪元素制作导航列表项分隔线*/
        .nav li:after{
            content:"";
            position:relative;
            display:block;
            float: right;
            background: linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
            width:1px;
            height:15px;
            top:19px;
            right:-15px;
        }
        /*删除第一项和最后一项导航分隔线*/
        .nav li:last-child:after{
            /*display:none;*/
            background:none;
        }

        .nav a,
        .nav a:hover{
          color:#fff;
          text-decoration: none;
        }

    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Contact Me</a></li>
    </ul>
</body>
</html>

六，CSS3选择器（上）

1，属性选择器

新增了3个属性选择器，使得属性选择器有了通配符的概念

示例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<style>
    a[class^="column"]{background:red;}

    a[href$="doc"]{background:green;}

    a[title*="box"]{background:blue;}
</style>
</head> 
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>
</html>

2，结构性伪类选择器—root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

“:root”选择器等同于<html>元素，简单点说：

:root{background:orange}

html {background:orange;}

得到的效果等同。

建议使用:root方法。

3，结构性伪类选择器—not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

4，结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

<p>我是一个段落</p>
<p> </p>
<p></p>​

CSS代码：

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​

5，结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

示例展示

点击链接显示隐藏的段落。

HTML代码：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS代码：

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id=”brand”的元素）,上面代码中是那个div元素。

多个url（多个target）处理：

就像上面的例子，#brand与后面的id=”brand”是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子：
html代码：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css代码：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

上面的代码可以对不同的target对象分别设置不同的样式。

任务：在CSS编辑器中的第一行输入正确的代码，当你点击链接后，段落p将添加橙色背景和白色文字。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
    </div>
</body>
</html>

css:(确定了目标元素，再找到p元素)

#brand:target p {
  background: orange;
  color: #fff;
}

6，结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

示例演示

通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。

HTML代码：

<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>

CSS代码：

ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}

7，结构性伪类选择器—last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

ul>li:last-child{background:blue;}

示例演示

在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。

HTML代码：

<div class="post">
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
  <p>第四段落</p>
  <p>第五段落</p>
</div>​

CSS代码：

.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}

8，结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)

当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

“:nth-child(n)”，n的起始值始终是1，而不是0。

案例演示
通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。

HTML代码：

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>​

CSS代码：

ol > li:nth-child(2n){
  background: orange;
}

(ol > li:nth-child(2n) 或 li:nth-child(2n) 或 ol :nth-child(2n)效果一样)

9，结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

10，first-of-type选择器(last-of-type选择器)

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

HTML代码：

<div class="wrapper">
  <div>我是一个块元素，我是.wrapper的第一个子元素</div>
  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

CSS代码：

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

11，nth-of-type(n)选择器(nth-last-of-type(n)选择器)

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

示例演示

通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数p的背景设置为橙色。

HTML代码：

<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

CSS代码：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

12，only-child选择器

“:only-child”选择器选择的是父元素中有且只有唯一的子元素。

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>

CSS代码：

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

13，only-of-type选择器

“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

示例演示
通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。

HTML代码：

<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
</div>
<div class="wrapper">
  <div>我是一个Div</div>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p>
</div>

CSS代码：

.wrapper > div:only-of-type {
  background: orange;
}

七，CSS3选择器（下）

1，:enabled选择器(:disabled选择器)

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">

  <div>
    <label for="enabled">可用输入框:</label>
    <input type="text" id="enabled" />
  </div>

  <div>
    <label for="disabled">禁用输入框:</label>
    <input type="text" id="disabled" disabled />
  </div>

 </form>  
 </body>
 </html>

css:

div {
  margin: 30px;
}
input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

input[type="text"]:disabled{
  box-shadow: none;
}

2，:checked选择器

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

示例演示：

通过“:checked”状态来自定义复选框效果。

HTML代码

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是选中状态</lable>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" /><span>√</span>
    </div>
    <label for="usepwd">我是未选中状态</label>
  </div>
</form> 

CSS代码：

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

结果演示

示例演示2：

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form> 
</body>
</html>

css:

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}
.wrapper {
  margin-bottom: 10px;
}
.box {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  background: orange;
  vertical-align: middle;
  border-radius: 100%;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}

.box span { 
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  background: #fff;
  top: 50%;
  left:50%;
  margin: -5px 0  0 -5px;
  z-index:1;
}

input[type="radio"] + span {
  opacity: 0;

}
input[type="radio"]:checked + span {
  opacity: 1;
}

结果演示

3，::selection选择器

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。

将鼠标选中的文本时的背景变成 orange，文本变成 white。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>::selection选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>
</body>
</html>

css:

::selection{
  background: orange;
  color: white;
}
::-moz-selection{
  background: orange;
  color: white;
}

4，:read-only选择器(:read-write选择器)

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>
</form>  
</body>
</html>

css:

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}
input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}
input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}
input[type="text"]:-moz-read-write{
  border:2px solid red;
}
input[type="text"]:read-write{
  border:2px solid red;
}

5，::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
</style>
</head>
<body>
  <div class="box effect">
  <h3>Shadow Effect </h3>
</div>
</body>
</html>

上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。

八，CSS3变形

1，旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

示例：将文本旋转回到原来水平位置。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
 <div><span>我不想旋转(^_^)</span></div>
</div>
</body>
</html>

css:

.wrapper {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  border: 2px dotted blue;
}

.wrapper div{
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: green;
  color: #fff;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  transform:rotate(-20deg);
}
.wrapper span {
  display:block;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
  transform:rotate(20deg);
 }

2，扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

1、skew(x,y)使元素在水平和垂直方向同时扭曲
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

示例：图形扭曲成平行四边形，而文字不扭曲
html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div><span>我不想被扭曲(^_^)</span></div>
</div>
</body>
</html>

css:

.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}

.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform:skew(45deg);
}

.wrapper span {
  display:block;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}

3，缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

示例：让容器的鼠标滑过时的状态缩小0.8。
html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div>我将缩小0.8</div>
</div>

</body>
</html>

css:

.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}

.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}

.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
}

4，位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）

示例：让不知道宽度和高度的元素实现水平、垂直居中。
html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中    
</div>
</body>
</html>

css:

.wrapper {
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

5，矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素，此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

a为元素的水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置

示例：通过matrix()函数实现translate(100px,100px)的效果

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div></div>
</div>
</body>
</html>

css:

.wrapper {
  width: 300px;
  height: 200px;
  border: 2px dotted red;
  margin: 40px auto;
}

.wrapper div {
  width:300px;
  height: 200px;
  background: orange;
  -webkit-transform: matrix(1,0,0,1,100,100);
  transform: matrix(1,0,0,1,100,100);
}

6，原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似。

示例：将元素的原点重置到右上角，然后进行15度的扭曲。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div>我修改原点之后在进行15度的扭曲</div>
</div>
</body>
</html>

css:

.wrapper {
  width: 400px;
  height: 100px;
  border: 2px dotted red;
  margin: 20px auto; 
  text-align: center;
  line-height: 100px;
}
.wrapper div {
  background: orange;
  color: #fff;
  -webkit-transform: skew(15deg);
  -moz-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  transform-origin: top right;
}

九，CSS3动画

1，transition

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

• transition-property:指定过渡或动态模拟的CSS属性
• transition-duration:指定完成过渡所需的时间
• transition-timing-function:指定过渡函数
• transition-delay:指定开始出现的延迟时间

（1），过渡属性 transition-property

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

（2），过渡所需时间 transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

（3），过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

（4），过渡延迟时间 transition-delay

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始延迟执行的时间

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

示例：让容器在hover状态下宽度和高度，从200px慢慢过渡到400px。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div></div>

</body>
</html>

css:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property : all;
  transition-property : all;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
    transition-delay:.18s;
}
div:hover {
  width: 400px;
  height: 400px;
}

示例：让容器从正方形渐显效果all .5s ease-in .2s慢慢过渡到圆角。
采用悬浮触发过渡动画方式，过渡0.2s后触发，整个过渡时间持续0.5s。

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>


</body>
</html>

css:

.wrapper {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  border: 2px dotted red;
  position:relative;
}

.wrapper div {
  padding: 15px 20px;
  color: #fff;
  background-color: orange;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all .5s ease-in .2s;
  transition: all .5s ease-in .2s;
}

.wrapper div:hover {
  background-color: red;
  border-radius: 10px;
}

2，animation和Keyframes

（1），Keyframes简介

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

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

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

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

示例：在CSS编辑器的第1行创建一个动画名叫“changecolor”，在“0%”时背景色为red,在20%时背景色为blue，在40%背景色为orange，在60%背景色为green，在80%时背景色yellow，在100%处时背景色为red。

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;
}

（2），animation-name

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

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

（3），animation-duration

设置动画时间

（4），animation-timing-function

设置动画播放方式

（5），animation-delay

设置动画播放延迟时间

（6），animation-iteration-count

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

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

2、如果取值为infinite，动画将会无限次的播放。

（7），animation-direction

animation-direction属性主要用来设置动画播放方向，其语法规则如下：

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

（8），animation-play-state

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

参数：

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

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

例如，页面加载时，动画不播放。代码如下：
animation-play-state:paused;

示例：调用定义的动画“around”，围着正方形内边境滚动

html:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div><span></span></div>

</body>
</html>

css:

@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
  animation-play-state:paused;
}

div:hover span {
  animation-play-state:running;
}

（9），animation-fill-mode

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

示例：元素背景色从红色变成蓝色。

@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: pink;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0.5s;
  animation-fill-mode: backwards ; 
}

背景色pink，动画效果：红——>绿——>青——>黄——>蓝

属性 效果

---

none
pink——>红——>绿——>青——>黄——>蓝——>pink
forwards
pink——>红——>绿——>青——>黄——>蓝
backwards
红——>绿——>青——>黄——>蓝——>pink
both
红——>绿——>青——>黄——>蓝

十，布局样式相关

1，多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法：

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

多列布局columns属性参数主要就两个属性参数：列宽和列数。

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

columns: 200px 2;

• column-count和column-width也可以单独使用
• column-gap主要用来设置列与列之间的间距
• column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

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

column-rule: 2px dotted green;

• column-span主要用来定义一个分列元素中的子元素能跨列多少。有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

2，盒子模型

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

在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成。在CSS编辑器第49-53行输入正确代码，让布局能正常显示。注：考虑浏览器的兼容性。

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"><h1>Header Content</h1></div>
<div id="page">
  <div class="main"><h1>Main Content</h1></div>
  <div class="sidebar"><h1>Sidebar Content</h1></div>
</div>
<div id="footer"><h1>Footer Content</h1></div>  
</body>
</html>

css:

h1 {
  font-size: 20px;
  margin: 0;
  color: #fff;
}
#page:after,
#page:before{
  content:"";
  display: table;
}
#page:after{
  clear:both;
  overflow: hidden;
}

#page {
  margin-bottom: 20px;
}
#header {
  width: 100%;
  background: green;
  margin-bottom: 10px;
  padding: 20px;
}
.main {
  width: 60%;
  padding: 20px;
  background: orange;
  float: left;
}
.sidebar {
  width: 38%;
  float: right;
  background: #f36;
  padding: 20px;
}

#footer {
  width: 100%;
  background: #36f;
  padding: 20px;
  clear:both;
}

#header,
.main,
.sidebar,
#footer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

3，伸缩布局

转自 https://segmentfault.com/a/1190000000484017?_ea=179500

（1）伸缩盒基本概念

伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾，房屋面积是有限的，但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了，就给大家伙多分点；面积小了，就让各位挤一挤少分点，总而言之不会让任何一个人露宿街头的（overflow）！

既然我们提到了房子和住户的关系，那么住户的排列自然需要沿一定的方向。对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。而伸缩盒呢，它的方向是可变的，既能纵向延伸，也能横向舒展，这取决于你的设置了。

（2）伸缩盒模型基本术语

伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同，它引入了一些新的概念和术语，通过下面这张图来了解一下：

Flex container 伸缩盒容器
这就是用来分的房子，这是一间神奇的房子，要让它变得神奇，将display属性声明为flex或inline-flex即可~

Flex item 伸缩项
房子里的居民，他们都会占有自己应得的住房面积。

为了形象说明，我们用代码来解释。

<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

CSS设置为：

.container {
  display: flex;
  width: 300px;
  height: 100px;
  ...
}

在这里display: inline-flex;好像也可以。
对于其中的伸缩项元素，我们需要给他们事先安排好住房面积比例，我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里

.item-1 {
  flex: 1;
  ...
}
.item-2 {
  flex: 1;
  ...
}
.item-3 {
  flex: 1;
  ...
}

我们的大房子被完美地平分成三个隔间了，三家平分房租！

如果有人想住大点的房子，我们直接改变flex的比例即可：

.item-1 {
  flex: 1;
  ...
}
.item-2 {
  flex: 1;
  ...
}
.item-3 {
  flex: 2;
  ...
}

Axes 轴
我们可以看到，图中有两条轴，分别标注了主轴和次轴（垂直于主轴）。然而实际上哪一条是主轴并不确定，是由我们来规定的。
1. flex-direction 此属性规定哪条轴为主轴。
2. justify-content此属性设置了伸缩项在主轴方向上的排列方式，这个稍后解释。
3. align-items 此属性和上面的justify-content相对，表示伸缩项在次轴上的排列方式。
4. align-self此属性规定某一个特定的伸缩项元素在次轴上的布局方式，在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性，不走寻常路~

flex-direction
当我们不想沿着默认的方向分房子的时候，我们可以改变flex-direction属性的值来改变主轴和方向，该属性默认的取值为row；

.container {
  flex: row-reverse;
  ...
}

顾名思义，这会让伸缩项的排列方向反过来：

当此属性设置为column时，主次轴就会对调，元素的排列方向也会随之改变：

.container {
  flex-direction: column;
  ...
}

至于flex: column-reverse的含义就不用我多说了吧~

justify-contents
有的时候，大家挨着住，一点空隙都没有也会很难受，连个过道都没有，隐私也不能保证对吧。这个时候，我们可以改变分配政策了，不再按比例分配，而是定额分配，每个人的面积是确定的。多出的房屋面积改成公共区域。

.item {
  width: 80px;
  ...
}

设定了width属性后也要记得去掉flex属性的声明哦，不然flex属性的效果仍然会把width覆盖掉~
同时，如果width属性也不设定的话，元素宽度会表现为内容的宽度，which means 当伸缩项内部无内容时，将不会进行渲染，其表现就和display: none;一样。
这时，在容器上声明justify-content属性就可以安排伸缩项的位置了：

.content {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
这项属性会改变次轴上元素排列的方式，对于本例来说原来次轴方向上元素的高度是表现为height: 100%;的，设定了align-items属性后，其高度表现就会发生改变了。

.content {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

说到这里了，伸缩项具体的表现其实可以想象出来了，想象不出来的就自己动手试一试吧~

order
在伸缩项上声明此属性，可以无视HTML结构的顺序而按照order从小到大的顺序沿flex-direction方向排列。比如：

.item-1 {
  order: 3;
  ...
}
.item-2 {
  order: 1;
  ...
}
.item-3 {
  order: 2;
  ...
}

flex-wrap
此属性的默认值为nowrap，也就是忽略伸缩项的宽度，管你要多少住房面积，通通按照flex属性说好的分配（宽度不够分，就按比例分），不许换行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse
}

.item {
  width: 150px;
}

flex-grow，flex-shrink 和 flex-basis
上文提到的flex属性实际上是这三个属性的简写形式。这三个属性有相似性，都是表示项与项之间分配空间的相对比例关系，不同之处在于：
1. flex-grow属性：属性值为该伸缩项所占空间相对于其他伸缩项（声明了flex相关属性的项）的比值。
2. flex-shrink属性：该伸缩项相对于其他伸缩项缩小的比值，也就是说当flex-shrink: 3;时，该项所占空间为其他项的1/3。
3. flex-basis属性：属性值为该项所占空间占容器空间的百分比。

注意：对于flex-basis属性，当所有项的属性值相加<=100%时，会严格按照百分比值来渲染。当属性值相加>100%时，元素并不会溢出，而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且flex-basis值都为50%时，表现行为与三个项均为flex: 1;一样。

Flexible Boxes布局模式在响应式开发中尤其好用，对不同的终端，设置元素之间的空间分配关系将会变成一件非常简单的事。伸缩盒布局和响应式布局中流行的流体布局哪种更好，还是可以结合起来，就看各位开发者发挥自己的聪明才智了！

十一，Media Queries

Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。

在彻底的了解Media Queries我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分：

1，媒体类型

媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：

2，引用方法

常见的有：link标签、@import和CSS3新增的@media几种：
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" />

@import方法

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

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

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

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

@media方法

@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。

（1）在样式文件中引用媒体类型：

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

（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

3，媒体特性

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型and （媒体特性）{你的样式}

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用
Media Queries可以使用关键词”and”将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

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

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

6.only关键词
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。