--- front-end problems encountered with novices "html5 scenarios, css property is reset, axios advantage of" knowledge

Problem stems know almost --3 + 1 prodigal son Excalibur teacher's daily front end of the interview, I was only here to provide problem-solving solutions and ideas for everyone, thank prodigal son Excalibur teacher.

  1. [Html] a label can then be nested a label? why? If not, then how you want to solve it nested effect?

  2. [Css] css's height: What is the difference between inherit: 100% and height?

  3. [Js] to write a string method removes all adjacent duplicate entries

One problem: [html] a label can then be nested a label? why? If not, then how you want to solve it nested effect?

The "internal elements can be nested inline block elements and block element inner portion, inline elements can be nested block elements" should be no problem.

In order to verify the next, I wrote a piece of code.

<body>
	<a href="https://zhuanlan.zhihu.com/p/106367296">外层的a标签<a href="https://www.runoob.com/cssref/css3-pr-all.html">a内层的a标签</a></a>
	<div><a href="https://www.runoob.com/cssref/css3-pr-all.html">div内层的a标签</a></div>
</body>

After the practice was found, a div tag and the inner layer of the inner layer of a label can be a normal jump, is it can be nested thing? It is with uncertain heart opens browser resolution.

Browser parses

Shocked, so in fact, a label can no longer nest a tag, no error is because the browser helped him a hand.

View the MDN HTML <a> elements (also known as anchor element)

Allow the parent element Accepts any element or phrase content of any element receiving streaming content, but has not accepted <a> elements (according to the logic principle symmetrical, as if the parent element mark <a> not interactive content, the same content <a> You can not have a parent element mark <a>).

Also add the nexttarget 属性知识

This attribute specifies where to display links in the resource. Value browsing context name or other keywords to label (tab), windows (window), or frame (iframe) and so on.

 

Question two: [css] css's height: What is the difference between inherit: 100% and height?

A CSS calculated value is the value of this attribute inheritance property steering subclasses of the parent class. It is calculated by specifying the value:

  • Processing special value  inherit, initialunsetand  revert.
  • Calculated values ​​in a row in order to achieve the properties described in the Abstract, "calc."

 inherit Categories such that the acquired element of the parent element Calcd . It can be applied to any CSS property, including CSS shorthand  all.

For inherited property, inherit keyword only enhance the default behavior of the property, only to be used in a heavy load (overload) when other rules. For non-inherited properties, inherit this specific behavior is usually not make much sense to use general use  initialor unset as an alternative.

Always inherited from the parent element in the document tree, even if the parent element is not included blocks.

For some attributes (e.g.  width,  margin-right,  text-indent, and  topafter), the percentage of these elements needs to know the layout determination, their "percentage value" is converted to "percentage of the calculated value."

Through the above case, it is clear that you can know the difference. inherit keyword is direct access to the calculated value of the parent element, equal to a direct copy of the same value. While the percentage you need to know to determine the layout, which led to the child element, if floated, it flows out of the document. The percentage is based on the value of the nearest parent element floating basis.

The following is the percentage effect of the use of child elements from floating.

1 is a parent element floating outermost layer, the second layer 2 is embedded in a floating, static 3

Code below, there is a need students can experience self-

<div style="width: 400px;height: 400px;background-color: #E6E6E6;position: absolute;">
	<div style="width: 300px;height: 300px;background-color: #32AF53;position: absolute;">
		<div style="width: 200px; height: 200px;background-color: #E6E6E6;padding: 20px;position: static;">
			<div style="width: 100px;height: 100%;background-color: cadetblue;position: absolute;"></div>
		</div>
	</div>
</div>

In contrast, this effect is employed inherit keyword, the sub-elements from floating. Internal value is a direct copy of the parent element, the float is not affected.

code show as below

<div style="width: 200px; height: 200px;background-color: #E6E6E6;padding: 20px;position: static;">
	<div style="width: 100px;height: inherit;background-color: cadetblue;position: absolute;"></div>
</div>

 

supplement:

The position is used to set the element positioning type, there is absolute ( absolute positioning ), relative (relative positioning), static (static positioning, the default value), Fixed (fixedly positioned) four.

Question three: [js] to write a string method removes all adjacent duplicate entries

The method of increasing the String attribute can take an increased passage, String.prototype.toMoney = function () {return '2345'}, but can not get rid of the attribute name. You can only use the function.

 

 

 

Published 34 original articles · won praise 0 · Views 681

Guess you like

Origin blog.csdn.net/qq_18547381/article/details/104274464