html之标签内联块元素的那些事

这几天经常看到inline和block元素，inline，block……那么我们索性就来了解一下html中哪些是内联元素，哪些又是块元素呢？我们来看一下常见的语义化标签

块级元素（block）：自动占据一行的，通过设置高度，宽度可以直接改变大小

div，h1 ~ h6，p，ul，ol，dl，li，form，table，menu，address，pre，blockquote，hr，noscript

内联元素（inline）：不占行的，依附于块级元素存在，直接修改高度，宽度一般是无效的

a，span，label，input，select，textarea，img，strong，em，code，br

可变元素：随环境变化，根据上下文语境确定

button，iframe，onjecct，map，script，applet，

了解了这些问题后，就涉及到代码规范问题了，比如说，

块级元素可以包含内联元素和块级元素，但内联元素不能包含块级元素，就好比如是，块级元素是一个大容器，内联元素是一个小容器，大容器明显可以存放小容器的，那小容器能存放大容器么？请自行脑补。此外，块级元素是以新行开始的，顾名思义，相当于一块；内联元素是行内元素，不换行。

ok，既然说到这里，我们来说说文档流吧。

传说中，文档流是一个很神奇的鬼，文档由左上角开始流，自上而下，由左向右，随波逐流，把窗体分成一行行，一列列，将其切割开，“嘶嘶嘶”，而块状元素默认占据的位置是一整行。网页中大部分对象是占用文档流的，也有的自成一派，慢慢的，就衍生成了野鬼，脱离了文档流，比如说：

float（浮动），浮动元素不占任何文档流空间，但定位还是基于正常的文档流

fixed（固定定位），相对于视区进行偏移，比如说部分网站的导航栏

absolute（绝对定位），相对于父元素进行偏移

那不免要说下他们的兄弟了，relative，是相对于原本的位置进行偏移，还是比较乖的一个小孩，是占用文档流的

先分享到这，如有言语，敬请交流哈~~~