行内元素中加块级元素问题？

Question

行内元素之中不能加入块级元素这是我们众所周知的，比如a里面不能加div，但是如果a标签的display为block，设置其为块级化了，这个时候可以往里面加块级元素吗？

还有一个问题，我们一般会看到这样一种情况，一个列表，里面有很多条数据，我们需要点击每一条数据跳转到指定详情页，而且每条数据之中的结构比较复杂，应该怎么做跳转呢？加a标签？那a标签加在哪里，最外层还是什么？还是要用js做跳转？

Answer 1

第一个问题：跟CSS半毛钱关系都没有，跟doctype声明有关。
在h4的任何doctype声明下，都不允许a嵌套div，而html5的doctype声明下允许a嵌套div。

“a不允许嵌套div”这种约束属于语义约束，与之区别的约束还有严格约束，比如“a不允许嵌套a”。
严格约束在所有的浏览器下都不被允许；而语义约束，浏览器大多会容错处理，生成的文档树可能相互不太一样（由于标准没有定义容错行为）。

因此你才会经常看到“不要在a里面包含div”的说法。它不符合标准，而且可能会导致偏离期望的结果。
可以读一下这篇文章了解更多关于语义嵌套约束在不同浏览器中的不同解析结果。

---

在http://www.w3.org/TR/html4/loose.dtd里，我们可以找到这样的定义：

<!--
    HTML has two basic content models:

        %inline;     character level elements and text strings
        %block;      block-like elements e.g. paragraphs and lists
-->

这里的inline和block和CSS里面的inline和block有关系吗？
有一定关系，由于HTML划分了这些标签，CSS上才根据语义默认他们是display: inline或display: block。
但他们的关系仅此而已，html层面的inline和block仅仅是区分html标签的方式，和他们最终呈现出来的display属性无关。

为什么无关？稍微了解一下浏览器的工作流程：

浏览器“解析文档并构建文档树”——即parse阶段——在“结合CSS生成Rendering Tree”之前，parse阶段CSS属性对其并无影响。

---

最后，只有html 4阶段把标签归类为inline标签和block标签。

在html 5阶段，标签是这样分类的：

Answer 2

第一个问题大答案是 可以加的

第二个是加在最外层

Answer 3

1：可以加
2：按照你说的“每条数据之中的结构比较复杂”，就可以按照第一种方法把a标签的display为block，这样就可以加到外层了

Answer 4

a标签在html5的版本可以包裹大部分的标签，即使没有设置为block，你可以动手试试看