【css】css语法学习笔记

2023-12-04 16:34:59

学习网站以下内容均摘抄自该网站

CSS 介绍

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

CSS注释以 /* 开始, 以 */ 结束。

/* 选择器 {属性1: 值1; 属性2: 值2;……} */
p {color:red;text-align:center;}

CSS 选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id选择器,CSS 中 id 选择器以 "#" 来定义。

/*HTML文档中<p id="para1">Hello World!</p> */
#para1
{
	text-align:center;
	color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

/*所有拥有 center 类的 HTML 元素均为居中*/
.center {text-align:center;}

也可以指定特定的HTML元素使用class:

/*所有的 p 元素使用 class="center" 让该元素的文本居中*/
p.center {text-align:center;}

[注]id/class属性不要以数字开头，它无法在 Mozilla 或 Firefox 中起作用。

CSS 分组和嵌套

分组选择器

在样式表中有很多具有相同样式的元素。

h1 {
    color: green;
} 
h2 {
    color: green;
}
p {
    color: green;
}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p {
    color: green;
}

嵌套选择器

可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p#marked{}: 为id="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
	
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

CSS 组合选择符

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)：用于选取某元素的所有该后代元素。

/* 选取 <div> 元素中所有的 <p>元素 */
div p {background-color: yellow;}

子元素选择器(以大于 > 号分隔)：只能选择作为某元素直接/一级子元素的元素。

/* 选择了<div>元素中所有直接子元素 <p> */
div>p {background-color: yellow;}

相邻兄弟选择器(以加号 + 分隔)：选择紧接在另一个元素后的元素，而且二者有相同的父元素。

/* 选取了位于所有 <div> 元素后的第一个 <p> 元素: */
div+p {background-color: yellow;}

后继兄弟选择器(以波浪号～分隔)：选取所有指定元素之后的相邻兄弟元素，且二者有相同父元素。

/* 选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> */
div~p{background-color: yellow;}

CSS 属性选择器

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别:

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:　

[attribute~=value] 属性中包含独立的单词为 value，例如：

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[attribute^=value] 属性的前几个字母是 value 就可以，例如：

[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"] --> <a href="example.pdf"></a>

表单样式

/*
<form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20"/>
Lastname:<input type="text" name="lname" value="Griffin" size="20"/>
<input type="button" value="Example Button"/>
</form>
*/
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}
input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

CSS 背景(background)

background-color 背景颜色

body {background-color:#b0c4de;}

背景图像 background-image (默认情况下，background-image放置在元素的左上角，并重复平铺垂直和水平方向)

body {background-image:url('paper.gif');}

background-position 设置背景图像的起始位置

值	描述
left top/left center/left bottom/right top/right center/right bottom/center top/center center/ center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

body {
	background-image: url('smiley.gif');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

background-repeat 设置背景图像是否及如何重复 (默认情况下，重复background-image的垂直和水平方向)

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。阅读关于 initial 内容
inherit	指定 background-attachment 的设置应该从父元素继承。阅读关于 inherit 内容

background 背景缩写属性可以在一个声明中设置所有的背景属性。各值之间用空格分隔，不分先后顺序。可以只有其中的某些值。

body {background: #00ff00 url('smiley.gif') no-repeat fixed center;}

CSS Text

color 设置文本颜色

h1 {color: #00ff00;}

direction 设置文本方向

div{
    direction: rtl;
    /*unicode-bidi 属性与 direction 属性一起使用，设置或返回是否应重写文本以支持同一文档中的多种语言*/
    unicode-bidi: bidi-override; 
}

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

letter-spacing 设置字符间距

h1 {letter-spacing: 2px}
h2 {letter-spacing: -3px}

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

line-height 设置行高

p.small {line-height: 90%}
p.big {line-height: 200%}

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

text-align 对齐元素中的文本

如果 direction 属性是 ltr，则默认值为 left；如果 direction 属性是 rtl，则默认值为 right。

h1 {text-align: center;}

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

text-decoration 向文本添加修饰

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写：

text-decoration: underline wavy red;       /*红色波浪形下划线*/

从设计的角度看 text-decoration属性主要是用来删除链接的下划线，不建议强调指出不是链接的文本，因为这常常混淆用户。

a {text-decoration: none;}

text-indent 缩进元素中文本的首行

p {text-indent: 50px;}

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

text-shadow 设置文本阴影

/*白色的文本文字阴影*/
h1 {  
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

text-transform 控制元素中的字母

h1 {text-transform: uppercase;}
h2 {text-transform: capitalize;}
p {text-transform: lowercase;}

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

vertical-align 设置元素的垂直对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

white-space 设置元素中空白的处理方式

p {white-space: nowrap;}

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

word-spacing 设置字间距

汉字的间隔调节是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。

p {word-spacing: 30px;}

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

CSS Fonts

CSS字体属性定义字体，加粗，大小，文字样式。

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

p {font-family: "Times New Roman", Times, serif;}

较常用的字体组合 Web安全字体组合。

font-style 设置字体样式

p {font-style: italic}

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了。这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！

font-size 设置文字的大小与像素

p {font-size:14px;}

值	描述
xx-small/ x-small/ small/ medium/ large/ x-large/ xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

font-weight 属性设置文本的粗细

p {font-weight:lighter;}

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100/200/300/400/500/600/700/800/900	定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

font-variant 属性主要用于定义小型大写字母文本

p {font-variant: small-caps;}

font 简写属性在一个声明中设置所有字体属性

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

p {font: italic bold 12px/30px Georgia,serif;}

CSS 链接

不同的链接可以有不同的样式:

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

链接的样式，可以用任何CSS属性（如颜色 color，字体 text，背景 background等）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

</html>

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

CSS 列表

list-style-type 设置列表项标志的类型

"disc" for <ul> and "decimal" for <ol>

ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

list-style-position 设置列表中列表项标志的位置

ul {list-style-position: inside;}

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

list-style-image 将图像设置为列表项标志

ul {list-style-image: url('sqpurple.gif');}

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image。

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
移除默认设置

list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

CSS 表格

表格边框 border

table, th, td {border: 1px solid black;}

在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

table {border-collapse:collapse;}
table,th, td {border: 1px solid black;}

width和height属性定义表格的宽度和高度。

table {width:100%;}
th {height:50px;}

text-align属性设置水平对齐方式，向左(left)，右(right)，或中心(center);

vertical-align属性设置垂直对齐，比如顶部(top)，底部(bottom)或中间(center);

td {
    height:50px;
    text-align: right;
    vertical-align: bottom;
}

padding控制边框和表格内容之间的间距

td {padding: 3px 7px 2px 7px;}

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

table, td, th {border:1px solid green;}
th {
    background-color: green;
    color: white;
}

caption-side 设置标题位置

caption {caption-side:bottom;}

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 边框(border)

CSS边框属性允许你指定一个元素边框的样式和颜色。

border-style 属性用来定义边框的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

border-width 属性为边框指定宽度。

"border-width" 属性如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

p.one {
    border-style:solid;
    border-width:5px;
}
p.two {
    border-style:solid;
    border-width:medium;
}

border-color 属性用于设置边框的颜色。

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

p {
    border-style:solid;
    border-color:red;
}

在CSS中，可以指定不同的侧面不同的边框：

p {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

上面的例子也可以设置一个单一属性border-style，可以有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

边框颜色、边框宽度也可以和边框样式一样单独为4个边设置。遵循的规则也一样。

p {
	border-left-style: solid;
	border-left-width: 15px;
}

border 简写属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width, border-style,和border-color。

还有border-left、border-right 、border-top 、border-bottom 四个简写属性

CSS 轮廓(outline)

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

outline-style 设置轮廓的样式

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

outline-width 指定轮廓的宽度。

值	描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

outline-color 属性指定轮廓颜色。

值	描述
color	指定轮廓颜色。在 CSS颜色值寻找颜色值的完整列表。
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit	规定应该从父元素继承轮廓颜色的设置。

p {
	outline-style: dotted;
    outline-width: thick;
	outline-color: #00ff00;
}

outline 简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

CSS 外边距(magin)

CSS margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

p {
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}

margin 属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin可以使用负值，重叠的内容。

CSS 填充(padding)

padding 定义元素边框与元素内容之间的空间，即上下左右的内边距。

p {
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}

padding 简写属性规则和 margin 一样。

CSS 尺寸 (dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS 显示(display)与可见性(visibility）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

内联元素<——>块元素

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性(普通的内联元素不能修改宽高内外边距等)

我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

visibility: collapse

对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。

然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

CSS 定位(position)

position 属性指定了元素的定位类型。

元素可以使用的顶部(top)，底部(bottom)，左侧(left)和右侧(right)属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position 属性的五个值：
- static: HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
- fixed: 元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
- relative: 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
- absolute: 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
- sticky: 粘性定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
  
  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;  /* Safari */
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

z-index 设置元素的堆叠顺序:具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div {
	background-color:red;
	width:100%;
	height:100px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<div></div>
<p>因为div元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

clip 剪辑一个绝对定位的元素

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

img {
	position:absolute;
	clip:rect(0px,60px,200px,0px);
}

如果先有"overflow：visible"，clip属性不起作用。

CSS 溢出(overflow)

overflow 属性用于控制内容溢出元素框时显示的方式，可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

div {
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: auto;
}

注意:overflow 属性只工作于指定高度的块元素上。

overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域。

overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域。

CSS 浮动(float)

float会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

img {float:right;}

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

.text_line {clear:both;}

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.header {
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer {
    background-color: #444;
    color: white;
    padding: 15px;
}
.topmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li {
    float: left;
}
.topmenu li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover {
    background-color: #222;
}
.topmenu li a.active {
    color: white;
    background-color: #4CAF50;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.sidemenu {
    width: 25%;
}
.content {
    width: 75%;
}
.sidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a {
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover {
    background-color: #555;
    color: white;
}
.sidemenu li a.active {
    background-color: #008CBA;
    color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
  <li><a href="#home" class="active">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
  <div class="column sidemenu">
    <ul>
      <li><a href="#flight">The Flight</a></li>
      <li><a href="#city" class="active">The City</a></li>
      <li><a href="#island">The Island</a></li>
      <li><a href="#food">The Food</a></li>
      <li><a href="#people">The People</a></li>
      <li><a href="#history">The History</a></li>
      <li><a href="#oceans">The Oceans</a></li>
    </ul>
  </div>

  <div class="column content">
    <div class="header">
      <h1>The City</h1>
    </div>
    <h1>Chania</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>底部文本</p>
</div>

</body>
</html>

CSS 对齐

元素居中对齐

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

.center {
    margin: auto;
    width: 50%;
}

文本居中对齐

.center {
    text-align: center;
}

图片居中对齐

img {
    display: block;
    margin: 0 auto;
}

左/右对齐
- position: absolute;
  
  当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。
```
body {
    margin: 0;
    padding: 0;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
```
- float
  
  *如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
```
body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
```

垂直居中

padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

line-height=height

.center {
    height: 200px;
    line-height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；

多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

CSS 伪类/伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类/伪元素的语法：

selector:pseudo-class/pseudo-element {property: value;}

CSS类也可以使用伪类/伪元素：

selector.class:pseudo-class/pseudo-element {property: value;}

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:link/:visted/:hover/:active

链接的不同状态都可以以不同的方式显示。

a:link {color:#FF0000;} /* 设置了未访问过的页面链接样式 */
a:visited {color:#00FF00;} /* 设置访问过的页面链接的样式 */
a:hover {color:#FF00FF;} /* 当有鼠标悬停在其上的链接样式 */
a:active {color:#0000FF;} /* 设置当你点击链接时的样式 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

:before/:after

:before 选择器向选定的元素前插入内容。

:after 选择器向选定元素的最后子元素后面插入内容。

p:before {content: "Read this: ";}
p:after {content: "- Remember this";}

content 属性与 :before 及 :after 伪元素配合使用，来插入内容。

/* content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit; */
/*normal在 :before 和 :after 伪类元素中会被视为 none，即也是空值。*/
p#testID:before {content:normal;}
p#testID:before {content:none;}
/*设置文本内容*/
p:before {content: "string 设置文本内容";}
/*设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）*/
p {counter-increment: myIndex;}
p:before {content:counter(myIndex);}
/*将元素的 attribute 属性以字符串形式返回*/
a:after {content: " (" attr(href) ")";}
/*设置前后引号*/
p::before {content: open-quote;}
p::after {content: close-quote;}
/*移除内容的开始引号,闭合引号*/
p#testID:before {content: no-open-quote;}
p#testID:after {content: no-close-quote;}
/*设置某种媒体（图像，声音，视频等内容）的链接地址*/
p:before {content: url(smiley.gif);}

[计数器](# CSS 计数器)内容。

:first-child/:last-child/:nth-child/:root/:target/:not/:empty

:first-child 伪类选择父元素的第一个子元素。等同于 :nth-child(1)

/* 匹配 <p> 的父元素的第一个<p>元素 */
p:first-child {background-color:yellow;}
/* 选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素 */
p:first-child i {background:yellow;}
/* 每个列表中的第一个 <li>元素选择的样式 */ 
li:first-child {background:yellow;}
/* 每一个<ul>元素的第一个子元素选择的样式 */
ul>:first-child {background:yellow;}

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。等同于:nth-of-type(1)。

/* 选择的 p 元素是其父元素的第一个 p 元素 */
p:first-of-type {background:#ff0000;}

:last-child 选择器用来匹配父元素中最后一个子元素。等同于 :nth-last-child(1)。

/* <p> 是其父元素的最后一个元素 */
p:last-child {background: #ff0000;}

:last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素。等同于:nth-last-of-type(1)。

/* 指定其父级的最后一个p元素 */
p:last-of-type {background:#ff0000;}

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字(odd/even)，或者一个公式(an+ b)。

/* 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色 */
p:nth-child(2) {background: #ff0000;}
/*为奇数和偶数p元素指定两个不同的背景颜色(该索引的第一个子节点是1)*/
p:nth-child(odd) {background: #ff0000;}
p:nth-child(even) {background: #0000ff;}
/*对所有索引是3的倍数的p元素指定了背景颜色(n从0开始计数)*/
p:nth-child(3n+0) {background: #ff0000;}

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n可以是一个数字，一个关键字，或者一个公式。
:nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素。
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
:only-child 选择器匹配属于父元素中唯一子元素的元素。

/* 匹配属于父元素中唯一子元素的 p 元素 */
/* <div><p>唯一子</p></div>
p:only-child {background: #ff0000;}

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

/*为每个并非<p>元素的元素设置背景颜色*/
:not(p) {background: #ff0000;}

:empty 选择器选择每个没有任何子级的元素（包括文本节点）

/* <p></p> */
p:empty {
	width:100px;
	height:20px;
	background:#ff0000;
}

:root选择器匹配文档的根元素。在HTML中根元素始终是HTML元素。

/*设置HTML文档的背景色*/
:root {background: #ff0000;}

:target 选择器可用于当前活动的target元素的样式。

＃锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。

/* 
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
*/
#news1:target
{
	border: 2px solid #D4D4D4;
	background-color: #e5eecc;
}

:first-line/:first-letter

:first-letter 选择器用来指定元素第一个字母的样式。

:first-line 选择器用来指定选择器第一行的样式。

/*每个<p>元素的第一行选择的样式*/
p:first-line {background-color: yellow;}
/*每个 <p>元素的第一个字母选择的样式*/
p:first-letter {
	font-size: 200%;
	color: #8A2BE2;
}

提示: :first-letter和:first-line选择器仅适用于在块级元素中，可以使用以下属性：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear

涉及表单元素的伪类

:optional 选择器在表单元素是可选项时设置指定样式。表单元素中如果没有特别设置 required 属性即为 optional 属性。

:required 选择器在表单元素是必填项时设置指定样式。表单元素可以使用 required 属性来设置必填项。

注意：:optional和:required选择器只适用于表单元素: input, select 和 textarea。

input:optional {background-color: yellow;}
input:required {background-color: red;}

:focus 选择器用于选择具有焦点的元素。

提示: :focus选择器接受键盘事件或其他用户输入的元素。

input:focus {background-color: yellow;}

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

input:checked {
    height: 50px;
    width: 50px;
}

:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。

:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。

注意：/* 设置所有type="text"的启用的输入元素的背景颜色 */
input[type="text"]:enabled {background:#ffff00;}
/* 设置所有type="text"的禁用的输入元素的背景颜色 */
input[type="text"]:disabled {background: #dddddd;}

:in-range 选择器用于标签的值在指定区间值时显示的样式。

:out-of-range 选择器用于标签的值在指定区间之外时显示的样式。

注意：:in-range和:out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性。

/* <input type="number" min="5" max="10"/> */
input:out-of-range {border:2px solid red;}
input:in-range {border:2px solid yellow;}

:invalid 选择器用于在表单元素中的值是非法时设置指定样式。

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

注意： :invalid和:valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

**注意：**/* <input type="email"/> */
input:invalid {border:2px solid red;}
input:valid {background-color: yellow;}

:read-write 选择器用于匹配可读及可写的元素。

:read-only 选择器用于选取设置了 "readonly" 属性的元素。表单元素可以设置 "readonly" 属性来定义元素只读。

注意：:read-write 选择器只使用于设置了input 和 textarea 元素。:read-only 选择器适用于 input 和 textarea 元素，但是它也适用于设置了 "readonly" 属性的元素。
```
/*
<p>普通的input元素:<br><input value="hello"></p>
<p>只读的input元素:<br><input readonly value="hello"></p>
*/
input:read-only {background-color: yellow;}
input:read-write {background-color: yellow;}
```

:lang

:lang 伪类使你有能力为不同的语言定义特殊的规则。

q:lang(no) {quotes: "~" "~";}

/* html代码 */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

CSS 透明度(opacity)

opacity属性设置一个元素了透明度级别。

指定不透明度。从0.0（完全透明）到1.0（完全不透明）。默认是1.0。

div {opacity:0.5;}

CSS 计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before {
  content:"Section " counter(section) ". ";
  counter-increment:section;
}
h2:before {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}

ol {
  counter-reset: sect;
  list-style-type: none;
}
li::before {
  counter-increment: sect;
  content: counters(sect,".") " ";
}

注：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

CSS 光标类型(cursor)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
</body>
</html>

CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

@media 规则允许在相同样式表为不同媒体设置不同的样式。

/*浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体*/
@media screen {
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
    p.test {font-weight:bold;}
}

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

CSS !important规则

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

/*尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，因为 !important 规则会覆盖 background-color 属性。*/
p#myid {background-color: blue;}
p.myclass {background-color: gray;}
p {background-color: red !important;}

注：使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了。

使用建议：

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important

如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。比如我们要让网站上所有按钮的样式都一样。

CSS3 边框

border-radius

border-radius: 1-4 length | % / 1-4 length | %;
/*
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
*/
/*左上角25px，右上角20px，右下角15px，左下角10px*/
border-radius:25px 20px 15px 10px;
/*左上角25px，右上角20px，右下角15px，左下角20px*/
border-radius:25px 20px 15px;
/*左上角25px，右上角20px，右下角25px，左下角20px*/
border-radius:25px 20px;
/*左上角25px，右上角25px，右下角25px，左下角25px*/
border-radius:25px;
/*
斜线前的是水平半径，斜线后的是垂直半径
左上角2em 0.5em ，右上角1em 3em，右下角4em 0.5em，左下角1em 3em
*/
border-radius: 2em 1em 4em / 0.5em 3em;

/*给div元素添加圆角的边框*/
div {
    border:2px solid;
    border-radius:25px;
}

box-shadow

box-shadow属性可以设置一个或多个下拉阴影的框。

box-shadow: h-shadow v-shadow blur spread color inset;

/*多个阴影,该属性是由逗号分隔的阴影列表*/
box-shadow: h-shadow v-shadow blur spread color inset,h-shadow v-shadow blur spread color inset,……;

box-shadow: 10px 10px 5px 5px #888888 inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。将外部阴影 (outset) 改为内部阴影

也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

/* Make the image fit the box */
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    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;
}
</style>
</head>
<body>

<div id="boxshadow">
  <img src="rock600x400.jpg" alt="Norway" width="600" height="400">
</div>

</body>

border-image

设置边框图片

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

border-image: source slice /width /outset repeat;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复(repeat)、拉伸(stretch)、铺满(round)或、有间隔铺满(space)

div#borderimg { 
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

关于border-image更多可参照来自凹凸实验室的border-image 的正确用法。

CSS3 背景

background-image

CSS3 允许你在元素上添加多个背景图像。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-image: url1,url2,url3,……

body
{ 
   	background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    /*
    或
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    */
}

background-size

background-size属性指定背景图片大小。

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

body
{
	background:url(/try/demo_source/img_flwr.gif);
	background-size:80px 60px;
	background-repeat:no-repeat;
}

background-origin

background-origin属性指定background-position属性应该是相对位置。

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。

值	描述
padding-box	背景图像填充框的相对位置，默认值
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

background-clip

background-clip属性指定背景绘制区域。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在填充方框内（剪切成填充方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

CSS3 渐变

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

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

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

渐变在线工具

CSS3 线性渐变

background-image: linear-gradient(direction|angle, color-stop1, color-stop2, ...);

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要至少指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

使用方向：to bottom、to top、to right、to left、to bottom right、to bottom left、to top left、to top right。

使用角度：

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

css 不均匀渐变百分比的学习。百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

/*
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
*/
background: linear-gradient(red 10%, green 85%, blue 90%)

CSS3 径向渐变

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

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

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角;closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值。top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

background-image: radial-gradient(circle farthest-side at 60% 55%, blue, green, yellow, black);

透明度渐变

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

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

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

rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。

重复的线性渐变

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

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

重复的径向渐变

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

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

CSS3 文本效果

text-shadow

text-shadow 属性应用于阴影文本。

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

text-shadow:0 0 3px #FF0000;

text-overflow

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（只在 Firefox 浏览器下有效)）。

值	描述
clip	剪切文本。
ellipsis	显示省略符号 ... 来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。
initial	设置为属性默认值。阅读关于 initial
inherit	从父元素继承该属性值。阅读关于 inherit

text-overflow 需要配合以下两个属性使用：

white-space: nowrap;
overflow: hidden;

text-overflow: clip|ellipsis|string|initial|inherit;

word-wrap

word-wrap属性允许对长的不可分割的单词进行分割并换行到下一行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

/*
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
*/
p.test {
	width:11em; 
	border:1px solid #000000;
	word-wrap:break-word;
}

word-break

word-break属性指定非CJK脚本的断行规则。

提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

word-break: normal|break-all|keep-all;

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

CSS3 字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

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

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

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。下表列出了所有的字体描述和里面的@font-face规则定义：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal/italic/oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal/bold/100/200/300/400/500/600/700/800/900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}

CSS3 2D转换

转换属性

transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

transform-origin 属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

transform-origin: x-axis y-axis z-axis;

注意： 使用此属性必须先使用 transform 属性。

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left/center/right/length/%
y-axis	定义视图被置于 Y 轴的何处。可能的值：top/center/bottom/length/%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

matrix详解

/*从左边元素移动50个像素，并从顶部移动100像素*/
div {
	-ms-transform: translate(50px,100px); /* IE 9 */
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */
    transform: translate(50px,100px);
}

/*顺时针旋转30度*/
div {
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
    transform: rotate(30deg);
}	

/*宽度为原来的大小的2倍，和其原始大小3倍的高度*/
div {
    -ms-transform:scale(2,3); /* IE 9 */
	-webkit-transform: scale(2,3); /* Safari */
	transform: scale(2,3); /* 标准语法 */
}

/*在X轴倾斜30度,在Y轴上20度*/
div
{
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
    transform: skew(30deg,20deg);
}

/*旋转div元素30度*/
div
{
	-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 */
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

CSS3 3D转换

转换属性

tansform、tansform-orgin
transform-style 属性指定嵌套元素是怎样在三维空间中呈现。

值	描述
flat	表示所有子元素在2D平面呈现。默认值
preserve-3d	表示所有子元素在3D空间中呈现。

/*让转换的子元素保留3D转换*/
div {
    -webkit-transform: rotateY(60deg); /* Safari and Chrome */
    -webkit-transform-style: preserve-3d; /* Safari and Chrome */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

perspective 规定 3D 元素的透视效果。

perspective: number|none;

/*设置从何处查看一个元素的角度*/
div
{
    -webkit-perspective: 500px; /* Safari and Chrome */
     perspective: 500px;
}

perspective-origin 规定 3D 元素的底部位置。

perspective-origin: x-axis y-axis;

div {
    -webkit-perspective:150; /* Safari and Chrome */
    -webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
    perspective:150;
    perspective-origin: 10% 10%;
}

backface-visibility 定义元素在不面对屏幕时是否可见。

值	描述
visible	背面是可见的。
hidden	背面是不可见的。

div
{
    -webkit-backface-visibility:hidden; /* Chrome 、Safari */
    -moz-backface-visibility:hidden; /* Firefox */
    -ms-backface-visibility:hidden; /* Internet Explorer */
    backface-visibility:hidden;
}

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition

transition 属性设置元素样式的过渡效果，是以下四个属性的简写：

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
**transition-timing-function **规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0

transition: property duration timing-function delay; /* 默认值：all 0 ease 0 */

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

transition-property

transition-property: none|all| property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-duration: time;

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

transition-timing-function

transition-timing-function属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在立方贝塞尔曲线函数函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay

transition-delay 属性指定何时将开始切换效果。

transition-delay值是指以秒为单位（S）或毫秒（ms），默认值是0。

transition-delay: time;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width: 100px;
	height: 100px;
	background: red;
	-webkit-transition: width 2s ease 2s, height 3s ease 2s; /* Safari */
	transition: width 2s ease, height 3s ease 2s;
}

div:hover
{
	width: 300px;
	height: 300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

CSS3 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

@keyframes 规则是创建动画，创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值：0-100% 、from (和0%相同)、 to (和100%相同)。注意：您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

animation

animation所有动画属性的简写属性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
    -webkit-animation: mymove 5s linear 2s infinite alternate;/* Safari 与 Chrome: */
    animation: mymove 5s linear 2s infinite alternate;
}

@keyframes mymove
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

animation-name

animation-name 属性为 @keyframes 动画指定名称。

animation-name: keyframename|none;

值	说明
keyframename	指定要绑定到选择器的关键帧的名称
none	指定有没有动画（可用于覆盖从级联的动画）

animation-duration

animation-duration属性定义动画完成一个周期需要多少秒或毫秒。

animation-duration: time;

animation-timing-function

animation-timing-function指定动画将如何完成一个周期。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|
							cubic-bezier(n,n,n,n)|steps(int,start|end);

animation-delay

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-iteration-count

animation-iteration-count属性定义动画应该播放多少次。

值	描述
n	一个数字，定义应该播放多少次动画。默认值1
infinite	指定动画应该播放无限次（永远）

animation-direction

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用。

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

/*把物体动画地从一个地方移动到另一个地方，并让它停留在那里*/
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
animation-fill-mode:forwards;

animation-play-state

animation--play-state属性指定动画是否正在运行或已暂停。

注意：在 JavaScript 中使用此属性在一个周期中暂停动画。

animation-play-state: paused|running;

CSS3 多列

column-count

column-count 属性指定了需要分割的列数。

值	说明
number	列的最佳数目将其中的元素的内容无法流出
auto	列数将取决于其他属性，例如："column-width"

column-gap

column-gap 属性指定了列与列间的间隙。

column-gap: length|normal;

column-rule-style

column-rule-style 属性指定了列与列间的边框样式。

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

column-rule-width

column-rule-width 属性指定了两列的边框厚度。

值	说明
thin	指定一个细边框的规则
medium	定义一个中等边框规则
thick	指定一个粗边框的规则
length	指定宽度的规则

column-rule-color

column-rule-color 属性指定了两列的边框颜色。

column-rule

column-rule 属性是 column-rule-* 所有属性的简写。column-rule属性设置列之间的宽度，样式和颜色。

/* column-rule: column-rule-width column-rule-style column-rule-color; */

div.newspaper { 
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;

	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:40px;

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

column-width

column-width属性指定列的宽度。

值	描述
auto	浏览器将决定列的宽度
length	指定列宽的长度

div {
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari and Chrome */
    column-width:100px;
}

column-span

column-span属性指定某个元素应该跨越多少列。

值	描述
1	元素应跨越一列
all	该元素应该跨越所有列

h2 {
	-webkit-column-span:all; /* Safari and Chrome */
    column-span:all;
}

columns

columns 是 column-width 与 column-count 的简写属性。

/*columns: column-width column-count;
默认值：auto auto*/
div {
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
    /*
   	当每列宽度大于 100px 时，就以 3 列分割显示；当浏览器宽度缩小，导致在 3 列情况下无法满足每列大于 100px，就开始转为 2 	列；当浏览器再缩小，2 列中每列无法再保持 100px 每列时，再次转为 1 列...

	以此类推，"100px" 为每列不可低于的宽值，"3" 表示指定要显示的列。相对于单独设置 column-width 或 column-count，		columns 要更加灵活。
    */
    columns:100px 3;
}

CSS3 用户界面

resize

resize属性指定一个元素是否是由用户调整大小的。效果类似 <textarea></textarea> 文本域标签。

resize: none|both|horizontal|vertical:

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

outline-offset

outline-offset属性设置轮廓框架在 border 边缘外的偏移。

outline-offset: length|inherit:

box-sizing

box-sizing 属性规定容器元素的最终尺寸计算方式，主要设置是否需要加上内边距(padding)和边框等。

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

/* 设置通用的 box-sizing */
* {
  box-sizing: border-box;
}

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

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

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

CSS3 图片

filter(滤镜)

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意:

滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
可以使用多个滤镜，每个滤镜使用空格分隔。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：`filter: url(svg-url#element-id)`
initial	设置属性为默认值，可参阅： CSS initial 关键字
inherit	从父元素继承该属性，可参阅：CSS inherit 关键字

img {
    -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    filter: contrast(200%) brightness(150%);
}

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

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

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

Flex container && Flex item

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>
</html>

justify-content

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-evenly | space-around;

值	描述
flex-start	默认值。从行首起始位置开始排列
flex-end	从行尾位置开始排列
center	居中排列（如果剩余的*空间是负的，则弹性项目将在两个方向上同时溢出）
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点（如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start）
space-evenly	均匀排列每个元素，每个元素之间的间隔相等
space-around	均匀排列每个元素，每个元素周围分配相同的空间（如果剩余空间为负或者只有一个弹性项，则该值等同于center）

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

align-items

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

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

align-items: flex-start | flex-end | center | baseline | stretch

值	描述
stretch	默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
center	元素位于容器的中心。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。
baseline	元素位于容器的基线上。如果弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

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

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。

flex-flow: flex-direction flex-wrap|initial|inherit;

/* 默认值：flex-flow: row nowrap */

flex-direction

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

flex-direction: row | row-reverse | column | column-reverse;

值	描述
row	横向从左到右排列（左对齐），默认的排列方式
row-reverse	反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面

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

flex-wrap

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

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    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	默认。各行将会伸展以占用剩余的空间。
center	各行向弹性盒容器的中间位置堆叠。
flex-start	各行向弹性盒容器的起始位置堆叠。
flex-end	各行向弹性盒容器的结束位置堆叠。
space-between	各行在弹性盒容器中平均分布。
space-around	各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

.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

order 属性设置或检索弹性盒模型对象的子元素出现的順序。

注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。

order: number;

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

/*
<div class="flex-item first">flex item 2</div>
*/
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

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

对齐 margin

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。

所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>

</body>
</html>

块元素垂直居中问题采用 flex 解决。

行内元素垂直居中问题解决如下：

1）单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2）多行

设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。align-self 属性可重写灵活容器的 align-items 属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch	元素被拉伸以适应容器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.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;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>

</body>
</html>

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

div {display: flex;}
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#content {
  display: flex;
  width: 500px;
}
 
#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}
 
.box { 
  flex-shrink: 1;
}
 
.box1 { 
  flex-shrink: 2; 
}
</style>
</head>
<body>
 
<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>

例子解析：flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 根据收缩因子消化。

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

A 被移除溢出量：100*(1/7)，即约等于14px
B 被移除溢出量：100*(1/7)，即约等于14px
C 被移除溢出量：100*(1/7)，即约等于14px
D 被移除溢出量：100*(2/7)，即约等于28px
E 被移除溢出量：100*(2/7)，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

flex-basis

flex-basis 属性用于设置或检索弹性盒伸缩基准值。

flex-basis: number|auto|initial|inherit;

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

CSS3 多媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media not|only mediatype and (media feature) {
    CSS-Code;
}

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only: 用来定某种特别的媒体类型。

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。返回 true，文档会在匹配的设备上显示指定样式效果。

/* 当浏览器的宽度在520到699px或者宽度大于1151px,改变背景颜色为红色 */
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    div.example {background: red;}
}

可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="not|only mediatype and (media feature)" href="mystylesheet.css">

媒体类型 mediatype

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

媒体功能 media feature

值	描述
width	定义输出设备中的页面可见区域宽度。
min-width	定义输出设备中的页面最小可见区域宽度。
max-width	定义输出设备中的页面最大可见区域宽度。
height	定义输出设备中的页面可见区域高度。
min-height	定义输出设备中的页面最小可见区域高度。
max-height	定义输出设备中的页面最大可见区域高度。
device-width	定义输出设备的屏幕可见宽度。
height	定义输出设备中的页面可见区域高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
device-height	定义输出设备的屏幕可见高度。
min-device-height	定义输出设备的屏幕的最小可见高度。
max-device-height	定义输出设备的屏幕可见的最大高度。
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
max-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最大比率。
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
min-color	定义输出设备每一组彩色原件的最小个数。
max-color	定义输出设备每一组彩色原件的最大个数。
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
min-resolution	定义设备的最小分辨率。
max-resolution	定义设备的最大分辨率。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
scan	定义电视类设备的扫描工序。

/*
<h2>响应式判断</h2>
<p class="example">操作浏览器窗口，查看效果。</p>
*/
.example {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

注意：为元素设置css样式的属性，假如与媒体查询中设置的媒体样式是相同的属性时。那么需要注意，元素的css样式要写在媒体查询上面，否则css样式会覆盖媒体样式，使其失效。

CSS 网格布局

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

CSS 网格容器

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

使用 display: grid; 来设置网格容器的块级元素。
使用 display: inline-grid; 来设置内联的网格容器。

grid-template-columns

grid-template-columns 属性用于设置网格布局中的列数及宽度。属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

值	描述
none	默认值，不指定列的大小。
auto	列的大小由容器的大小和列中网格元素内容的大小决定。
max-content	每列的大小设置为该列中最大网格元素的大小。
min-content	每列的大小设置为该列中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。
initial	将此属性设置为默认值。阅读关于 initial
inherit	从父元素继承该属性。阅读关于 inherit

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

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

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

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px; /* 声明4列并且指定了列的宽度 */
}

网格引入了 fr 单位来帮助我们创建灵活的网格轨道（一个网格轨道就是网格中任意两条线之间的空间）。一个 fr 单位代表网格容器中可用空间的一等份。

.grid-container {
  display: grid;
  /*定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩*/
  grid-template-columns: 1fr 1fr 1fr;
}

grid-template-rows

grid-template-rows 属性用于设置网格布局中的行数及高度。这些值是一个以空格分隔的列表，其中每个值指定相应行的高度。

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

grid-template-areas

grid-template-areas 属性用于设置网格布局。

grid-area 属性可以对网格元素进行命名。

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

每行由单引号内 ' ' 定义，以空格分隔。

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

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
 
.grid-container {
    display: grid;
  	grid-template-areas:
    	'header header header header header header'
    	'menu main main main right right'
    	'menu footer footer footer footer footer';
}

justify-content

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

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

justify-content: start|end|center|space-between|spance-evenly|space-around|initial|inherit;

.grid-container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /* 设置网格宽度小于容器宽度 */
}

align-content

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

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

align-content: start|end|center|space-between|space-evenly|space-around;

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

gap

gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。

gap: row-gap column-gap;

/*设置行间距为 50px，列间距为 50px*/
.grid-container {
  gap: 50px;
}
/*设置行间距为 20px，列间距为 50px*/
.grid-container {
  gap: 20px 50px;
}

row-gap

row-gap 的属性指定的行之间的间隙大小。

row-gap: length|normal|initial|inherit;

值	描述
length	一个指定的长度，将设置行之间的差距
normal	默认值。指定行之间的正常间隙
initial	将此属性设置为其默认值。阅读关于 initial
inherit	从其父元素继承此属性。阅读关于 inherit

column-gap

column-gap 的属性指定的列之间的间隙。

column-gap: length|normal;

grid-auto-flow

grid-auto-flow 属性指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

grid-auto-flow: row|column|dense|row dense|column dense;

值	描述
row	默认值。通过填充每一行来放置网格元素，在必要时增加新列。
column	通过填充每一列来放置网格元素，在必要时增加新列。
dense	该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
row dense	按行来填充网格中前面留下的空白
column dense	按列来填充网格中前面留下的空白

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.item3 { grid-column: auto / span 2; }

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<p>"item3" 跨越两列, 哪个元素填充前面的空白?</p>
<h2>grid-auto-flow: column dense</h2>
<div class="grid-container" style="grid-auto-flow:column dense;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<h2>grid-auto-flow: row dense</h2>
<div class="grid-container" style="grid-auto-flow: row dense;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

</body>
</html>

grid-auto-rows

grid-auto-rows 属性用于设置网格容器中行的默认大小。

此属性仅影响未设置大小的行。

grid-auto-rows: auto|max-content|min-content|length;

描述
auto	默认值。列的大小由容器的大小决定
max-content	根据列中最大的网格元素设置每列的大小
min-content	根据列中的最小的网格元素设置每列的大小
length	使用自定义的长度值设置列的大小。阅读关于长度单位内容

grid-auto-columns

grid-auto-columns 属性用于设置网格容器中列的默认大小。

此属性仅影响未设置大小的列。

grid-auto-columns: auto|max-content|min-content|length;

值	描述
auto	默认值。列的大小由容器的大小决定
fit-content()	相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))
max-content	根据列中最大的网格元素设置每列的大小
min-content	根据列中的最小的网格元素设置每列的大小
minmax(min.max)	设置大于等于 min 且小于等于 max
length	使用自定义的长度值设置列的大小。阅读关于长度单位内容
%	使用百分比值设置列的大小

grid-template

grid-template 属性用于网格布局，设置网格中行、列与分区。

grid-template 是以下属性的简写形式：

grid-template-rows
grid-template-columns
grid-template-areas

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

/*制作一个三列网格布局，其中第一行高 150 像素*/
.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

grid

grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：

显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
间距属性： grid-column-gap 和 grid-row-gap。

CSS 网格元素

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

网格线

列与列，行与行之间的交接处就是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

grid-column

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

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

grid-column: grid-column-start / grid-column-end;

/* 设置 "item1" 在第 1 列开始，在第 5 列前结束 */
.item1 {
  grid-column: 1 / 5;
}
/* 设置 "item1" 在第 1 列开始，跨越 3 列*/
.item1 {
  grid-column: 1 / span 3;
}

grid-column-start

grid-column-start 属性定义了网格元素从哪一列开始。

grid-column-start: auto|span n|column-line;

值	描述
auto	默认值，网格元素按流设置。
span n	指定网格元素将跨越的列数。
column-line	指定从哪个列上开始显示网格元素。

grid-column-end

grid-column-end 属性定义了网格元素跨越多少列，或者在哪一列结束。

grid-column-end: auto|span n|column-line;

grid-row

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

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

grid-row: grid-row-start / grid-row-end;

grid-row-start

grid-row-start 属性指定哪一行开始显示网格元素。

grid-row-start: auto|row-line|span n;

grid-row-end

grid-row-end 属性指定哪一行停止显示网格元素，或设置跨越多少行。

grid-row-end: auto|row-line|span n;

grid-area

grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。

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

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

/*item1 命名为 "myArea", 并跨越2列*/
.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

响应式网格布局

使用媒体查询，重新排列在指定屏幕尺寸下的顺序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@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; }
}
</style>
</head>
<body>

<h1>不同设备上不同布局</h1>

<p>重置浏览器大小，查看效果。</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

码农公寓

CSS 介绍

CSS 语法

CSS 选择器

id 选择器

class 选择器

CSS 分组和嵌套

分组选择器

嵌套选择器

CSS 组合选择符

CSS 属性选择器

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别:

表单样式

CSS 背景(background)

CSS Text

CSS Fonts

CSS 链接

CSS 列表

CSS 表格

CSS 盒子模型

CSS 边框(border)

CSS 轮廓(outline)

CSS 外边距(magin)

CSS 填充(padding)

CSS 尺寸 (dimension)

CSS 显示(display)与可见性(visibility）

隐藏元素 - display:none或visibility:hidden

内联元素<——>块元素

visibility: collapse

CSS 定位(position)

CSS 溢出(overflow)

CSS 浮动(float)

CSS 对齐

CSS 伪类/伪类

:link/:visted/:hover/:active

:before/:after

:first-child/:last-child/:nth-child/:root/:target/:not/:empty

:first-line/:first-letter

涉及表单元素的伪类

:lang

CSS 透明度(opacity)

CSS 计数器

CSS 光标类型(cursor)

CSS 媒体类型

CSS !important规则

CSS3 边框

border-radius

box-shadow

border-image

CSS3 背景

background-image

background-size

background-origin

background-clip

CSS3 渐变

CSS3 线性渐变

CSS3 径向渐变

透明度渐变

重复的线性渐变

重复的径向渐变

CSS3 文本效果

text-shadow

text-overflow

word-wrap

word-break

CSS3 字体

CSS3 2D转换

转换属性

2D 转换方法

CSS3 3D转换

转换属性

3D 转换方法

CSS3 过渡

transition

transition-property

transition-duration

transition-timing-function

transition-delay

CSS3 动画

animation