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


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

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

前端 web前端开发 css 前端设计 前端工程师

山田大魔王 11 years, 11 months ago

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

fateben answered 11 years, 11 months ago

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

你是个刚度腻子 answered 11 years, 11 months ago

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

第二个是加在最外层

美希命社长 answered 11 years, 11 months ago

第一个问题:跟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阶段,标签是这样分类的:

图片描述

mashan answered 11 years, 11 months ago

Your Answer