目录
CSS Unicode字体
font-weight:字体粗细
数字 400 等价于 normal，而 700 等价于 bold
font-style:字体风格
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
(平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式)
font:综合设置字体样式 (重点)
选择器{font: font-style font-weight font-size/line-height font-family;}
(使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性。)
CSS外观属性
color:文本颜色
取值方式有三种
1.预定义的颜色值，red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等(最常用)
3.3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
line-height:行间距
三种方式分别为像素px(最常用)，相对值em和百分比%
text-align:水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
(是让盒子里面的内容水平居中， 而不是让盒子居中对齐)
text-indent:首行缩进
数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
text-decoration 文本的装饰
none默认。定义标准的文本。
underline定义文本下的一条线。下划线也是我们链接自带的
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
CSS复合选择器
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
并集选择器
各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等）
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
后代选择器
外层标签写在前面，内层标签写在后面，中间用空格分隔
子元素选择器
父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。(亲儿子 不包含孙子 重孙子之类)
伪类选择器
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
标签显示模式（display）
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1~h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
CSS书写规范
选择器 与 { 之间必须包含空格。
示例： .selector { }
属性名与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：font-size: 12px;
选择器规范
当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
属性规范
属性定义必须另起一行。
属性定义后必须以分号结尾
CSS 三大特性
CSS层叠性
CSS继承性
CSS优先级
CSS特殊性（Specificity）
继承或者* 的贡献值0,0,0,0
每个元素（标签）贡献值为0,0,0,1
每个类，伪类贡献值为0,0,1,0
每个ID贡献值为0,1,0,0
每个行内样式贡献值1,0,0,0
每个!important贡献值∞ 无穷大
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
CSS 背景(background)
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景图片(image)
background-image : none | url (url)
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
小技巧： 我们提倡 背景图片后面的地址，url不要加引号
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
背景位置(position)
background-position : length || length
background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
相对于内容框来定位背景图像
background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-clip 属性规定背景的绘制区域。
背景附着
background-attachment : scroll | fixed
设置或检索背景图像是随对象内容滚动还是固定的。
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
background: rgba(0,0,0,0.3);
导航栏案例
使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
盒子模型（CSS重点）
盒子边框（border）
border : border-width || border-style || border-color
边框属性—设置边框样式（border-style）
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
上边框
border-top-style:样式;
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度 样式 颜色;
样式综合设置
border-style:上边 [右边 下边 左边];
none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置
border-width:上边 [右边 下边 左边];
像素值颜色综合设置
border-color:上边 [右边 下边 左边];
颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置
border:四边宽度 四边样式 四边颜色;
表格的细线边框
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
border-radius: 左上角 右上角 右下角 左下角;
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
1个值
padding：上下左右边距
比如padding: 3px; 表示上下左右都是3像素
2个值
padding: 上下边距 左右边距
比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值
padding：上边距 左右边距 下边距
比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值
padding:上内边距 右内边距 下内边距 左内边距
比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
.header{ width:960px; margin:0 auto;}
文字盒子居中图片和背景区别
1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto
3. 插入图片 我们用的最多 比如产品展示类
4. 背景图片我们一般用于小图标背景 或者 超大背景图片
清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。
content宽度和高度
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。
盒子模型布局稳定性
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做
圆角边框(CSS3)
border-radius: 50%; 让一个正方形 变成圆圈
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写默认 想要内阴影 inset
浮动(float)
普通流(normal flow)
浮动(float)
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
选择器{float:属性值;}
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）
版心和布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
选择器{clear:属性值;}
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响
额外标签法
<div style=”clear:both”></div>
父级添加overflow属性方法
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
定位(position)
background-position 背景定位
元素的定位属性
1、边偏移
top顶端偏移量，定义元素相对于其父元素上边线的距离
bottom底部偏移量，定义元素相对于其父元素下边线的距离
left左侧偏移量，定义元素相对于其父元素左边线的距离
right右侧偏移量，定义元素相对于其父元素右边线的距离
2、定位模式(定位的分类)
选择器{position:属性值;}
防止拖拽文本域resize
static自动定位（默认定位方式）
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于其上一个已经定位的父元素进行定位
fixed固定定位，相对于浏览器窗口进行定位
静态定位(static)
可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
相对定位relative(自恋型)
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留
绝对定位absolute (拼爹型)
绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位的盒子水平/垂直居中
1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。
当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
定位模式转换
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，
CSS高级技巧-元素的显示与隐藏
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
CSS用户界面样式
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
轮廓 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0; 或者 outline: none;
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐
基线对齐 顶部对齐 垂直居中 底部对齐
溢出的文字隐藏
white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal : 默认处理方式
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
可以处理中文
text-overflow 文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用
精灵图
要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
字体图标
文件放入到 fonts文件夹里面
在样式里面声明字体： 告诉别人我们自己定义的字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
给盒子使用字体
span {
font-family: "icomoon";
}
盒子里面添加结构
span::before {
content: "\e900";
}
或者
<span></span>
追加新图标到原来库里面
把压缩包里面的selection.json 从新上传
推荐网站：http://icomoon.io
icomoon字库
推荐网站： http://www.iconfont.cn/
阿里icon font字库
http://www.iconfont.cn/
fontello
http://fontello.com/
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
Glyphicon Halflings
http://glyphicons.com/
Icons8
https://icons8.com/
HTML新标签与特性
HTML: sublime 输入 html:4s
XHTML: sublime 输入 html:xt
HTML5 sublime 输入 html:5
常用新标签
- header：定义文档的页眉 头部
- nav：定义导航链接的部分
- footer：定义文档或节的页脚 底部
- article：定义文章。
- section：定义文档中的节（section、区段）
- aside：定义其所处内容之外的内容 侧边
- datalist 标签定义选项列表。请与 input 元素配合使用该元素
<input type="text" value="输入明星" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>刘德华</option>
<option>刘若英</option>
</datalist>
- fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
<fieldset>
<legend>用户登录</legend> 标题
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>
新增的input type属性值：
类型********使用示例********含义********
email******<input type="email">输入邮箱格式
tel******<input type="tel">输入手机号码格式
url******<input type="url">输入url格式
number******<input type="number">输入数字格式
search******<input type="search">搜索框（体现语义化
range******<input type="range">自由拖动滑块
time******<input type="time">小时分钟
date******<input type="date">年月日
datetime******<input type="datetime">时间
month******<input type="month">月年
week******<input type="week">星期 年
常用新属性
属性********用法********含义********
placeholder******<input type="text" placeholder="请输入用户名">占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus******<input type="text" autofocus>规定当页面加载时 input 元素应该自动获得焦点
multiple******<input type="file" multiple>多文件上传
autocomplete******<input type="text" autocomplete="off">规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字
required******<input type="text" required>必填项 内容不能为空
accesskey******<input type="text" accesskey="s">规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
多媒体标签
多媒体 embed（会使用）
多媒体 audio
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
多媒体 video
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
CSS3 新增选择器
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
目标伪类选择器(CSS3)
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
伪元素选择器（CSS3)
1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；
CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素
背景缩放(CSS3)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
多背景(CSS3)
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
凹凸文字
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
过渡(CSS3)
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开
2D变形(CSS3) transform
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 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)
step-start： 等同于 steps(1, start)
step-end： 等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
infinite： 无限循环
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
addEventListener() 方法用于向指定元素添加事件句柄。
touchstart
开始触摸事件
touchmove
手指滑动事件
touchend
触摸结束事件
touchcancel
触摸意外中断事件
div.addEventListener("touchstart",function(){
console.log("touchstart");
});
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
层叠顺序（stacking level）与堆栈上下文（stacking context）
形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
