block element: 旁边不能有其他元素，元素框之前和之后生成了“分隔符”
ex:p,div,hr,ul,ol,form
通过display:block，可以让元素生成块级框
inline element: 元素之前和之后不会产生“行分隔符”
不能设置width, height, margin-top, margin-bottom
ex:a,strong,em,span,a
display:inline
行内元素的padding和margin属性
1.行内元素的width、height、margin-top、margin-bottom属性设置是无效的。
行内元素的padding-top、padding-bottom从显示的效果上是增加的，但设置是无效的。即使元素的高度增加，不会影响所在行的行高，也不会影响所在行的上下文元素的位置。并不会对他周围的元素产生任何影响，因此内边距和边框会与段落中的其他重叠。
2.对行内元素设置padding-left、padding-right、margin-left、margin-right元素会影响元素在行内的位置。
3.对行内元素input设置padding-top、padding-bottom、margin-top、margin-bottom属性时，会影响input所在行的行高。同是行内元素，但表现不同的原因在于span为不可替换元素，而input为替换元素。
inline-block:
可以设置width, height
ex:img
display:inline-block
一个元素使用display: inline-block，实现我们需要的块级的部分效果：
-设置width和height会生效。
-padding, margin, 以及border会推开其他元素。
replaced element：元素内容部分不由文档内容直接表示，只是用来作为内容占位符的一个元素
ex: img,input
img元素只是指向一个图像文件，这个文件将插入到文档流中img所在位置
大多数表单元素可以被替换
non-replaced element：元素的内容都包含在文档中，则称为非替换元素。
ex: span,div
一个p的文本都放在该元素本身之内，这个p就是非替换元素。
不能运用到行内非替换元素(span)的属性：
width height：因为高度和宽度由内容确定
vertical-align
1.块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
2.块级元素的padding和margin值的设置都是有效的。行内元素和块级元素都是盒子模型。
行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的（top bottom）
行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的（left right）
行内元素的 line-height 属性设置是有效的。
行内元素的 width、height 属性设置是无效的。
行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的，并不会对他周围的元素产生任何影响
3.strong是行内元素，它的width、height属性设置无效
4.textarea是行内元素 - 多行文本输入框，input也是行内元素
行内inline 块级block 行内块级line-block(拥有内在尺寸，可设置高宽，不会自动换行 )
