HTML5学习总结
<html lang="zh-cn"> <meta charset="utf-8">
1 表格元素
table、thead、tbody、tfoot、tr、th、td、col、colgroup、caption
<th><td>均属于单元格，包含两个合并属性：colspan、rowspan 等
--<caption>添加表格标题
<caption>这是一个人物表</caption>
--<colgroup>设置列
<colgroup span="2"style="background:red;">
--<col>更灵活的设置列
<colgroup>
<col>
<col style="background:red;"span="1">
</colgroup>
2 分组元素
p、div、blockquote、pre、hr、ul,ol、li、dl,dt,dd、figure、figcaption
--<blockquote>引用大段他出内容：包含了首尾缩进的功能
--<pre>展现格式化内容：编辑器怎么排版的，原封不动的展现出来
--<ol><li>添加有序列表：ol 元素属性：start、reversed：是否倒序排列、type：1、a、A、i、I
li 元素属性:value:强行设置某个项目的编号。
--<dl><dt><dd>生成说明列表:这三个元素是一个整体，但<dt>:标题或<dd>:说明。并非都必须出现。
--<figure><figcaption>使用插图：这两个元素一般用于图片的布局。
<figure>
<figcaption>这是一张图</figcaption> //标题
<img src="img.png"> //图片
</figure>
3 文档元素
h1~h6、header、footer、nav、section、article、address、aside、hgroup、details、summary
--<header>表示首部：这里部分一般是页面头部，包括：LOGO、标题、导航等内容
--<footer>表示尾部：这里是页面的尾部，一般包括：版权声明、友情链接等内容
--<hgroup>组合标题：
--<section>文档主题：这里一般是存放文档主题内容。
--<nav>添加导航：这里存放文档的导航
--<article>添加一个独立成篇的文档：里面可以包含头、尾、主题等一系列内容
--<aside>生成注释栏：专门为某一段内容进行注释使用。
--<address>表示文档或article 元素的联系信息。
--<details>元素生成详情区域、<summary>元素在其内部生成说明标签：由于大多数主流浏览器尚未支持，暂略
<header>
<hgroup>
<h1>这里是一个大标题</h1>
<h4>这里是一个副标题</h4>
</hgroup>
<nav>这里是一个导航</nav>
这里存放网页的标头部分：LOGO，标题，导航等。
</header>
<section>
这里是文档的主题部分。
</section>
4 嵌入元素
img、map、area、audio、video、iframe、embed、canvas、meter、object、param、progress、source、svg、track
--<img>嵌入图像：src、alt、width、height、ismap<创建服务器端分区响应图>、usemap<关联<map>元素>
--<map>创建分区响应图:
<img src="img.png" alt="风景图"width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="47,33,132,102"href="http://www.baidu.com" target="_blank" alt="百度 方形">
<area shape="circle" coords="232,115,40"href="http://www.soso.com" target="_blank" alt="搜搜 圆形">
<area shape="poly" coords="56,151,177,182,50,217"href="http://www.haosou.com" target="_blank" alt="好搜 多边形">
</map>
--<iframe>嵌入另一个文档:name 表示用于target 的名称
<a href="http://www.baidu.com"target="in">百度</a> | <a href="http://www.haosou.com"target="in">好搜</a>
<br>
<iframesrc="http://www.soso.com" width="800"height="600" name="in"></iframe>
--<embed>嵌入插件内容：
<embedsrc="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf"type="application/x-shockwave-flash" width="800"height="600"></embed>
--<object>和<param>元素
--<progress>显示进度：<progressvalue="30" max="100"></progress>
--<meter>显示范围里的值：
<meter value="90"min="10" max="100" low="40" high="80"
optimum="60"></meter> ----low 表示小于它的值过低，high 表示大于它的值过高，optimum表示最佳值
5 音频和视频
video 视频元素、audio 音频元素
主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm。
主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，
视频编解码器：H.264、VP8、Ogg Theora
--video 视频元素：主流的视频为.webm，.mp4，.ogg 等
<video width="640"height="480" controls>
<sourcesrc="10anzhu.ogg">
</video>
（
属性：src、width、height
--autoplay：设置后，表示立刻开始播放视频
--preload：设置后，表示预先载入视频
--controls：设置后，表示显示播放控件
--loop：设置后，表示反复播放视频
--muted：设置后，表示视频处于静音状态
--poster：指定视频数据载入时显示的图片
）
--预加载设置：preload="...":preload属性有三个值：none 表示播放器什么都不加载；metadata 表示播放
之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。
--使用预览图:poster 属性表示在视频的第一帧，做一张预览图。
<videosrc="http://li.cc/test.webm" width="800"height="600" controls
poster="img.png"></video>
--兼容多个浏览器:通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。
===audio 音频元素:主流的音频格式有：.mp3，.m4a，.ogg，.wav。
（
属性：src、autoplay、preload、controls
）
6 表单元素
form、input、textarea、select、option、optgroup、button、datalist、fieldset、legend、label、output
--<form>定义表单：action、method、name、target
（
属性：
--enctype：表示浏览器对发送给服务器的数据所采用的编码格式。有三
种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）
、text/plain（未规范的编码，不建议使用，不同浏览器理解不同）
--target：_blank、_parent、_self、_top
--autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。默认为on 自动完成，如果不想自动完成则设置off。
--novalidate：设置是否执行客户端数据有效性检查
--<input>表示用户输入数据：
（
属性：
--autofocus：让光标聚焦在某个input 元素上，让用户直接输入
--disabled：禁用input 元素
--autocomplete：单独设置input 元素的自动完成功能
--form：让表单外的元素和指定的表单挂钩提交
--type：input 元素的类型，内容较多
--name：定义input 元素的名称，以便接收到相应的值
）
--聚焦光标：<input name="user"autofocus>
--禁用input：<inputname="user" disabled>
--禁止自动完成：<inputname="user" autocomplete="off">
--表单外的input：<formmethod="get" id="register">
...
</form>
<input name="email"form="register">
--<label>添加说明标签：<p><labelfor="user">用户名：<input id="user"name="user"></label></p>
--<fieldset>对表单进行编组：
（
属性：
--name：给分组定义一个名称
--form：让表单外的分组与表单挂钩
--disabled：禁用分组内的表单
）
---<legend>添加分组说明标签：<legend>元素给分组加上一个标题
<fieldset>
<legend>注册表单</legend>
</fieldset>
--<button>添加按钮：（type：submit、reset、button）
对于type 属性为submit 时，按钮还会提供额外的
（
属性：】
--form：指定按钮关联的表单
--formaction：覆盖form 元素的action 属性
--formenctype：覆盖form 元素的enctype 属性
--formmethod：覆盖form 元素的method 属性
--formtarget：覆盖form 元素的target 属性
--formnovalidate：覆盖form 元素的novalidate属性
）
--表单外关联提交：<button type="submit"form="register">提交</button>
7 input 元素的type 汇总
--type类型:text、password、search、submit、reset、button、number、range、checkbox、radio、image、color、
email、tel、url、date、month、time、week、datetime、datetime-local、hidden、file
==<input type="text">：
（
属性：
--list：指定为文本框提供建议值的datalist元素， 其值为datalist 元素的id 值
--maxlength、
--pattern：用于输入验证的正则表达式
--placeholder：输入字符的提示
--readonly：文本框处于只读状态
--disabled：文本框处于禁用状态
--size：设置文本框宽度--<inputtype="text" size="50">
--value：设置文本框初始值
--required：表明用户必须输入一个值，否则无法通过输入验证：必须输入值
）
==<input type="password">：
（
属性：
--maxlength：设置密码框最大字符长度
--pattern：用于输入验证的正则表达式
--placeholder：输入密码的提示
--readonly：密码框处于只读状态
--disabled：文本框处于禁用状态
--size：设置密码框宽度
--value：设置密码框初始值
--required：表明用户必须输入一个值
）
==type 为number、range 时：
（
属性：
--list：指定为文本框提供建议值的datalist元素， 其值为datalist 元素的id 值
--min：设置可接受的最小值
--max：设定可接受的最大值
--readonly、required、value
--step：指定上下调节值的步长
）
==type 为date 系列时：
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
--目前还是推荐使用jQuery等前端库来实现日历功能。额外属性和number 一致。
==type 为color 时：<inputtype="color">
==type 为checkbox、radio 时：
（
属性：
--checked：设置复选框、单选框是否为勾选状态
--required：表示用户必须勾选，否则无法通过验证
--value：设置复选框、单选框勾选状态时提交的数据。默认为on
）
<input type="checkbox"name="music" checked value="1">
==type 为image 时：
（
属性：
--src、alt、width、height、提交额外属性：formaction、formenctype、formmethod、formtarget和formnovalidate
）
==type 为email、tel、url 时：都应遵循相应的格式。
==type 为hidden 时：生成一个隐藏控件，一般用于表单提交时关联主键ID 提交，而这个数据作为隐藏存在。
<input type="hidden">
==type 为file 时：生成一个文件上传控件，用于文件的上传--<input type="file">
（
属性:
--accept:指定接受的MIME 类型
--required:表明用户必须提供一个值，否则无法通过验证
accept="image/gif, image/jpeg,image/png"
）
==<input type="text"list="abc" required>
<datalist id="abc">
<optionvalue="1">苹果</option>
<optionvalue="2">桔子</option>
<optionvalue="3" label="香蕉">
<optionvalue="菠萝">
</datalist>
8 表单数据验证和其他元素
==其他元素：select、optgroup、option、textarea、output
--生成下拉列表select属性：name、disabled、form：将表单外的下拉列表与某个表单挂钩、size、multiple、autofocus、required
selected
==多行文本框</textarea>：
（
属性：name、readonly、disabled、maxlength、autofocus、rows、cols
--form：将表单外的多行文本框与某个表单挂钩
--placeholder：设置输入时的提示信息
--wrap：设置是否插入换行符，有soft 和hard 两种
--required：设置必须输入值，否则无法通过验证
）
==计算结果：
<form oninput="res.value =num1.valueAsNumber * num2.valueAsNumber">
<input type="number"id="num1"> x <input type="number"id="num2">
<output for="num1 num2"name="res">
</form>
==输入验证：
--必须填写一个值：<inputtype="text" required>
--限定在某一个范围内：<inputtype="number" min="10" max="100">
--使用正则表达式：<input type="text"placeholder="请输入区号+座机" required
pattern="^[\d]{2,4}\-[\d]{6,8}$">
--禁止表单验证：<formaction="http://li.cc" novalidate>
9 全局属性和其他
==实体：HTML 实体就是将有特殊意义的字符通过实体代码显示出来。
（
实体与结果显示：
--<空格 【<】、>【>】、&【&】、"【"】、'【'】、¢【分】、£【£镑】、¥【¥日圆】
--€【€欧元】、§【§小节】、©【©版权】、®【®注册商标】、™【™商标】、×【×乘号】、
--÷【÷除号】
）
==元数据：<meta>元素可以定义文档中的各种元数据，而且一个HTML 页面可以包含多个<meta>元素。
--指定名/值元数据对：
<meta name="author" content="bnbbs">
<meta name="description" content="这是一个HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">
--声明字符编码：<metacharset="utf-8">
--模拟HTTP 标头字段：
==5 秒跳转到指定URL：<metahttp-equiv="refresh" content="5;http://li.cc">
==另一种声明字符编码：<metahttp-equiv="content-type" content="text/htmlcharset=utf-8">
==全局属性：id、class、hidden
--accesskey 属性：快捷键操作，windows 下alt+指定键，前提是浏览器alt并不冲突。
<input type="text"name="user" accesskey="n">
--contenteditable 属性：让文本处于可编辑状态，设置true 则可以编辑，false 则不可编辑。或者直接设置属性。
<p contenteditable="true">我可以修改吗</p>
--dir 属性：让文本从左到右（ltr），还是从右到左（rtl）--<pdir="rtl">文字到右边了</p>
--lang 属性：可以局部设置语言。<plang="en">HTML5</p>
--title 属性：对元素的内容进行额外的提示。
--tabindex 属性：表单中按下tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。
--style 属性：设置元素行内CSS 样式
10 CSS入门
--创建CSS 样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。
==文档内嵌样式：<styletype="text/css"></style>
==外部引用样式：<linkrel="stylesheet" type="text/css"href="style.css">
@charset "utf-8"表明设置CSS 的字符编码，如果不写默认就是utf-8。
==层叠和继承：优先级从低到高
(1).浏览器样式（元素自身携带的样式）；
(2).外部引入样式（使用<link>引入的样式）；
(3).文档内嵌样式（使用<style>元素设置）；
(4).元素内嵌样式（使用style 属性设置）。
==强行设置最高优先级：color:green !important;
==强制继承：inherit：@charset"utf-8";
p {
color: green;
font-style: italic;
}
11 CSS选择器
分为基本选择器、复合选择器和伪元素选择器。
==选择器：*、<type>、#<id>、.<class>、[attr]系【属性选择器】、s1,s2,s3...【分组选择】、s1 s2【后代选择器】、
s1 > s2【子选择器】、s1 + s2【相邻兄弟选择器】、s1 ~ s2【普通兄弟选择器】、
伪元素选择器：::first-line【选择块级元素文本的首行】、::first-letter【选择块级元素文本的首字母】
::before【选择元素之前插入内容】、::after【选择元素之后插入内】
--属性选择器：[href]、[type="password"]、
[href^="http"]：属性值开头匹配的属性选择器。
[href$=".com"]：属性值结尾匹配的属性选择器。
[href*="baidu"]：属性值包含指定字符的属性选择器
[class~="edf"]：属性值具有多个值时，匹配其中一个值的属性选择器。
[lang|="en"]：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如<i lang="en-us">HTML5</i>。
p::first-line {color: red;}
p::first-letter {color: red;}
a::before {content: '点击';}
a::after {content: '搜索';}
12 CSS样式之伪类选择器
（HTML5 中CSS 选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。）
==伪类选择器总汇---伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器
（
《子元素选择器》:root【根元素选择器】、:first-child【子元素选择】、:last-child【子元素选择】、
:only-child【子元素选择器，选择元素中唯一子元素】
:only-of-type【子元素选择器，选择指定类型的唯一子元素】、:nth-child(n)【子元素选择器，选择指定N 个子元素】
《UI 选择器》：:enabled【选择启用状态的元素】、:disabled【选择禁用状态的元素】、:checked【选择被选中input 勾选元素】
:default【选择默认元素】、:valid【验证有效选择input 元素】、:invalid【验证无效选择input 元素】
:required【有required 属性选择元素】、:optional【无required 属性选择元素】
《动态选择器》：:link【未访问的超链接元素】、:visited【已访问的超链接元素】、:hover【悬停在超链接上的元素】
:active【激活超链接上的元素】、:foucs【获取焦点的元素】
《其他选择器》：:not【否定选择的元素】、:empty【选择没有任何内容的元素】、:lang【选取包含lang 属性的元素】、
:target【选取URL 片段标识指向元素】
）
==结构性伪类选择器
--子元素选择器：ul >li:first-child【选择第一个子元素】
==ul > li:last-child【选择最后一个子元素】 ul > li:only-child【选择只有一个子元素的那个子元素】
==div > p:only-of-type【选择只有一个指定类型的子元素的那个子元素】
--:nth-child(n)系列：ul >li:nth-child(2)【选择子元素的第二个元素】
ul> li:nth-last-child(2)【选择子元素倒数第二个元素】 div >p:nth-of-type(2)【选择特定子元素的第二个元素】
div > p:nth-last-of-type(2)【选择特定子元素的倒数第二个元素】
--其他伪类选择器：
:not【否定选择器，反选】 :empty【匹配没有任何内容的元素】
:lang(en)【选择包含lang 属性，属性值前缀为en 的元素。和属性选择器匹配结果一致】
:target【定位到锚点时，选择此元素】 ::selection【】
13 颜色和度量单位
==颜色表方案：
black、silver【银灰色】、gray【灰色】、white、maroon【栗色】、栗色、purple【紫色】、fuchsia【紫红】、green、lime【闪光绿】、olive【橄榄色】、yellow
navy【海军蓝】、blue、teal【水鸭色】、aqua【浅绿色】
十进制表示方法就比较多样化：
rgb(r,g,b)--用 RGB 模型表示颜色--rgb(0,128,128)
rgba(r,g,b,a)--同上， a 表示透明度 0~1 之间--rgba(0,128,128,0.5)
hsl(h,s,l)--用 HSL 模型（色相、饱和度和透明度）来表示颜色--hsl(120,100%,30%)
hsla(h,s,l,a) --同上， a 表示透明度 0~1 之间--hsla(120,100%,30%,0.5)
==度量单位
绝对长度单位：in【英寸】 cm【厘米】 mm【毫米】 pt【磅】 pc【pica】
相对长度单位：em【与元素字号挂钩】 ex【与元素字体的“x 高度”挂钩】 rem【与根元素的字号挂钩】 px【像素，与分辨率挂钩】 %【相对另一值的百分比】
14 CSS文本样式
@charset "utf-8";
==字体总汇：font-size、
--font-variant：设置英文字体是否转换为小型大写
--font-style：设置字体是否倾斜
--font-weight：设置字体是否加粗
--font-family：设置 font 字体
--font：设置字体样式复合写法
--@font-face：设置 Web 字体
==设置字体大小。每个值从小到大的固定值。
x-small
small
medium
large
x-large
xx-large
smaller
larger
X+px X+%
==font-style:设置字体是否倾斜。normal、italic、oblique
==font-variant：设置字体是否以小型大写字母显示：normal、small-caps
==font-weight：设置字体是否加粗。normal、bold、bolder、lighter、100 ~ 900 之间的数字：600 及之后是加粗，之前不加粗
==font-family：备用字体font-family: 楷体,微软雅黑,宋体;
==font：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称
==Web 字体：//服务器提供字体
@font-face {
font-family: abc;
src: url('BrushScriptStd.otf');
}
p {
font-size: 50px;
font-family: abc;
}
15 CSS文本样式[下]
==文本总汇：
text-decoration：装饰文本出现各种划线。
text-transform：将英文文本转换大小写
text-shadow：给文本添加阴影
text-align：给文本添加阴影
white-space：排版中的空白处理方式
letter-spacing：设置字母之间的间距
word-spacing：设置单词之间的间距
line-height：设置行高
word-wrap：控制段词
text-indent：设置文本首行的缩进
==文本样式：CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影
--text-decoration：设置文本出现下划线：none、underline、overline【让文本的头部出现一条上划线】、
--line-through【让文本的中部出现一条删除划线】、blink【让文本进行闪烁，基本不支持了】
--text-transform：none、capitalize、uppercase、lowercase
--text-shadow：给文本添加阴影。text-shadow: 5px 5px 3px black;其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第
三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）
==文本控制：
--text-align：left、right、center、justify【内容两端对齐】、start【让文本处于开始的边界】、end【让文本处于结束的边界】
--white-space：处理空白排版方式。normal、nowrap【空白符被压缩，文本不换行】、pre【空白符被保留，遇到换行符则换行】
pre-line【空白符被压缩，文本会在排满或遇换行符换行】、pre-wrap【空白符被保留，文本会在排满或遇换行符换行】
--letter-spacing：设置文本之间的间距。normal、长度值
--word-spacing：设置英文单子之间的间距。normal、长度值
--line-height：设置段落行高
--word-wrap：让过长的英文单词断开。normal、break-word
--text-indent：设置文本首行的缩进normal、长度值
16 CSS盒模型[上]
==元素尺寸：width、height、min-width、min-height、max-width、max-height
==元素内边距：padding-top、padding-bottom、padding-left、padding-right、padding
==元素外边距：margin-top、margin-bottom、margin-left、margin-right、margin
==处理溢出：overflow-x、overflow-y、overflow【auto、hidden《溢出的内容，直接剪掉》 、scroll《都会出现滚动条》、visible《默认值，不管是否溢出，都显示内容》】
17 CSS盒模型[下]
==元素可见性:visibility【visible、hidden、collapse《元素不可见，隐藏表格的行与列，如果不是表格， 则和 hidden 一样》】
==元素盒类型：块级元素、行内元素、行内-块元素、隐藏元素
--块级元素：<div>、<p>
--行内元素：<span>、<b>
--行内-块元素：<img> 》》display【block【盒子为块级元素】、inline【盒子为行内元素】、inline-block【盒子为行内-块元素】、none【盒子不可见，不占位】】
==元素的浮动：float【left、right、none】
==clear 属性来处理取消元素的浮动情况：float【clear：none《允许两边均可浮动》、left/right【左/右边界不得浮动】、both】
18 CSS 边框和背景
==声明边框:三个属性设置：border-width、border-style【样式，必选】、border-color
==边框样式：none、dashed【破折线】、dotted【圆点线】、double【双线】、groove 【槽线】、inset【使元素内容具有内嵌效果】
outset【使元素内容具有外凸效果】、ridge【脊线】、solid【实线】
==边框宽度取值表：长度值、百分数、使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大【thin、medium、thick】
==边单独进行设置：border-【top|bottom|left|right】-【width|style|color】
==圆角边框：使用border-radius 属性进行设置
（
属性：
--border-radius：四条边角
--border-top-left-radius：左上边角
--border-top-right-radius：右上边角
--border-bottom-left-radius：左下边角
--border-bottom-right-radius：右下边角
）
19 CSS 边框与背景[下]
《盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。》
==设置背景：
（
属性：
--background-color、
--background-image：none 或url
--background-repeat：背景图片的样式
--background-size：背景图像的尺寸
--background-position：背景图像的位置【位置坐标】
--background-attachment：背景图片的滚动
--background-clip：背景图片的裁剪
--background-origin：背景图片起始点
--background：背景图片简写方式
）
==background-color：颜色/transparent
==background-image：none【如果多个div 批量设置了背景，而其中某一个不需要背景，可以单独设置none值取消背景】、url
==background-repeat：repeat-x、repeat-y、repeat、no-repeat
==background-position：top、left、right、bottom、center、长度值【偏移图片的位置】、百分数【偏移图片的位置】
--background-position: top left;【置于左上方偏移】 --background-position: 20px 20px;【左边、上边偏移】
==background-size：
（
属性：长度值、百分比
--auto：默认值，图像以本尺寸显示
--cover：等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
--contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合
）
使用cover 相当于100%，全屏铺面一张大图，这个值非常实用。body {background-image: url(loading.gif);background-size: cover;}
使用contain 表示，尽可能让图片完整的显示在元素内。background-size: 240px 240px;
==background-attachment：scroll【默认值，背景固定在元素上，不会随着内容一起滚动】
fixed 【背景固定在视窗上，内容滚动时背景不动】
==background-origin：border-box【在元素盒子内部绘制背景】 padding-box【在内边距盒子内部绘制背景】
content-box【在内容盒子内部绘制背景】
==background-clip： border-box【在元素盒子内部裁剪背景】 padding-box【在内边距盒子内部裁剪背景】
content-box【在内容黑子内部裁剪背景】
20 CSS 表格与列表
==表格样式
（
--border-collapse：边框样式，相邻单元格的边框样式
--border-spacing：相邻单元格边框的边距，长度值
--caption-side：表格标题的位置【位置名称】
--empty-cells：空单元格是否显示边距【显示值】
--table-layout：指定表格的布局样式【布局样式】
==border-collapse：separate【默认值，单元格边框独立】、collapse【单元格相邻边框被合并】
border-collapse: collapse;//单元格相邻的边框被合并。
==border-spacing：长度值 0表示间距，其他使用CSS 长度值
border-spacing:10px;【border-collapse: separate;的状态下才有效。因为要设置间距，不能合并。】
==caption-side：top【默认值，标题在上方】 bottom【标题在下方】
==empty-cells：show【默认值，显示边框】 hide【不显示边框】
==empty-cells: hide;【单元格内容为空时隐藏边框。】
==table-layout：auto【默认值，内容过长时，拉伸整个单元格】、fixed【内容过长时，不拉伸整个单元格】
）
==列表样式
列表有四种独有样式：list-style-type【类型值，列表中的标记类型】 list-style-image【none 或url图像作为列表标记】
list-style-position【位置值，排列的相对位置】 list-style【列表的简写形式】
==list-style-type：
（
属性：none【没有标记】、disc【实心圆】、circle【空心圆】、square【实心方块】、decimal【阿拉伯数字】、lower-roman【小写罗马数字】
upper-roman【大写罗马数字】、lower-alpha【小写英文字母】、upper-roman【大写英文字母】
）
==list-type-position：outside【默认值，标记位于内容框外部】、inside【标记位于内容框内部】
==list-type-image：none【不使用图像】、url【通过url 使用图像】list-style-image: url(bullet.png);//使用图片作为前缀的标记
==list-style：简写形式 ul {list-style: lower-alpha insideurl(bullet.png);}
==其他功能：
《在<table>中<td>单元格，我们可以使用text-align 属性水平对齐，但是垂直对齐就无法操作了。CSS 提供了vertical-align 属性用于垂直对齐》
（
--baseline：内容对象与基线对齐
--top：内容对象与顶端对齐
--middle：内容对象与中部对齐
--bottom：内容对象与底部对齐
）
==上下标功能：sub【垂直对齐文本的下标】、super【垂直对齐文本的上标】b{vertical-align: super;}
==长度值【设置上下的偏移量，可以是负值】 百分比【同上】 vertical-align: -200px;
负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。
21 CSS 其他样式
：包括颜色、透明度、盒子的阴影轮廓以及光标的样式。
==颜色和透明度：color【设置文本前景色】 opacity【0 ~ 1：设置元素的透明度】
==盒子阴影和轮廓：box-shadow【一个非常实用的效果样式，就是阴影效果】
（
属性：
--hoffset：阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移。
--voffset：阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值代表阴影位于元素盒子上方。
--blur：（可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为0，边界清晰
--spread：（可选）指定阴影延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小
--color：（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色
--inset：（可选）将外部阴影设置为内部阴影。
==【box-shadow: 5px 4px10px 2px gray; ||box-shadow: 5px 4px 10px 2px gray inset;】
）
==outline：轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。
（
属性：
--outline-color：【颜色，外围轮廓的颜色】
--outline-offset：【长度，轮廓距离元素边框边缘的偏移量】
--outline-style：【样式，轮廓样式，和border-style一致】
--ontline-witdh：【轮廓宽度】
--outline：<颜色> <样式> <宽度> outline: 10px double red;
）
==光标样式cursor：auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,verticaltext,
alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize
,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll
22 CSS3 前缀和rem
==CSS3 前缀：
（浏览器，厂商名称
--Chrome、Safari：-webkit-
--Opera：-o-
--Firefox：-moz-
--Internet Explorer：-ms-
）
//实验阶段的写法
div {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
}
//前缀写法写在标准后面，且值不一样，就会出现问题
div {
border-radius: 50px;
-webkit-border-radius: 100px;
}
==长度单位rem：
《这里重点推荐一个：rem 或者成为(根em)。目前主流的现代浏览器都很稳定的支持。它和em、百分比不同的是，
它不是与父元素挂钩，而是相对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。》
1em=10px; em:【灵活】它挂钩的是它父元素 所以，W3C 推出了直接基于根元素单位：rem：【与根元素挂钩】
23 CSS3 文本效果
==文本阴影：
//正值阴影
text-shadow: 1px 1px 1px red;
//负值阴影
text-shadow: -1px -1px 1px red;
//多重阴影叠加
text-shadow:0px 0px 0 rgb(188,178,188),
1px 0px 0 rgb(173,163,173)...
==文本裁剪：
《CSS3 提供了text-overflow 属性来控制文本的溢出部分，它的作用是对溢出的部分裁剪掉，然后判定是否添加省略号。》
---text-overflow：clip【默认值，裁剪文本时不添加“...”省略号】
ellipsis【裁剪文本时添加“...”省略号】
//必须不换号和使用overflow 控制溢出
p {
width: 160px;
white-space: nowrap;
background: silver;
/*text-overflow: clip;*/
text-overflow: ellipsis;
overflow: hidden;
}
==文本描边：
《CSS3 提供了描边属性，即text-stroke、text-stroke-width、text-stroke-color。目前只有webkit
引擎的浏览器支持，并且必须加上-webkit-前缀才能有效。》
//实验阶段的产物，了解即可
p {
font-size: 50px;
-webkit-text-stroke:1px red;
}
//修改描边的颜色和厚度
p {
font-size: 50px;
-webkit-text-stroke:1px red;
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: 2px;
}
==文本填充：
《CSS3 提供了一个文本颜色填充功能：text-fill-color，感觉和color 属性很像。其实在配合其他属性才能达到不一样的效果。》
//不配合背景样式时，和color 属性没区别
p {
font-size: 150px;
-webkit-text-fill-color: red;
}
//和CSS3 背景的新特性搭配产生渐变文字
p {
font-size: 150px;
font-family: 黑体;
background:
-webkit-linear-gradient(top,#eee,#aaa50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
24 CSS3 渐变效果
《HTML5 中CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。》
==线性渐变linear-gradient：CSS3 提供了linear-gradient属性实现背景颜色的渐变功能。linear-gradient(方位, 起始色, 末尾色)
方位：to top、to topright、to right、to bottom、to bottom left、toleft、to top left。
起始色：必选参数，颜色值
末尾色：必选参数，颜色值
//可以使用以角度单位的数值来设置方位。比如0度（0deg）相当于to top；角度会沿逆时针方向随着你的角度的增加而增加。
//通过角度设置方位，0 ~ 360 度之间，可以是负值
background-image:linear-gradient(45deg,orange,green);
//多色线性渐变
background-image:linear-gradient(-45deg,orange,green,blue,red);
//通过百分比设置多色线性位置
background-image: linear-gradient(-45deg,orange 0%, green 20%, blue 40%,red 100%);
//结合背景，并使用透明渐变实现强大层次感
background-color: red;
background-image: linear-gradient(to topright, rgba(0,0,0,0.6),
rgba(0,0,0,0));
//重复渐变属性值
background-image:repeating-linear-gradient(to top, orange 10px, green
30px);
==径向渐变radial-gradient：
《CSS3 提供了径向渐变，也叫做放射性渐变：radial-gradient 属性值。它是从一个点向四周发散的方式扩展。》
==radial-gradient(方位, 起始色, 末尾色)
方位：可选参数，径向的方位。可以使用的值有：像素、百分比、固定值，或复合搭配使用：
起始色：必选参数，颜色值
末尾色：必选参数，颜色值
//两个必选参数
background-image: radial-gradient(orange,green);
//如果想设置第一个可选参数，有一种做法是设置为：cirlce(圆形)或ellipse(椭
圆形)。默认是椭圆形。
background-image: radial-gradient(circle,orange, green);
//不单单可以设置形状，还可以设置形状的发散方向：top、left、right、bottom、center
background-image: radial-gradient(circle attop, orange, green);
//也可以复合方向，比如右下方
background-image: radial-gradient(circle atright bottom, orange,green);
//可以设置发散的距离，即圆的半径长度：
background-image: radial-gradient(circleclosest-side, orange, green);
（
关键字说明：closest-side【指定径向渐变的半径长度为从圆心到离圆心最近的边】
closest-corner【指定径向渐变的半径长度为从圆心到离圆心最近的角】
farthest-side【指定径向渐变的半径长度为从圆心到离圆心最远的边】
farthest-corner【指定径向渐变的半径长度为从圆心到离圆心最远的角】
）
//关键字有点拗口，可以用像素表示半径，但不接受百分比
background-image: radial-gradient(circle50px, orange, green);
//同样，也有重复背景方式
background-image:repeating-radial-gradient(circle 50px, orange,green);
//兼容模式
//两个重复背景只要加上前缀就是兼容模式了
25 CSS3 边框图片效果
==属性解释：
《CSS3 提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。》
（
属性：
--border-image-source：引入背景图片地址
--border-image-slice：切割引入背景图片
--border-image-width：边框图片的宽度
--border-image-repeat：边框背景图片的排列方式
--border-image-outset：边框背景向外扩张
--border-image：上面五个属性的简写方式
）
==属性解释
显示排列方式:border-image-repeat
(
属性：
--stretch：指定用拉伸方式填充边框背景图。默认值。
--repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
--round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小，直至正好可以铺满整个边框。
--space：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距，直至正好可以铺满整个边框。
)
//另一个按钮的小例子
div {
width: 400px;
height: 40px;
border-image-source: url(button.png);
border-image-width: 10px;
border-image-slice: 10 fill;
border-image-repeat: stretch;
}
border-image-source: url(border.png);
border-image-width:27px;
border-image-slice:27;
border-width:20px;
border-image-repeat:round;
==简写和版本:border-image:url(border.png) 27/27px round;
26 CSS3 变形效果[上]
《HTML5 中CSS3 的变形效果，通过变形效果，可以平移、缩放和旋转元素的功能。》
==transform：
《CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和transform-origin。》
--transform：指定应用的变换功能
--transform-origin：指定变换的起点
（
于transform 的属性值：none、
--translate、translateX、translatY(长度值或百分数值)【平移】：在水平方向、垂直方向或两个方向上平移元素。
--scale、scaleX、scaleY(数值)【缩放】：在水平方向、垂直方向或两个方向上缩放元素
--rotate(角度)【旋转】：旋转元素
--skew、skewX、skewY(角度)【倾斜】：在水平方向、垂直方向或两个方向上使元素倾斜一定的角度
--matrix(4~6 数值，逗号隔开)：指定自定义变换。
transform: scale(1.5,1.5);
/*旋转*/：transform:rotate(-45deg);
/*通过六个值自定义矩形*/：transform:matrix(1, 0, 0, 1, 30, 30);
/*多个属性值空格隔开*/transform:rotate(45deg) scale(1.5);
）
==transform-origin：《可以设置变换的起点。默认情况下，使用元素的中心作为起点。》
（
属性：
--百分数值：指定元素x 轴或y 轴的起点
--指定x 轴的位置：left、center、right
--指定y 轴的位置：top、center、bottom
//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;
）
==浏览器版本：兼容完整版==添加代表各个浏览器的前缀
27 CSS3 变形效果[下]
《HTML5 中CSS3 的变形效果，主要接着上节课的2D 平面变形转换到3D立体变形。》
==3D 变形简介
（
3D 变形的属性值表：
--translate3d(x,y,z)：3D 方式平移元素，设置x、y 和z 轴
--translateZ(z)：设置3D 方式平移元素的z 轴 【平移】
--scale3d(x,y,z)：设置3D 方式缩放元素的z 轴
--scaleZ(z)：设置3D： 方式缩放元素的z 轴 【缩放】
--rotate3d(x,y,z,a)：3d 方式旋转元素
--rotateX(a)、rotateY(a)、rotateZ(a)：分别设置3D 方式的旋转元素的x、y 和z 轴 【旋转】
--perspective(长度值)：设置一个透视投影矩阵
--matrix3d(多个值)：定义一个矩阵
）
//兼容版本完整形式
==transform-style：是指定嵌套元素如何在3D空间中呈现。
（
属性：flat：默认值，表示所有子元素在2D 平面呈现。
preserve-3d：表示子元素在3D 空间中呈现。
）
==perspective：perspective 是3D 变形的重要属性，该属性会设置查看者的位置，并将可视内容映射
到一个视锥上，继而投放到一个2D 平面上。
（
属性：none：默认值，表示无限的角度来看3D 物体，但看上去是平的。
长度值：接受一个长度单位大于0 的值，其单位不能为百分比。值越大，角度出现的越远，就好比你人离远一点看物体。值越小，正相反。
）
==perspective-origin 属性来设置3D 变形中的源点角度。该属性默认值为50% 50%也就是center center。
（
--百分数值：指定元素x 轴或y 轴的起点
--长度值：指定距离
--指定x 轴的位置：left、center、right
--指定y 轴的位置：top、center、bottom
）
28 CSS3 过渡效果
==过渡简介：过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。
CSS3 提供了transition 属性来实现这个过渡功能，主要属性如下表：
（
--transition-property：指定过渡或动态模拟的CSS属性
--transition-duration：指定完成过渡所需的时间
--transition-timing-function：指定过渡的函数
--transition-delay：指定过渡开始出现的延迟时间
--transition：简写形式，按照上门四个属性值连写
）
==transition-property：none【没有指定任何样式】、all【默认值，指定元素所支持transition-property属性的样式】、
指定样式【指定支持transition-property的样式】
==transition-proerty 支持的样式有哪些：【background-color、background-image、background-position、border-bottom-color、border-bottom-width、border-color
border-left-color、border-left-width、border-right-color、border-right-width、border-spacing、border-top-color、border-top-width、border-width
bottom、color、crop、font-size、font-weight、grid-*、height、left、letter-spacing、line-height、margin-bottom、margin-left、margin-right、margin-top
max-height、max-width、min-height、min-width、opacity、outline-color、outline-offset、outline-width、padding-bottom、padding-left、padding-right、padding-top
right、text-indent、text-shadow、top、vertical-align、visibility、width、word-spacing、z-index、zoom】
==transition-duration：设置过渡的样式--transition-duration:1s;
==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)
）
//恒定速度
transition-timing-function: linear;
以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用 cubic-bezier()属性值，里面传递四个参数 p0,p1,p2,p3，值在 0~1 之间。
//自定义缓动
transition-timing-function:cubic-bezier(0.25, 0.67, 0.11, 0.55);
==transition-delay：这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。
//设置延迟效果 如果有多个样式效果，可以设置多个延迟时间，以空格隔开
transition-delay: 0s, 1s, 0s;
29 CSS3动画效果
==动画简介：
animation 实现动画效果主要由两个部分组成：
1.通过类似 Flash 动画中的关键帧声明一个动画；
2.在 animation 属性中调用关键帧声明的动画。
==CSS3 提供的 animation 是一个复合属性，它包含了很多子属性：
--animation-nam：用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用 animation-name 指定的动画，从而执行动画。
--animation-duration：用来设置动画播放所需的时间
--animation-timing-function：用来设置动画的播放方式
--animation-delay：用来指定动画的延迟时间
--animation-iteration-count：用来指定动画播放的循环次数
--animation-direction：用来指定动画的播放方向
--animation-play-state：用来控制动画的播放状态
--animation-fill-mode:用来设置动画的时间外属性
--animation:以上的简写形式
==属性详解:
@keyframes://创建动画的第一步，先声明一个动画关键帧。
@keyframes myani {
0% {
background-color: white;
margin-left:0px;
}
50% {
background-color: black;
margin-left:100px;
}
100% {
background-color: white;
margin-left:0px;
}
}
//或者重复的，可以并列写在一起
@keyframes myani {
0%, 100% {
background-color: white;
margin-left:0px;
}
50% {
background-color: black;
margin-left:100px;
}
}
==animation-name://调用@keyframes 动画--animation-name:myani;
--none:默认值，没有指定任何动画
--INDEX:是由@keyframes 指定创建的动画名称
==animation-duration://设置动画播放的时间--animation-duration:1s;
==animation-timing-function://设置缓动--animation-timing-function:ease-in;【ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier】
==animation-delay：//设置延迟时间-----animation-delay: 1s;
==animation-iteration-count：//设置循环次数---animation-iteration-count:infinite;【次数，默认值为 1、infinite：表示无限次循环】
==animation-direction：//设置缓动方向交替--animation-direction:alternate;【normal：默认值，每次播放向前、alternate：一次向前，一次向后，一次向前，一次向后这样交替】
==animation-play-state//设置停止播放动画--animation-play-state:paused;
==animation-fill-mode//设置结束后不在返回--animation-fill-mode:forwards;【none：默认值，表示按预期进行和结束、forwards：动画结束后继续应用最后关键帧位置，即不返回
backforwards：动画结束后迅速应用起始关键帧位置，即返回、both：根据情况产生 forwards 或 backforwards 的效果】
==简写和版本：
//简写形式完整版
animation: myani 1s ease 2 alternate 0sboth;
30 CSS 传统布局[上]
==布局模型:
--从最低分辨率1024 * 768 设计即可。当然，也有一些网站在近两年讲最低分辨率设置为1280 减去滚动条宽度，因为大显示器逐步主流。
--刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比如100%。不管你是什么分辨率，它都能全屏显示，
--当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。
==表格布局:
--表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。
--表格应该用它最为语义的地方，就是二维表的数据显示。
==固定布局://CSS 部分
body {margin:0;}
table {margin:0 auto;width:960px;border-spacing: 0;}
==流体布局:表格的固定布局改成流体布局非常简单，只需要设置table 为100%即可。table {width: 100%;}
==浮动布局:浮动布局主要采用float和clear 两个属性来构建。【固定布局、流体布局】【float: left;、float:right;、clear:both;】
流体布局只要更改body 元素的限定长度为auto 或100%。然后左右两列分别设置20%和80%即可。
31 CSS 传统布局[下]
==定位布局：position 属性来实现元素的绝对定位和相对定位。
（
属性：
--static：默认值，无定位。
--absolute：绝对定位，使用top、right、bottom、left进行位移。【脱离文档流，z-index判定层次关系】
--relative:相对定位，使用top、right、bottom、left进行位移。 【占位偏移】
--fixed:以窗口参考定位，使用top、right、bottom、left 进行位移。【脱离文档流】
）
==//绝对定位，脱离文档流，以窗口文档左上角0,0为起点【absolute】
--所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有s文档的位置，好像浮在了空中一般，有了层次感。
--由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过z-index 属性来判定它们的层次关系。
（z-index：auto【默认层次】、数字【设置层次，数字越大，层次越高】
）
==//以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动【fixed】
==//相对定位，不脱离文档流，占位偏移：既要脱离文档流、以父元素为参考点、还必须是绝对定位。
//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标【占位】
body {position: relative;}
//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准
header {position: absolute;top: 0px;left:0px;}
==box-sizing：
《我们了解到元素盒子如果加入了内边距padding 和边框border后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，
我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。》
==CSS3 提供了一个属性box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子
增加内边距和边框的长度增减问题。
（box-sizing
--content-box：默认值，border 和padding 设置后用于元素的总长度。
--border-box：border 和padding 设置后不用于元素的总长度。
）
//设置border-box 让border 和padding 不在额外增加元素大小
aside {
width: 200px;
height: 500px;
background-color: purple;
padding: 10px;
border: 5px solid red;
box-sizing: border-box; 【不在额外增加元素大小】
float: left;
}
==box-sizing 是CSS3 推出的，各个厂商在实现时设置了私有前缀。
//完整形式
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
==resize：CSS3 提供了一个resize 属性，来更改元素尺寸大小。
（
属性：
--none：默认值，不允许用户调整元素大小。
--both：用户可以调节元素的宽度和高度。
--horizontal：用户可以调节元素的宽度。
--vertical：用户可以调节元素的高度。
）
一般普通元素，默认值是不允许的。但如果是表单类的textarea 元素，默认是允许的。
而普通元素需要设置overflow:auto，配合resize 才会出现可拖拽的图形。
//允许修改
aside {
resize: both;
overflow:auto;
}
32 CSS3 多列布局
【流体多列布局】【columns】
《HTML5 中CSS3 提供的多列布局，通过多列布局我们方便的创建流体的多列布局。》
//如果想用浮动和定位实现流体三列，基本不可能。所以，CSS3 提供了多列布局属性columns 来实现这个动态变换的功能。
==属性及版本：CSS3 提供了columns 多列布局属性等7 个属性集合，具体如下：
（
--columns：集成column-width 和column-count两个属性。
--column-width：定义每列列宽度
--column-count：定义分分列列数
--column-gap：定义列间距
--column-rule：定义列边框
--column-span：定义多列布局中子元素跨列效果，firefox不支持
--column-fill：控制每列的列高效果，主流浏览器不支持
）
《由于column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。》
//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: border-box;
==属性解释：
--columns：包含columns-width 和columns-count这两种简写--//分成四列，每列宽度自适应：-moz-columns: auto 4;
--column-width：用于设置每列的宽度---moz-column-width:200px;【auto、长度值】
这里设置了200px，有点最小宽度的意思。当浏览器缩放到小于200 大小时，将变成1
列显示。而如果是auto，则一直保持四列。
--column-count：用于设置多少列。//设置列数：-moz-column-count:4;【auto：默认值，表示就1 列。||数值：设置列数】
--column-gap：column-gap 属性，用于设置列间距//设置列间距-moz-column-gap:100px;【】
--column-rule：设置每列中间的分割线--//设置列边线-moz-column-rule:2px dashed gray;
（
--column-rule：<宽度> <样式> <颜色>的边框简写形式。
--column-rule-width：单独设置边框宽度
--column-rule-style：单独设置边框的样式。
--column-rule-color：单独设置边框的颜色。
《列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。》
）
--column-span：设置跨列大标题【none：默认值，表示不跨列。、all：表示跨列。】
//跨列标题，由于火狐尚未支持，固使用webkit---webkit-column-span:all;
（
实例：@charset "utf-8";
div {
-webkit-column-width: 150px;
-webkit-column-count:3;
-webkit-column-gap:50px;
-webkit-column-rule:2px dashed gray;*/
}
h1 {
text-align:center;
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}
）
33 CSS3 弹性伸缩布局[上]
==布局简介：CSS3 提供一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局。
在发展中，可能还有各种改动，浏览器的兼容性还存在问题。
div {
display: -moz-box;
display: -webkit-box;
display: box;
}
//通过以上设置，在除了IE 浏览器外，布局实现了水平分布。
==旧版本:
如果属性和属性值为：display:box.属于旧版本。
--容器属性display：【box：将容器盒模型作为块级弹性伸缩盒显示（旧版本）、inline-box：将容器盒模型作为内联级弹性伸缩盒显示（旧版本）】
//块级它是占用整行的，类似<div>元素，而内联级不占用整行，类似<span>元素。
//设置弹性，以火狐为例
div {
display: -moz-box;
}
==box-orient 属性：主要实现盒子内部元素的流动方向。
（
属性：
--horizontal：伸缩项目从左到右水平排列
--vertical:伸缩项目从上到下垂直排列
--inline-axis:伸缩项目沿着内联轴排列显示
--block-axis:伸缩项目沿着块轴排列显示
）
//设置垂直流动:div{-webkit-box-orient: vertical;}
==box-direction 属性:主要是设置伸缩容器中的流动顺序。【normal：默认值，正常顺序、reverse：逆序】
--div {-moz-box-direction: reverse;}
==box-pack属性：用于伸缩项目的分布方式。
（
属性：
--start：伸缩项目以起始点靠齐
--end：伸缩项目以结束点靠齐
--center：伸缩项目以中心点靠齐
--justify：伸缩项目平局分布，-webkit-支持，-moz-不支持
）
==box-align属性：用来处理伸缩容器的额外空间。
（
属性：
--start：伸缩项目以顶部为基准，清理下部额外空间
--end：伸缩项目以底部为基准，清理上部额外空间
--center：伸缩项目以中部为基准，平均清理上下部额外空间
--baseline：伸缩项目以基线为基准，清理额外的空间
--stretch：伸缩项目填充整个容器，默认
）
//居中对齐，清理上下额外空间
div {
-moz-box-align: center;
}
==box-flex属性：可以使用浮点数分配伸缩项目的比例
//设置每个伸缩项目占用的比例
p:nth-child(1) {
-ms-flex:1;
-ms-flex-order:3;
}
p:nth-child(2) {
-ms-flex:3;
-ms-flex-order:2;
}
p:nth-child(3) {
-ms-flex:1;
-ms-flex-order:1;
}
==box-ordinal-group 属性：可以设置伸缩项目的显示位置。
//将第一个位置的元素，跳转到第三个位置
p:nth-child(1) {
-moz-box-ordinal-group: 3;
}
34 CSS3 弹性伸缩布局[中]
==混合过渡版
--设置伸缩盒的display 有如下两个属性值：
（
--flexbox：将容器盒模型作为块级弹性伸缩盒显示（混合版本）
--inline-flexbox：将容器盒模型作为内联级弹性伸缩盒显示（混合版本）
）
//需要IE 前缀-msdiv
{
display: -ms-flexbox;
}
==flex-direction：和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。
（
属性：
--row：设置从左到右排列
--row-reverse：设置从右到左排列
--column：设置从上到下排列
--column-reverse：设置从下到上排列
）
==flex-wrap属性:类似与旧版本中的box-lines，但是box-lines 我们没有讲解，原因是没有浏览器支持它。
==flex-flow 属性:是集合了排列方向和控制换行的简写形式。
==flex-pack 属性:和旧版本中的box-pack一样，设置伸缩项目的对其方式。【start、end、center、justify】
==flex-align 属性：和旧版本中的box-align 一样，处理伸缩项目容器的额外空间。【start、end、center、baseline、stretch】
==flex 属性：和旧版本中的box-flex 类似，用来控制伸缩容器的比例分配。
==flex-order 属性：和box-ordinal-group属性一样控制伸缩项目出现的顺序。//设置伸缩项目顺序
p:nth-child(1) {
-ms-flex-order: 2;
}
35 CSS3 弹性伸缩布局[下]
==新版本display 有如下两个属性值：flex【将容器盒模型作为块级弹性伸缩盒显示（新版本）】
inline-flex【将容器盒模型作为内联级弹性伸缩盒显示（新版本）】
==flex-direction：和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。
（
属性：
--row：设置从左到右排列
--row-reverse：设置从右到左排列
--column：设置从上到下排列
--column-reverse：设置从下到上排列
）
==flex-wrap属性:类似与旧版本中的box-lines，但是box-lines 我们没有讲解，原因是没有浏览器支持它。
(
属性：
--nowrap：默认值，都在一行或一列显示
--wrap：伸缩项目无法容纳时，自动换行
--wrap-reverse：伸缩项目无法容纳时，自动换行，方向和wrap 相反
//设置无法容纳时，自动换行
div {
-ms-flex-wrap: wrap;
}
)
==flex-flow 属性：是集合了排列方向和控制换行的简写形式。
//简写形式
div {
flex-flow: row wrap;
}
==justify-content 属性：和旧版本中的box-pack一样，设置伸缩项目的对其方式。
（
属性：
--flex-start：伸缩项目以起始点靠齐
--flex-end：伸缩项目以结束点靠齐
--center：伸缩项目以中心点靠齐
--space-between：伸缩项目平局分布
--space-around：同上，但两端保留一半的空间
）
==align-items属性：和旧版本中的box-align 一样，处理伸缩项目容器的额外空间。
（
属性：
--flex-start：伸缩项目以顶部为基准，清理下部额外空间
--flex-end：伸缩项目以底部为基准，清理上部额外空间
--center：伸缩项目以中部为基准，平均清理上下部额外空间
--baseline：伸缩项目以基线为基准，清理额外的空间
--stretch：伸缩项目填充整个容器，默认
）
==align-self:align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致。
==flex 属性:和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。
==order 属性和box-ordinal-group 属性一样控制伸缩项目出现的顺序。
36 使用Emmet 插件
了解一下Sublime Text3 的一个HTML5 代码提示插件：Emmet，这个插件比自带原生的要强大许多
37 实战旅行社网站
==网站结构：
<nav></nav> 【导航】
<header></header> 【头部】
<section></section> 【页面主体】
<footer></footer>