CSS基础知识

CSS

css层叠样式表：能够对网页中的元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力，简单来说美化页面

css的三种引入方式

1. 行内式：通过元素的style的属性，“样式名：样式值”缺点：代码复用度低，不利于维护，css样式代码和html结构代码交织在一起，影响阅读
2. 内嵌式：通过head标签中的style标签写本页面的css代码，通过选择器确定样式的作用元素
3. 外部样式表：将css代码单独放到一个.css文件中，哪个html需要这些代码，就通过head中的link

link有两个属性：

1. href：引入css的路径
2. rel：一般是固定值stylesheet

css的选择器

元素选择器：标签名{}

缺点：某些同名的元素不希望使用某些样式，某些不同名的元素希望使用某些样式，都无法协调

id选择器：#id值{}，根据元素的id值来确定作用元素，id值具有唯一性

缺点：id值具有唯一性，代码复用性低

class选择器：.class{}，根据元素的class值来确定作用元素

元素的class值可以重复，而且一个元素可以有多个class值

背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

背景颜色

background-color属性定义了背景的颜色

整个页面的背景颜色使用在body的选择器中

body{
background-color:#b0c4de;  
}

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body{
  background-image:url();
}

背景图像-水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

body{
 background-image:url();
  background-repeat:repeat-x;
}

背景图像-设置定位与不平铺

背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置

body{
  background-image:url();
  background-repeat:no-repeat;
  background-position:right top;  
}

背景图像-滚动

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

背景-简写属性

当使用简写属性时，属性值的顺序为：:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

body{
  background:#ffffff url() no-repeat right top;
}

文本

文本颜色

颜色属性被用来设置文字的颜色。

body{
  color:red
}

文本对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐

body{
  text-align:center
  text-align:right
  text-align:justify
}

文本修饰

text-decoration:用来设置或删除文本的装饰

从设计的角度看主要是用来删除链接的下划线

a{
  text-decoration:none;
}

文本转换

text--transform：文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写

p.uppercase{
  text-transform:uppercase;
  text-transform:lowercase;
  text-transform:capitalize;
<!--captialize是将字符串的首字母大写-->
}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p{
  text-indent:50px;
}

字体

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

字体系列

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

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

p{
  font-family:'微软雅黑','宋体','隶书'
}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

• 正常 - 正常显示文本
• 斜体 - 以斜体字显示的文字
• 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持

p.normal{
  text-style:normal;
}
p.italic{
  font-style:italic;
}
p.oblique{
  font-style:oblique;
}

字体大小

font-size 属性设置文本的大小。

p{
  font-size:14px;
}

用em来设置字体大小

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

使用百分比和EM组合

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS链接

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

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

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

• a:hover必须跟在a:link和a:visited后面
• a:active必须跟在a:hover后面

css列表

CSS 列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性

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

移除默认设置

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

CSS表格

表格边框

指定CSS表格边框，使用border属性。

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

表格是有双边框的，因为th和td元素有独立的边界

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

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table{
  border-collapse:collapse;

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

表格的宽度和高度

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

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

表格文字对齐

text-align属性设置水平对齐方式，向左，右，或中心：

td
{
    text-align:right;
}

vertical-align:可以设置文字垂直对齐

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

表格填充

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：

td
{
    padding:15px;
}

表格颜色

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

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

盒子模型

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

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

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

• Margin：清除边框外的区域，外边框是透明的
• Border：围绕在内边距和内容外的边框
• Padding：清楚内容周围的区域
• Content：盒子的内容

元素的高度和宽度

当指定了一个CSS元素的宽度和高度时，需要设置宽度和高度，内边距，边框，外边距

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

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

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

CSS边框

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

边框样式

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

div{
  border-style:none;//默认无边框
  border-style:solid;//定义一个实线边框
  border-style:dashed//定义一个虚线边框
  
}

边框宽度

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

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

thick、medium、thin没有固定值，随着用户的设置而改变

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

边框颜色

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

还可以使用transparent来设置边框的颜色

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}

边框-单独设置各边

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

border-style：上、右、下、左；

border-style：上，左右，下；

border-style：上下，左右；

顺序对于border-width，border-color同样适用

边框-简写属性

border:5px solid red;

• border-width
• border-style (required)
• border-color

边框轮廓

轮廓位于边框的外面，可起到突出元素的作用

轮廓属性指定元素轮廓的样式，颜色和宽度

用法和边框一样可以设置轮廓的颜色，样式，宽度

CSS外边距

margin定义元素周围的区域

外边距没有背景颜色，只能设置边距

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin ：上、右、下、左

margin：上、右左、下

margin：上下，右左

margin：上下左右

margin:100px 50px;
//上下外边距是100px，左右外边距是50px

CSS内边距

CSS padding是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

简写属性

padding:25px 50px;
//上下的内边距是25px，左右的内边距是50px

padding：上、右、下、左

padding：上、右左、下

padding：上下、左右

padding：上下左右

分组选择器和嵌套选择器

分组选择器

当样式表中有很多相同样式的元素时，为了尽量减少代码可以使用分组选择器

每个选择器之间用逗号分隔

h1,h2,p
{
    color:green;
}

嵌套选择器

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

• p{}：为所有p元素指定一个样式
• .marked{}：为所有class='marked'的元素指定样式
• .marked p{}：为所有class='marked'元素内的p元素指定样式
• p.marked{}：为所有class='marked'的p元素指定样式

CSS显示

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

隐藏元素

display：none或visibility：hidden

隐藏一个元素可以通过display：none或者visibility：hidden，但是这两种隐藏方式会产生不同的结果

visibility：hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，内容虽然隐藏了但仍占用空间

h1.hidden {visibility:hidden;}

display：none可以隐藏元素，且隐藏的元素不会占用空间，也就是说，该元素内容不仅隐藏了，而且该元素原本占用的空间也被隐藏了

h1.hidden {display:none;}

Display-块和内联元素

块元素前后都是换行符，占用了全部宽度，

内联元素，只需要必要的宽度，不强制换行

将块元素改变成内联元素

li {display:inline;}

将内联元素改变成块元素

span {display:block;}

CSS定位

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

static定位

HTML的默认定位，即没有定位，遵循正常的文档流对象

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed定位

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的他也不会移动

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠

relative定位

相对定位元素是相对其正常位置定位的，移动相对定位元素，但它原本所占的空间不会改变

相对定位元素经常被用来作为绝对定位元素的容器块。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

absolute定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky定位

基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

CSS Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

• 当属性值为visible时：默认值，内容不会被修剪，会呈现在元素框外
• 当属性值为hidden时：内容会被修剪，并且其余内容是不可见的
• 当属性值为scroll时：内容会被修剪，并且其余内容浏览器用滚动条进行显示
• 当属性值为auto时：如果内容被修剪，则浏览器用滚动条进行显示
• 当属性值为inherit时：规定应该从父元素继承overflow的值

overflow只能用于指定高度的块元素中

CSS浮动

CSS 的 Float，会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

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

img
{
    float:right;
}

清除浮动-clear

元素浮动之后，周围元素会重新排列，为了避免这种情况，使用clear属性

clear属性指定元素两侧不能出现浮动元素

.text_line
{
    clear:both;
}

CSS对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用text-align：center

.center{
  text-align:center;
  border:3px,solid,green;
}

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐-使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

绝对定位的元素会被从正常流中删除，并且能够折叠元素

左右对齐- 使用float方式

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

当子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以用clearfix来清除浮动

.clearfix {
    overflow: auto;
}

垂直居中对齐-使用padding

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

水平垂直都居中对齐可以用padding和text-align:center

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

垂直居中对齐-line-height

当line-height和height相等的时候，会自动垂直居中对齐

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

垂直居中对齐-使用position和transform

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

CSS组合选择符

后代选择器

后代选择器用于选取某元素的后代元素

后代选择器，两个选择器之间用 分隔

选择了div标签下的所有子元素p

div p{
  bakcground:yellow;
}

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素的直接子元素

选择了div元素下的所有直接子元素p

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

相邻兄弟选择器可以选择紧邻在另一元素后的元素，且二者有相同的父元素

选择了div元素后的第一个p元素

div+p{
  background-color:yellow;
}

后续兄弟选择器

后续兄弟选择器选取了所有指定元素之后的相邻兄弟元素

选择了所有div元素之后的所有相邻兄弟元素p

div~p{
  background-color:yellow;
}

CSS伪类

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

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

a:active 必须被置于 a:hover 之后，才是有效的。

first-child伪类

使用 :first-child 伪类来选择父元素的第一个子元素。

匹配第一个p元素

p:first-child{
  color:blue;
}

匹配所有p元素的第一个i元素

p>i:first-child{
  color:blue;
}

匹配第一个p元素的所有i元素

p:first-child i{
  color:blue;
}

CSS伪元素

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

first-line

first-line伪元素用于向文本的首行设置特殊样式

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

first-line只作用于块级元素

first-letter

first-letter可以向首字母进行设置特殊样式

p:first-letter{
  color:#ff0000;
  font-size:14px;
}

伪元素可以结合css类

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

:before伪元素

before伪元素可以在元素的内容前面插入新内容

h1:before 
{
    content:url(smiley.gif);
}

:after伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

h1:after
{
    content:url(smiley.gif);
}	

图片透明

CSS中属性的透明度是opacity

Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

CSS媒体类型

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

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

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

CSS属性选择器

具有特定属性的HTML元素样式不仅仅是class和id

属性选择器

把包含title的所有元素变成蓝色

[title]{
color:blue;
}

属性和值选择器

把包含title='runoob'属性的元素改变样式

[title='runoob']{
  border:5px,solid,green;
}

属性和值的选择器-多值

把title中包含hello的所有元素改变样式

[title~=hello]{color:blue;}

把lang属性中包含en的所有元素改变样式

[lang|=en]{color:blue;}

CSS计数器

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

使用计数器进行自动编号

CSS 计数器根据规则来递增变量。

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

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

要使用 CSS 计数器，得先用 counter-reset 创建

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

嵌套计数器

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

计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:

CSS3

CSS3边框

在css3中可以创建圆角边框，添加阴影框

圆角边框

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

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

盒阴影

css3中box-shadow属性被用来添加阴影

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

边界图片

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

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 */
	}

CSS3背景

background-image属性

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

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

backgroud-size属性

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

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

伸展背景图像完全填充内容区域

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

background-origin属性

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

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

属性有三个值：content-box，padding-box，bordr-box

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

background-clip属性

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

background-clip属性有三个值：content-box，padding-box，border-box

CSS3渐变

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

CSS3中定义了两种渐变

• 线性渐变(linear gradients)：向下/向上/向右/向左/对角方向
• 径向渐变(Radial gradients)：由他们中心定义

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

使用透明度（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%);
}

径向渐变

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

设置形状

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

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

重复的径向渐变

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

CSS3 2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

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

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()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

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

scale()方法

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

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

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

skew()方法

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

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()方法

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

CSS3 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

rotateX()方法

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

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

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

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

CSS过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

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

简写属性

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

• transition-property:规定应用过滤的css属性的名称
• transition-duration：规定过滤效果花费的时间
• transition-timing-function：规定过滤的时间曲线
• transiton-delay：规定过滤效果何时开始

CSS3 动画

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

CSS3中的@keyframes规则

要创建CSS3动画，就需要了解@keyframes规则

• @keyframes规则就是创建动画
• @keyframes规则内指定一个css样式和动画将逐步从目前样式更换到新样式

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

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

指定至少两个css3的动画属性绑定到一个选择器

• 绑定动画的名字
• 绑定动画的时长

div
{
    animation: myfirst 5s;
}

简写属性

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

1. 第一个属性值是animation-name（动画名称）
2. 第二个属性值是animation-duration（动画时长）
3. 第三个属性值是animation-timing-function（动画的速度曲线）
4. 第四个属性值是animation-delay（动画何时开始）
5. 第五个属性值是animation-iteration-count（动画播放次数）
6. 第六个属性值是animation-direction（动画是否在下一周期逆向播放

CSS3多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

• column-count：指定了需要分割的列数、
• column-gap：指定了列与列间的间隙
• column-rule-style:指定了列与列之间的边框样式
• column-rule-width：指定了两列的边框厚度
• column-rule-color：指定了两列的边框颜色
• column-rule：指定了两列的厚度 样式 颜色
• column-span：指定元素跨多少列
• column-width：指定列的宽度

CSS3调整尺寸

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。

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

div {
    resize:both;
    overflow:auto;
}

CSS3方框大小调整

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

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

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

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

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

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

CSS3外形修饰

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

• 轮廓不占用空间
• 轮廓可能是非矩形

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

CSS3控制hover的速度

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

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
 
.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...

禁用图片

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