HTML中行内元素和块级元素的区别及转换

最明显的区别就是：块级元素会自动换行，而行内元素不会自动换行。

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

前一段时间因为需求，所以把这方面的资料自己查询规整了一下，以备后用。

DOMParser

对于开发者来说，我们"期盼"的最好的方式当然是原生的浏览器支持，就像下面这样

1: var parser = new DOMParser()

2: var doc = parser.parseFromString("<input />", "text/html")

Tips:

parseFromString 返回的并不仅仅是一个 input 元素的 node， 而是一个完整的 Document

这里是支持 script 标签的， 但是当解析出的 dom 被添加到页面时，script是不会被执行的

最好保证格式良好，否则可能并不会展现如我们预期的 dom 结构

遗憾的是，DOMParser 对 HTML 的解析仅仅得到了 Firefox 12+, IE 10+ 的支持，其余的浏览器均不支持，所以我们要寻求浏览器兼容性更好的方法

InnerHTML

用 javascript 写一个简易的 parser 其实并不是很难，基本的雏形就像下面这样

1: (function (DOMParser) {

2: "use strict"

3:

4: var

5: DOMParser_proto = DOMParser.prototype,

6: real_parseFromString = DOMParser_proto.parseFromString

7:

8: // Firefox/Opera/IE throw errors on unsupported types

9: try {

10: // WebKit returns null on unsupported types

11: if ((new DOMParser).parseFromString("", "text/html")) {

12: // text/html parsing is natively supported

13: return

14: }

15: } catch (ex) {}

16:

17: DOMParser_proto.parseFromString = function (markup, type) {

18: if (/^\s*text\/html\s*(?:|$)/i.test(type)) {

19: var

20: doc = document.implementation.createHTMLDocument("")

21: if (markup.toLowerCase().indexOf('<!doctype') >-1) {

22: doc.documentElement.innerHTML = markup

23: } else {

24: doc.body.innerHTML = markup

25: }

26: return doc

27: } else {

28: return real_parseFromString.apply(this, arguments)

29: }

30: }

31: }(DOMParser))

真正在使用时，我们可能不希望返回的是一个完整的 Document， 而仅仅是一个 html 片段，那采用下面的代码也许更方便

1: function parseStringToHTML(text) {

2: var i, a = document.createElement("div"),

3: b = document.createDocumentFragment()

4: a.innerHTML = text

5: while (i = a.firstChild) b.appendChild(i)

6: return b

7: }

因为一般浏览器的默认值不同，所以一般初始化在顶部会使用

*{margin:0padding:0}

强制消去所有默认边距，而一般margin是控制同级元素的距离的，

padding是控制父子元素的距离的，所有你所说的应该是同级元素，

如果这两个元素位置是上下排列，你可以设置上面元素的下边距margin-bottom:100px

或者下面元素的上边距margin-top:100px皆可实现

---