html5和css （四布局新增）

布局的H5新增标签(了解)

header
footer
main
aside
article
section
dialog

双标签，没有任何默认样式，跟div一样。 有语义

字体图标

http://fontawesome.dashgame.com/

CSS3新增功能

1 CSS3选择器详解

1.1 基础选择器

通配选择器*
元素选择器E
ID选择器#id
CLASS选择器.class
群组选择器select1,selectN

1.2 层次选择器

后代选择器 E F
子选择器 E>F
相邻兄弟选择器 E+F
通用兄弟选择器 E~F

1.3 属性选择器

selector[attr] 包含指定的属性
selector[attr=value] 指定属性的值
selector[attr^=value] 属性值以value开头
selector[attr$=value] 属性值以value结束
selector[attr*=value] 属性值包含value
selector[][][] 多个属性选择器

E[attr] 选择具有att属性的E元素。
E[attr="val"] 选择具有att属性且属性值等于val的E元素。
E[attr~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
E[attr^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
E[attr$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素。
E[attr*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
E[attr|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

1.4伪类选择器

/*语法*/
selector:伪类 {
   
}

:link     未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素,鼠标滑过元素属性改变 css属性
:actived  激活状态的超链接
有顺序必须按照link,visited ,hover ,actived




:focus    获得焦点时

:first-child   兄弟元素第一个
:last-child    兄弟元素最后一个
:nth-child()    指定数字，也可以指定关键字"odd", "even"
:nth-last-child
:only-child      后代中只有一个孩子的

:fist-of-type
:last-of-type
:nth-of-type()      指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()
:only-of-type()

1.5 伪元素选择器

::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after         最后面追加一个子元素

CSS3 基础

2.1 浏览器私有前缀

-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera

2.2 CSS3 新增的颜色

rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明

2.3 CSS3新增长度单位

2.4CSS3渐变(了解)

线性渐变

语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<angle>：用角度值指定渐变的方向（或角度）。
    to left： 设置渐变为从右到左。相当于: 270deg
    to right：设置渐变从左到右。相当于: 90deg
    to top：  设置渐变从下到上。相当于: 0deg
    to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
    <color>：  指定颜色。
    <length>： 用长度值指定起止色位置。不允许负值
    <percentage>： 用百分比指定起止色位置。

示例

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

径向渐变

语法

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
    <percentage>①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left：设置左边为径向渐变圆心的横坐标值。
    center①：设置中间为径向渐变圆心的横坐标值。
    right：设置右边为径向渐变圆心的横坐标值。
    <percentage>②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top：设置顶部为径向渐变圆心的纵坐标值。
    center②：设置中间为径向渐变圆心的纵坐标值。
    bottom：设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型
    circle：指定圆形的径向渐变
    ellipse：指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size
    closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size
    <length>：用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size
    <length>：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <percentage>：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色：
    <color>：指定颜色。
    <length>：用长度值指定起止色位置。不允许负值
    <percentage>：用百分比指定起止色位置。不允许负值

示例

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);

3 新增的CSS3属性

3.1 边框圆角

border-radius 长度单位
border-top-left-radius
border-top-righ-radius
border-bottom-left-radius
border-bottom-right-radius

border-radius

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。如果只提供一个，将用于全部的于四个角。如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。
border-top-left-radius 设置或检索对象的左上角圆角边框
border-top-right-radius 设置或检索对象的右上角圆角边框
border-bottom-right-radius 设置或检索对象的右下角圆角边框
border-bottom-left-radius 设置或检索对象的左下角圆角边框

3.2 布局相关属性

display: 值很多很多 .... table table-row...
box-sizing: content-box（默认值） / border-box

box-sizing 定义盒子模型的尺寸解析方式
```
>content-box(默认)    
>border-box
```

resize 否允许用户缩放，调节元素尺寸大小

none： 不允许用户调整元素大小。 (默认)
both： 用户可以调节元素的宽度和高度。 
horizontal： 用户可以调节元素的宽度     
vertical： 用户可以调节元素的高度。

display 盒子是否以及如何显示

> none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
> inline： 指定对象为内联元素。 
> block： 指定对象为块元素。 
> list-item： 指定对象为列表项目。 
> inline-block： 指定对象为内联块元素。（CSS2） 
> table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
> inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
> table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
> table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
> table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
> table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
> table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
> table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
> table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
> table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
> run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
> box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
> inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3

3.3 外轮廓

outline:1px solid #ccc
outline-style
outline-color
outline-width

outline 给元素周围绘制一条轮廓线

<' outline-width '> || <' outline-style '> || <' outline-color '>

outline-width 外廓线宽度

：用长度值来定义轮廓的厚度。不允许负值 medium：定义默认宽度的轮廓。 thin：定义比默认宽度细的轮廓。 thick：定义比默认宽度粗的轮廓。
outline-style 外廓线风格

none：无轮廓。与任何指定的 <' outline-width '> 值无关 dotted：点状轮廓。 dashed：虚线轮廓。 solid：实线轮廓 double：双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值 groove： 3D凹槽轮廓。 ridge： 3D凸槽轮廓。 inset： 3D凹边轮廓。 outset： 3D凸边轮廓。
outline-color 外廓线颜色
outline-offset 外廓线的偏移量

3.4 不透明度

opacity: 0~1

opacity 检索或设置对象的不透明度。对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

box-shadow 设置元素的阴影

值: none | [ , ]*
= inset? && {2,4} && ?

取值：

none：无阴影

<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>： 设置对象的阴影的颜色。 
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

可以设定多组效果，每组参数值以逗号分隔

test .outset {
    box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
    box-shadow:
        0 0 5px 3px rgba(255, 0, 0, .6),
        0 0 5px 6px rgba(0, 182, 0, .6),
        0 0 5px 10px rgba(255, 255, 0, .6);
}

box-reflect 倒影（仅webkit 了解）

值: box-reflect：none | ? ?

取值：

direction

above： 指定倒影在对象的上边 
below： 指定倒影在对象的下边 
left： 指定倒影在对象的左边 
right： 指定倒影在对象的右边

offset

<length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 
<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image

none： 无遮罩图像 
<url>： 使用绝对或相对地址指定遮罩图像。 
<linear-gradient>： 使用线性渐变创建遮罩图像。 
<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 
<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。

3.5 CSS3新增背景属性

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color

background-origin 背景图片原点

取值：
padding-box：(默认值) 从padding区域（含padding）开始显示背景图像。 
border-box： 从border区域（含border）开始显示背景图像。 
content-box： 从content区域开始显示背景图像。

backgroun-clip 指定对象的背景图像向外裁剪的区域。

取值：
padding-box： 从padding区域（不含padding）开始向外裁剪背景。 
border-box： (默认值)从border区域（不含border）开始向外裁剪背景。 
content-box： 从content区域开始向外裁剪背景。 
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

background-size 背景图像的尺寸

<length>： 用长度值指定背景图像大小。不允许负值。 
<percentage>： 用百分比指定背景图像大小。不允许负值。 
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

CSS3多背景

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
              url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
           url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

3.6 CSS3变换

transform

translatex() 
translatey()
translate(x, y)
rotate() 角度 deg
skewx()  角度deg
skewy()
skew(x, y)

transform-origin 变换的原点。对translate没有意义。对rotate影响大

3.7 过渡效果

过渡(transition)

过渡相关属性

transition 检索或设置对象变换时的过渡。

注意：

如果只提供一个参数，则为 <' transition-duration '> 的值定义；如果提供二个参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义

用法 transition：[,]* = [ none | ] || || ||

transition-property 设置对象中的参与过渡的属性

默认值为：all。默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。取值
none： 不指定过渡的css属性 
all： 所有可以进行过渡的css属性 
<IDENT>： 指定要进行过渡的css属性 
那些CSS属性可以被过渡
颜色属性
具有长度值 百分比的属性
值是数字的属性 如 z-index  opacity  outline-offset等
变形系列属性
阴影
渐变        

transition-duration 设置对象过渡的持续时间

如果提供多个属性值，以逗号进行分隔。
transition-timing-function 设置对象中过渡的动画类型

取值
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 http://cubic-bezier.com/ steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
transition-delay 设置对象延迟过渡的时间

CSS3触发过渡的条件

伪元素触发
媒体查询
JavaScript触发

3.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

html5和css （四 布局新增）