## 边框

CSS3 圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角：

这是圆角边框！

实例
在div中添加圆角元素：

```html
div
{
border:2px solid;
border-radius:25px;
}
```

CSS3 border-radius 属性
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

以下为三个实例：

```html
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}
```

CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

您还可以创建椭圆边角:

```html
#rcorners7 {    border-radius: 50px/15px;    
   background: #8AC007;    padding: 20px;     
   width: 200px;    height: 150px; }#rcorners8 {    
   border-radius: 15px/50px;    background: #8AC007;    
   padding: 20px;     width: 200px;    
   height: 150px; }#rcorners9 {    
   border-radius: 50%;    background: #8AC007;    
   padding: 20px;     width: 200px;    
   height: 150px;}
```

CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影:

实例
在div中添加box-shadow属性

```html
div
{
box-shadow: 10px 10px 5px #888888;
}
```

CSS3 边界图片
有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：

border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:
在 div 中使用图片创建边框

```html
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
```

为什么要使用transparent？
在这个例子中，div 样式里的 border:15px solid transparent; 中的 transparent 属性主要起一个占位和后备的作用。

定义边框的宽度和形状（占位作用）
在应用 border-image 之前，浏览器首先需要知道边框应该占多宽。

border: 15px solid transparent; 的意思就是：给这个 div 设置一个 15px 宽的边框。

因为没有 border-image 时，边框必须是可见的（比如 solid red），但这里又不想让用户看到原始的边框颜色（因为马上要用图片覆盖它），所以用 transparent（透明）来占位。

## 背景  

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

```html
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}
```


CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。
```html
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
```

CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

![img](https://www.runoob.com/images/background-origin.gif)

```html
div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}
```

CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

实例
```
#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}
```
## 渐变

![线性渐变](https://www.runoob.com/wp-content/uploads/2014/07/gradient_linear.png)

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例
从上到下的线性渐变：

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

尝试一下 »
线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

实例
从左到右的线性渐变：

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

尝试一下 »
线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

实例
从左上角到右下角的线性渐变：

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

尝试一下 »

使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

![img](https://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

实例
带有指定的角度的线性渐变：

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

尝试一下 »

使用多个颜色节点
下面的实例演示了如何设置多个颜色节点：

实例
带有多个颜色节点的从上到下的线性渐变：

#grad {
  background-image: linear-gradient(red, yellow, green);
}

尝试一下 »
下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

实例
#grad {
  /* 标准的语法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

尝试一下 »

使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

实例
从左到右的线性渐变，带有透明度：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

尝试一下 »

重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：

实例
一个重复的线性渐变：

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

尝试一下 »

CSS3 径向渐变
径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

![Radial gradient](https://www.runoob.com/wp-content/uploads/2014/07/gradient_radial.jpg)
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
径向渐变 - 颜色节点均匀分布（默认情况下）

实例
颜色节点均匀分布的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

尝试一下 »
径向渐变 - 颜色节点不均匀分布

实例
颜色节点不均匀分布的径向渐变：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

尝试一下 »

设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例
形状为圆形的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

尝试一下 »

不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner
实例
带有不同尺寸大小关键字的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

尝试一下 »

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：

实例
一个重复的径向渐变：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

## 文本效果

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

OperaSafariChromeFirefoxInternet Explorer
实例
给标题添加阴影:

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

尝试一下 »

CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例
div {
    box-shadow: 10px 10px 5px #888888;
}

尝试一下 »

接下来给阴影添加颜色
实例
div {
    box-shadow: 10px 10px grey;
}

尝试一下 »

接下来给阴影添加一个模糊效果
实例
div {
    box-shadow: 10px 10px 5px grey;
}

尝试一下 »

你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
实例
#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
} 
#boxshadow img {
     width: 100%;
     border: 1px solid #8a4419;
     border-style: inset;
} 
#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

尝试一下 »

阴影的一个使用特例是卡片效果
实例
div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

文字卡片 » 图片卡片 »

CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容

实例
p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}

p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

尝试一下 »

CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

CSS代码如下：

OperaSafariChromeFirefoxInternet Explorer
实例
允许长文本换行:

p {word-wrap:break-word;}

尝试一下 »

CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则：

CSS代码如下：

实例
p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}

尝试一下 »

h-shadow   v-shadow   blur   spread   color   insect

水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影 


## 字体


CSS3 @font-face 规则
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

lamp	提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

```html
<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>
```

## 2D转换

它是如何工作？
转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

鼠标移动到以下元素上，查看 2D 和 3D 的转换效果：

2D 转换
在本章您将了解2D变换方法：

translate()
rotate()
scale()
skew()
matrix()

OperaSafariChromeFirefoxInternet Explorer
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

尝试一下 »

translate() 方法
Translate
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

OperaSafariChromeFirefoxInternet Explorer
实例
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

尝试一下 »
translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

rotate() 方法
Rotate
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

OperaSafariChromeFirefoxInternet Explorer
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

尝试一下 »
rotate值（30deg）元素顺时针旋转30度。

scale() 方法
Scale
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

OperaSafariChromeFirefoxInternet Explorer
实例
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

尝试一下 »
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew() 方法
语法
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
OperaSafariChromeFirefoxInternet Explorer
实例
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

尝试一下 »
skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

matrix() 方法
Rotate
matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

OperaSafariChromeFirefoxInternet Explorer
实例
利用matrix()方法旋转div元素30°

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

CSS的 matrix() 使用的是2D变换矩阵，格式为：

css
transform: matrix(a, b, c, d, e, f);
这对应着数学中的变换矩阵：


[ a  c  e ]

[ b  d  f ]

[ 0  0  1 ]



| 参数  | 作用     | 默认值 | 对应变换       |
| :---- | :------- | :----- | :------------- |
| **a** | 水平缩放 | 1      | `scaleX()`     |
| **b** | 垂直倾斜 | 0      | `skewY()`      |
| **c** | 水平倾斜 | 0      | `skewX()`      |
| **d** | 垂直缩放 | 1      | `scaleY()`     |
| **e** | 水平平移 | 0      | `translateX()` |
| **f** | 垂直平移 | 0      | `translateY()` |

## 3D
rotateX() 方法
Rotate X
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

OperaSafariChromeFirefoxInternet Explorer
实例
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

尝试一下 »

rotateY() 方法
Rotate Y
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

OperaSafariChromeFirefoxInternet Explorer
实例
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

## 过渡
CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

它是如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。
OperaSafariChromeFirefoxInternet Explorer
实例
应用于宽度属性的过渡效果，时长为 2 秒：

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

OperaSafariChromeFirefoxInternet Explorer
实例
规定当鼠标指针悬浮(:hover)于 <div>元素上时：

div:hover
{
    width:300px;
}

尝试一下 »
注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式

多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔：

OperaSafariChromeFirefoxInternet Explorer
实例
添加了宽度，高度和转换效果：

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

尝试一下 »

过渡属性
下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。

## 动画
CSS3 @keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

CSS3 动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

## 多列





CSS3 可以将文本内容设计成像报纸一样的多列布局
CSS3 创建多列
column-count 属性指定了需要分割的列数。

以下实例将 <div> 元素中的文本分为 3 列：

实例
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

尝试一下 »
CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素：

实例
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

尝试一下 »
CSS3 列边框
column-rule-style 属性指定了列与列间的边框样式：

实例
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

尝试一下 »
column-rule-width 属性指定了两列的边框厚度:

实例
div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

尝试一下 »
column-rule-color 属性指定了两列的边框颜色：

实例
div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

尝试一下 »
column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度，样式及颜色：

实例
div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

尝试一下 »
指定元素跨越多少列
以下实例指定 <h2> 元素跨越所有列：

实例
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

尝试一下 »
指定列的宽度
column-width 属性指定了列的宽度。

实例
div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

尝试一下 »


## 用户界面
CSS3 调整尺寸(Resizing)
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代码如下：

OperaSafariChromeFirefoxInternet Explorer
实例
由用户指定一个div元素尺寸大小：

div {
    resize:both;
    overflow:auto;
}

尝试一下 »

CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

OperaSafariChromeFirefoxInternet Explorer
实例
规定两个并排的带边框方框：

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

| 特性               | content-box (默认)                             | border-box                                     |
| :----------------- | :--------------------------------------------- | :--------------------------------------------- |
| **width 的含义**   | 只设置内容区域的宽度                           | 设置整个盒子（内容+内边距+边框）的宽度         |
| **height 的含义**  | 只设置内容区域的高度                           | 设置整个盒子（内容+内边距+边框）的高度         |
| **实际总宽度公式** | width + padding-left/right + border-left/right | width (固定不变)                               |
| **内容区域宽度**   | 由width指定                                    | width - padding-left/right - border-left/right |
| **适用场景**       | 需要精确控制内容大小时                         | 需要精确控制整体大小时                         |


什么时候用 content-box？
css
/* 需要精确控制文本内容区域 */
.text-content {
  box-sizing: content-box;
  width: 60ch;  /* 60个字符的宽度 */
  padding: 20px;
  /* 内容保持60字符宽度，整体盒子会变大 */
}
什么时候用 border-box？
css
/* 布局时推荐使用 border-box，更容易控制 */
* {
  box-sizing: border-box;  /* 全局设置，所有元素都使用border-box */
  }

/* 响应式设计时特别有用 */
.responsive-card {
  box-sizing: border-box;
  width: 33.33%;  /* 三分之一的宽度 */
  padding: 20px;
  border: 1px solid #ccc;
  /* 总宽度始终是33.33%，不会溢出 */
}


CSS3 外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下:

OperaSafariChromeFirefoxInternet Explorer
实例
规定边框边缘之外 15 像素处的轮廓：

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}
resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 \<textarea>\</textarea> 文本域标签。

可以说 \<textarea> 标签自带 resize: both；所以可以通过设置 resize: none; 来禁止 \<textarea> 的尺寸被拉伸。

但是，值得注意的是溢出形式的设置：

1. 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；

2. 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；

3. 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（\<textarea> 也是自带此属性）；

----------------------------------------------------------------------------------------------------

outline-offset 属性用来设置轮廓（外边框）与边框（内边框）之间的间隔，或 “填充”，默认情况下，轮廓是紧贴着边框的，所以需要通过该属性来使它们分开。

outline 不会破坏元素宽高，同样的 outline-offset 设置的间隔，也不会影响元素的宽高。

----------------------------------------------------------------------------------------------------

box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。

content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border与padding的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。

（别的属性是越标准越好用，但这个属性却是反向向IE标准的）

而 border-box 则指 IE盒子模型，也称为“怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

## 图片

圆角图片
实例
圆角图片:

img {
    border-radius: 8px;
}

尝试一下 »
实例
椭圆形图片:

img {
    border-radius: 50%;
}

尝试一下 »
缩略图
我们使用 border 属性来创建缩略图。

实例
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

\<img src="paris.jpg" alt="Paris">

尝试一下 »
实例
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

```html
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>
```


尝试一下 »
响应式图片
响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

实例
img {
    max-width: 100%;
    height: auto;
}

尝试一下 »
提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程。

图片文本
如何定位图片文本:
左上角：
.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

卡片式图片
实例
div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

尝试一下 »
图片滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

实例
修改所有图片的颜色为黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

响应式图片相册
实例
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}


## 按钮
普通按钮：
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}


按钮颜色
    
我们可以使用 background-color 属性来设置按钮颜色:

实例
.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */

尝试一下 »
按钮大小
    
我们可以使用 font-size 属性来设置按钮大小:

实例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

尝试一下 »
圆角按钮
    
我们可以使用 border-radius 属性来设置圆角按钮:

实例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

尝试一下 »
按钮边框颜色
    
我们可以使用 border 属性设置按钮边框颜色:

实例
.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

尝试一下 »
鼠标悬停按钮
    
    
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:

实例
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

尝试一下 »
按钮阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:

实例
.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

尝试一下 »
禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

实例
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

尝试一下 »
按钮宽度


默认情况下，按钮的大小由按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

实例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

尝试一下 »
按钮组

移除外边距并添加 float:left 来设置按钮组:

实例
.button {
    float: left;
}

尝试一下 »
带边框按钮组

我们可以使用 border 属性来设置带边框的按钮组:

实例
.button {
    float: left;
    border: 1px solid green
}

尝试一下 »
实例
.btn-group button {
    background-color: #04AA6D; /* 绿色背景 */
    border: 1px solid green; /* 绿色边框 */
    color: white; /* 白色文本 */
    padding: 10px 24px; /* 内边距离、 */
    cursor: pointer; /* 指针/手形图标 */
    float: left; /* 并排浮动按钮 */
}

尝试一下 »
按钮动画
## 分页
CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。

简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

CSS 实例
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

尝试一下 »
如果点击当前页，可以使用 .active 来设置当前页样式，鼠标悬停可以使用 :hover 选择器来修改样式：

CSS 实例
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

尝试一下 »
CSS 实例
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

尝试一下 »

## 框大小
不使用 CSS3 box-sizing 属性
默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。


使用 CSS3 box-sizing 属性
CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

两个 div 现在是一样大小的!

菜鸟教程!

以下是两个 \<div> 元素添加 box-sizing: border-box; 属性的简单实例。

实例
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

尝试一下 »
从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的：

## 弹性盒子

CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。

简单分页
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

以下实例演示了如何使用 HTML 和 CSS 来创建分页：



## 弹性盒子
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。


CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。


尝试一下 »
当然我们可以修改排列方式。

如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:

实例
```
body {
    direction: rtl;
}

```

flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。

语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
以下实例演示了 row-reverse 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 column 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »

以下实例演示了 column-reverse 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

以下实例演示了 flex-end 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 center 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 space-between 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 space-around 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
以下实例演示了 stretch(默认值) 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 flex-start 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 flex-end 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 center 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 baseline 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
以下实例演示了 nowrap 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 wrap 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
以下实例演示了 wrap-reverse 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

尝试一下 »
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
以下实例演示了 center 的使用:

实例
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

尝试一下 »
弹性子元素属性
排序
语法
order: 
各个值解析:

\<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
order 属性设置弹性容器内弹性子元素的属性:

实例
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}

尝试一下 »
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

以下实例在第一个弹性子元素上设置了 margin-right: auto; 。 它将剩余的空间放置在元素的右侧：

实例
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}

尝试一下 »
完美的居中
以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

实例
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

尝试一下 »
align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
以下实例演示了弹性子元素上 align-self 不同值的应用效果：

实例
.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

尝试一下 »
flex
flex 属性用于指定弹性子元素如何分配空间。

语法
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

实例
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}
## 多媒体
CSS3 多媒体查询
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
多媒体查询语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

`<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

| 值     | 描述                             |
| :----- | :------------------------------- |
| all    | 用于所有多媒体类型设备           |
| print  | 用于打印机                       |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器                   |

多媒体查询简单实例
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:

实例
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

尝试一下 »
以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

实例
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

尝试一下 »
以下实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：

实例
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}


## 网格布局



![img](https://www.runoob.com/wp-content/uploads/2021/10/DE5DE2B3-1C7A-42B4-AD5F-07211CC54D75.jpeg)

CSS 网格布局
网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

以下是一个简单的网页布局，使用了网格布局，包含六列和三行：

网格元素
网格布局由一个父元素及一个或多个子元素组成。

实例

```html
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
```

尝试一下 »
display 属性
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

实例
.grid-container {
  display: grid;
}

尝试一下 »
实例
.grid-container {
  display: inline-grid;
}

尝试一下 »
网格轨道
我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。

这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。

在下图中你可以看到一个绿色框的轨道——网格的第一个行轨道。第二行有三个白色框轨道。

下实例我们使用 grid-template-columns 属性在网格容器中创建四个列:

实例
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

尝试一下 »
以下实例我们使用 grid-template-rows 属性在网格容器中设置行的高度:

实例
.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

尝试一下 »
fr 单位
轨道可以使用任何长度单位进行定义。

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

实例
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

尝试一下 »
网格单元

一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
网格区域
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。

下图高亮的网格区域扩展了2列以及2行。
网格列
网格元素的垂直线方向称为列（Column）。
网格行
网格元素的水平线方向称为行（Row）。
网格间距
网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。



![img](https://www.runoob.com/wp-content/uploads/2021/10/grid_gaps.png)



您可以使用以下属性来调整间隙大小：

grid-column-gap
grid-row-gap
grid-gap
以下实例使用 grid-column-gap 属性来设置列之间的网格间距：

实例
.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

尝试一下 »
以下实例使用 grid-row-gap 属性来设置行之间的网格间距：

实例
.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

尝试一下 »
grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写:

实例
.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

尝试一下 »
grid-gap 属性可以同时设置行间距和列间距:

实例
.grid-container {
  display: grid;
  grid-gap: 50px;
}

尝试一下 »

网格线
列与列，行与行之间的交接处就是网格线。

![img](https://www.runoob.com/wp-content/uploads/2021/10/1_diagram_numbered_grid_lines.png)

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）

网格元素设置时可以参考这些行号。

下图则定义了四条纵向的网格线，以及四条横向的网格线：



![img](https://www.runoob.com/wp-content/uploads/2021/10/grid_lines.png)

## 网格容器

网格容器
要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。

网格容器内放置着由列和行内组成的网格元素。

grid-template-columns 属性
grid-template-columns 属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。

属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。

如果您希望网格布局包含 4 列，则需要设置 4 列的宽度，如果所有列的宽度都是一样的，可以设置为 auto。

以下实例设置了 4 列的网格布局：

实例
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

尝试一下 »
注意：如果您在 4 列网格中有 4 个以上的网格元素，网格布局会生成新的一行放置该元素。

grid-template-columns 属性也可用于指定列的宽度。

实例
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

尝试一下 »
grid-template-rows 属性
grid-template-rows 属性设置每一行的高度。

属性值是一个以空格分隔的列表，其中每个值定义相对应行的高度：

实例
.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

尝试一下 »
justify-content 属性
justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

注意：网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

justify-content 详细内容参考：CSS justify-content 属性

实例
.grid-container {
  display: grid;
  justify-content: space-evenly;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  justify-content: space-around;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  justify-content: space-between;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  justify-content: center;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  justify-content: start;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  justify-content: end;
}

尝试一下 »
align-content 属性
align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。

注意：网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

尝试一下 »
实例
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

尝试一下 »
## 网格元素
CSS 网格元素
网格容器包含了一个或多个网格元素。

默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。

grid-column 属性
grid-column 属性定义了网格元素列的开始和结束位置。

注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。

我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的列数。

以下实例设置 "item1" 在第 1 列开始，在第 5 列前结束：

实例
.item1 {
  grid-column: 1 / 5;
}

尝试一下 »
以下实例设置 "item1" 跨越 3 列：

实例
.item1 {
  grid-column: 1 / span 3;
}

尝试一下 »
以下实例设置 "item2" 跨越 3 列：

实例
.item2 {
  grid-column: 2 / span 3;
}

尝试一下 »
grid-row 属性
grid-row 属性定义了网格元素行的开始和结束位置。

注意： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。

我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的行数。

以下实例设置 "item1" 在第 1 行开始，在第 4 行前结束：

实例
.item1 {
  grid-row: 1 / 4;
}

尝试一下 »
以下实例设置 "item1" 跨越两行：

实例
.item1 {
  grid-row: 1 / span 2;
}

尝试一下 »
grid-area 属性
grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

以下实例设置 "item8" 从第 1 行开始和第 2 列开始， 第 5 行和第 6 列结束。

实例
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

尝试一下 »
以下实例设置 "item8" 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列。

实例
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

尝试一下 »
网格元素命名
grid-area 属性可以对网格元素进行命名。

命名的网格元素可以通过容器的 grid-template-areas 属性来引用。

以下实例 item1 命名为 "myArea", 并跨越五列：

实例
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

尝试一下 »
每行由单引号内 ' ' 定义，以空格分隔。

. 号表示没有名称的网格项。

实例
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

尝试一下 »
要定义两行，请在另一组单引号内 ' ' 定义第二行的列。

以下实例设置 "item1" 跨越 2 行 2 列:

实例
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

尝试一下 »
命名所有网格元素，并制作一个网页模板：

实例
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

尝试一下 »
网格元素的顺序
网格布局允许我们将网格元素放置在我们喜欢的任何地方。

HTML 代码中的第一元素不一定非要显示为网格中元素的第一项。

实例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

尝试一下 »
您可以使用媒体查询，重新排列在指定屏幕尺寸下的顺序：

实例
@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
## 响应式设计
什么是 Viewport?
viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

什么是网格视图?
很多网页都是基于网格设计的，这说明网页是按列来布局的。

![img](https://www.runoob.com/wp-content/uploads/2015/06/viewgrid2.jpg)
创建响应式网格视图
接下来我们来创建一个响应式网格视图。

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

确保边距和边框包含在元素的宽度和高度间。

添加如下代码：

* {
    box-sizing: border-box;
}
查看更多 box-sizing 内容请点击：CSS3 box-sizing 属性 。

以下实例演示了简单的响应式网页，包含两列：

实例
.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}

尝试一下 »
以上实例包含两列。

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个 span ：

CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

尝试一下 »
所有的列向左浮动，间距(padding) 为 15px：

CSS:
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
每一行使用 <div> 包裹。所有列数加起来应为 12：

<div class="row">
  <div class="col-3">...</div>
  <div class="col-9">...</div>
</div>
列中行为左浮动，并添加清除浮动：

CSS:
.row:after {
    content: "";
    clear: both;
    display: block;
}
我们可以添加一些样式和颜色，让其更好看：

实例
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}

响应式 Web 设计 - 图片
使用 width 属性
如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

实例
img {
    width: 100%;
    height: auto;
}

尝试一下 »
注意在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。

使用 max-width 属性
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

实例
img {
    max-width: 100%;
    height: auto;
}

尝试一下 »
网页中添加图片
实例
img {
    width: 100%;
    height: auto;
}

尝试一下 »
背景图片
背景图片可以响应调整大小或缩放。

以下是三个不同的方法：

1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

这是 CSS 代码:

实例
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

尝试一下 »
2. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：
这是 CSS 代码:

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

尝试一下 »
3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。
4. 这是 CSS 代码:

实例
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}
实例
/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

尝试一下 »
你可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。

实例
/* 设备小于 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}picture> 元素类似于 \<video> 和 \<audio> 元素。可以设备不同的资源，第一个设置的资源为首选使用的：

实例
```html
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>
```
尝试一下 »
srcset 属性的必须的，定义了图片资源。

media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。

对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。
视频
使用 max-width 属性
如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小：

实例
video {
    max-width: 100%;
    height: auto;
}

尝试一下 »
在网页中添加视频
我们可以在网页中添加视频。以下实例视频根据 div 区域大小自动调整并占满整个 div 区域：

实例
video {
    width: 100%;
    height: auto;
}