前端新手遇到的问题 ---含“ html5嵌套、height:100%和height:inherit差异、删除字符串”知识

问题源自知乎—浪子神剑老师的前端面试每日 3+1，我仅在此为大家提供解题方案以及思路，在此感谢浪子神剑老师。

1. [html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？

2. [css] css的height:100%和height:inherit之间有什么区别呢？

3. [js] 写一个方法删除字符串中所有相邻重复的项

问题一：[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？

根据“块元素内部可以嵌套内联元素以及部分块元素，内联元素内部可以嵌套块元素”应该没问题。

为了验证下，我写了段代码。

	外层的a标签a内层的a标签
	
div内层的a标签

实践后发现，a内层的a标签和div内层的a标签都可以正常跳转，难道是可以嵌套嘛？我怀着不确定的心打开了浏览器解析。

惊呆了，所以其实a标签不可以再嵌套a标签的，没报错是因为浏览器帮助了他一把。

查看MDN的HTML 元素（或称锚元素）

允许的父元素	接受短语内容的任何元素或接受流内容的任何元素，但始终不接受 元素（根据对称的逻辑原理，如果 标记作为父元素，不能具有交互内容，则相同的 内容不能具有 标记作为其父元素）。

另外补充下target 属性知识

该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。

 

问题二：[css] css的height:100%和height:inherit之间有什么区别呢？

一个CSS属性的计算值是指这个属性在由父类转向子类的继承中的值。它通过指定值计算出来：

• 处理特殊的值 inherit，initial， unset和 revert。
• 进行计算，以达到属性摘要中“计算值”行中描述的值。

 inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何CSS属性，包括CSS简写 all。

对于继承属性，inherit 关键字只是增强了属性的默认行为，只有在重载(overload)其它规则的时候被使用。对于非继承属性，inherit 这指定的行为通常没有多大意义，一般使用使用 initial 或 unset 作为替代。

继承始终来自文档树中的父元素，即使父元素不是包含块。

对于有些属性(如 width, margin-right, text-indent, 和 top)，这些元素的百分比需要布局确定后才能知道，它们的“百分比值”会转换成“百分比的计算值”。

通过上面的话，很明显就可以知道差异了。inherit 关键字是直接获取父元素的计算值，等于直接复制了一个同值。而百分比则需要在布局确定后知道，这就导致了如果子元素浮动起来，则其脱离文档流。百分比的值则是以离它最近的浮动父元素为基准。

下面是采用百分比后，子元素发生浮动时的效果。

1为最外层浮动父元素，2为第二层内嵌浮动，3为静态

代码如下，有需要的同学可以自行感受

对比，这个是采用inherit 关键字时，子元素发生浮动的效果。内部值是根据父元素直接复制的，所以不受浮动影响。

代码如下

 

补充：

position用来设定元素的定位类型，有absolute（绝对定位）、relative（相对定位）、static（静态定位，默认值）、fixed（固定定位）四种。

问题三：[js] 写一个方法删除字符串中所有相邻重复的项

增加String方法只能走属性增加的路，String.prototype.toMoney = function(){return '2345'}，可是还不能改掉属性名。所以只能使用函数了。