HTML标签本身是没有块级标签和行内标签之分的，都是由CSS来决定的，平常我们区分哪些是块级标签和行内标签其实就是说浏览器默认给这些标签指定的样式。
div的高度是由其内部文档流元素的高度总和决定的
-
标准盒模型(content-box)
width=内容的宽度
height=内容的高度
-
IE盒模型(border-box)
width=border + padding + 内容的宽度
height= border + padding + 内容的高度
两种模型切换的方式：
box-sizing
文档流是指文档内元素的流动方向
行内元素从左往右，块级元素从上往下
要善于利用文档流来做页面的布局，尽量减少使用
widht和height属性
行内元素默认有建议行高，根据字体的类型和大小决定
默认行高是字体大小的1.3倍
height和line-height相等，会垂直居中
fixed定位的元素只显示实际的宽度
宽度固定时，设置margin-left :aust,margin-right:auto会居中
getBoundingClientRect可以获取dom元素距离浏览器顶部的距离
使用
inline-block属性底部会有一段缝隙，要使用vertical-align:top消除bug
transition
- 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
- 可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔
- 每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
- 零或一个值，表示转换应适用的属性
- 零或一个
single-transition-timing-function值表示要使用的过渡函数 - 零，一或两个
time值。可以解析为时间的第一个值被分配给transition-duration，并且可以解析为时间的第二个值被分配给transition-delay
animation
animation属性用来指定一组或多组动画，每组之间用逗号相隔
single-animation-iteration-count
动画播放的次数。该值必须是animation-iteration-count可用的值之一。
single-animation-direction
动画播放的方向。该值必须是animation-direction可用的值之一。
single-animation-fill-mode
确定动画在执行之前和之后这两个阶段应用的样式。该值必须是animation-fill-mode可用的值之一。
single-animation-play-state
确定动画是否正在播放。该值必须是animation-play-state中可用的值之一。