常见的块级元素
div、p、h1~h6、ul、li、ol、dl、dd、dt、table、hr、blockquote、address、pre、menu
h5新增 header、footer、aside、section
块级元素
display：block;
特点 ：独占一行，可设置宽度和高度，可设置padding和margin
常见的行内元素
span、a、label、sup、sub、abbr、s、i、em、u、strong、small
行内元素
display：inline;
特点 ：不能独占一行，在一行之内，不可设置宽度和高度，可设置padding和margin的左右部分值，上下值不能设置
块级元素和行内元素的高度不设置时自动由内容撑开，块级元素的宽度默认是100%，就是父级元素的宽度，行内元素的宽度由内容撑开
行内元素想设置宽高
display设置为：inline-block，成为行内块元素
将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内
当元素设置为inline-block既行内块元素时会与父元素底部有间隙，常见的就是img距底部有2~3px的像素，排列的行内块元素上下不对齐，比如input之后跟button按钮两个标签对不齐
原因是 vertical-align属性继承的父级元素为baseline
图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙
解决方案
1 修改元素的vertical-align为bottom
2 设置浮动
3 父级 设置font-size：0
4 父级直接设置为弹性盒，不需要注意的是父级为弹性盒，子块默认是继承父级的高度
table 的td 不是行内元素也不是块级元素，更不是行内块元素，他的display值为table-cell，是多目标块状元素，他支持CSS的height样式，但是不支持height属性
常见的的行内块元素 img、input、textarea、select，也叫替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。(X)HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。