CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。box-sizing 有两个值:content-box，border-box
可以分成两种情况：
附录：私有化前缀：
浏览器私有化前缀：
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：ie
-o-：欧朋
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、可以设置多个阴影,每个阴影之间使用逗号隔开.
注意：可以有多个影子.
案例：凹凸文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>凹凸文字效果</title>
<style>
body{
background-color: #666;
}
p{
font-size:80px;
text-align: center;
font-weight: bold;
font-family: "Microsoft Yahei";
color:#666;
}
.tu{
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<p class="ao">小宁博客--孙肖宁的个人博客</p>
<p class="tu">小宁博客--孙肖宁的个人博客</p>
</body>
</html>RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。Red、Green、Blue、Alpha即RGBA。Hue、Saturation、Lightness、Alpha即HSLAR、G、B 取值范围0~255H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色S 饱和度 取值范围0%~100%L 亮度 取值范围0%~100%A 透明度 取值范围0~1
opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；transparent 不可调节透明度，始终完全透明RGBA、HSLA可应用于所有使用颜色的地方。opacity 设置透明度，只能针对整个盒子设置透明度，子盒子会继承父盒子的透明度。background-color: transparent; 完全透明，不可调节透明度.rgba 来控制颜色，相对opacity ，不具有继承性.描述：每一段的第一个字变大下沉，每一段的第一行的文字颜色发生改变，无论屏幕多大，每一行显示多少文字，都是第一行文字颜色发生改变。鼠标选中文字之后，文字的样式发生改变。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首字下沉，第一行文字变色，选中文字样式</title>
<style>
body, ul, dl, dt, dd {
margin: 0;
padding: 0;
}
body {
font-family: '微软雅黑';
background-color: #F7F7F7;
color: #666;
}
.content {
width: 960px;
margin: 0 auto;
font-size: 20px;
}
p {
text-indent: 40px;
line-height: 1.5;
}
p:first-child {
text-indent: 0;
}
p:first-letter{
font-size:40px;
float: left;
color:red;
}
p::first-line{
color:blue;
}
/* ::selection 表示当前选中的区域 ， 通过设置 color background*/
p::selection{
background-color: rgba(255,0,0,0.3);
color:green;
}
</style>
</head>
<body>
<div class="content">
<p>格物致知是中国古代儒家思想中的一个重要概念，源于《礼记‧大学》八目─格物、致知、诚意、正心、修身、齐家、治国、平天下─所论述的『欲诚其意者，先致其知；致知在格物。物格而后知至，知至而后意诚』此段。致知即获得知识而获得知识的途径在于在于认识。研究万事万物。致知在格物。 格物的意思是认识，研究万事万物的道理，通过对万事万物的认识，研究后才能获得知识，即格物而后知至。致知在格物，格物而后知至强调了格物，致知二着相辅相成，相得益彰的关系。</p>
<p>美籍华裔物理学家，丁肇中先生的报告中的一篇漫谈式的议论文。作者先阐明格物致知精神在今天的重要性，而后揭示格物致知的真正意义。他曾在论文中提到。现代学术的基础就是实地的探察，就是现在所谓的实验。他在一系列论述中有着重提到科学进展的历史告诉我们，新的知识只能通过实地实验而得到。</p>
</div>
</body>
</html>CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
其特点是通过属性来选择元素，具体有以下5种形式：
E[attr] 表示存在attr属性即可；例如：div[class]E[attr=val] 表示属性值完全等于val；例如：div[class=mydemo]E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；例如:div[class*=mydemo]E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；例如:div[class^=mydemo]E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；例如div[class$=demos]link、:active、:visited、:hover。通过E来确定元素的父元素。
E:first-child第一个子元素E:last-child最后一个子元素E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素； div>ul>li:nth-child(3){
color: deeppink;
} E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；
div>ul>li:last-child(2){
color: deeppink;
}选中所有的奇数的li
li:nth-child(2n-1){
color: red;
}li:nth-child(7n){
color: red;
}选中前面五个
li:nth-child(-1n+5){
color: red;
}选中后面五个
li:nth-last-child(-1n+5){
color: red;
} li:nth-child(even){
color:red
} li:nth-child(odd){
color:blue;
}nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）没有任何的子元素，包括空格.目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
<li>
<a href="#title1">CSS (层叠样式表)</a>
</li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
} E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。E:after、E:before通过 css 模拟出来html标签的效果，必须有content属性才行；E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；E::first-line 文本第一行； 文本第一行高亮.E::selection 可改变选中文本的样式；
描述：
用户点击Tab栏上面的标题，下面的内容跟着改变，用Html5中新的标签及API制作，所以兼容性不好。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏的切换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}
nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a:last-child {
border-right: 0 none;
}
nav a.active {
background-color: #9BAF9B;
}
.cont {
overflow: hidden;
display: none;
}
.cont ol {
line-height: 30px;
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local" >
<ol>
<li>11111111111111</li>
<li>11111111111111111111</li>
<li>111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
<li>2222222222222222222222</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
<li>333333333333333333333333333</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
<li>00000000000000000000000000000</li>
</ol>
</section>
<script>
// 目标： 默认显示一个 当前的样式
// 点击导航，实现切换
// key 表示的当前显示的是第几个
(function(key){
// 获取所有的导航
var navs=document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件，并且添加当前样式
for(var i=0;i<navs.length;i++){
// 如果是用户指定的当前样式
if(key==i){
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId=navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#'+secId).style.display='block';
}
// 给每一个导航绑定点击事件
navs[i].onclick=function(){
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav=document.querySelector('.active');
// 获取对应的内容区域 ，让其隐藏
var currentId=currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#'+currentId).style.display='none';
// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId=this.dataset['cont'];
document.querySelector('#'+myId).style.display='block';
}
}
})(0);
</script>
</div>
</body>
</html>document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。
Node.classList.add('class') 添加classNode.classList.remove('class') 移除classNode.classList.toggle('class') 切换class，有则移除，无则添加Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。
在HTML5中我们可以自定义属性，其格式如下data-*=""，例如data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。Node.dataset是以类对象形式存在的
当我们如下格式设置时，则需要以驼峰格式才能正确获取data-my-name="itcast"，获取Node.dataset['myName']
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。
HTML5通过<audio>标签来解决音频播放的问题。
属性：autoplay 自动播放controls 是否显不默认播放控件loop 循环播放preload 预加载 同时设置autoplay时些属性失效
由于版权等原因，不同的浏览器可支持播放的格式是不一样的,具体如下。
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | 支持 | 支持 | 支持 | 支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
推荐的兼容写法
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的浏览器不支持音频标签！
</audio>HTML5通过<video>标签来解决音频播放的问题。
属性：autoplay 自动播放controls 是否显示默认播放控件loop 循环播放preload 预加载，同时设置了autoplay，此属性将失效width 设置播放窗口宽度height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的,具体如下
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
推荐的兼容写法
<video controls autoplay>
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉，浏览器要换了！
</video>方法：load() 加载、play() 播放、pause() 暂停
属性：
事件：
全屏：video.webkitRequestFullScreen();
描述：当用户输入数据后，下拉菜单会自动匹配以输入数据开头的内容，匹配到的会自动加入到下拉菜单中。 支持的浏览器版本为IE9以上。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能下拉菜单</title>
<!--[if lte ie 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
</head>
<body>
<form action="">
<input type="text" list="car">
<datalist id="car">
<option value="1">1</option>
<option value="11">11</option>
<option value="112">112</option>
<option value="23">23</option>
<option value="676">676</option>
</datalist>
</form>
</body>
</html>伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
email 输入email格式tel 手机号码 url 只能输入url格式number 只能输入数字search 搜索框range 范围 滑动条color 拾色器time 时间date 日期， 不是绝对的datetime 时间日期month 月份week 星期
注意：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
<datalist> 数据列表，与input 配合使用。
例如：
<input type=”text” list=”data”>
<datalist id=”data”>
<option>男</option>
<option>女</option>
</datalist><keygen> 生成加密字符串keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键， 一个是私钥，一个公钥。<output> 不可当做数据提交。<meter> 表示度量器，不建议用作进度条<progress></progress> <meter value="81" min="0" max="100" low="60" high="80" />
Max-width 最大值
Min-width 最小值
placeholder 占位符autofocus 获取焦点multiple 文件上传多选或多个邮箱地址autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)form 指定表单项属于哪个form，处理复杂表单时会需要novalidate 关闭验证，可用于<form>标签required 必填项setCustomValidity用于设置验证不通过时的 提示文字pattern 正则表达式 验证表单
例如： 手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">
表单重写没有提及，自行验证，共包含应用于提交按钮上，如：<input type="submit" formaction="xxx.php">
oninput 用户输入内容时触发，可用于移动端输入字数统计oninvalid 验证不通过时触发