Front End summary: stepped on the pit and some cold knowledge

CSS

CSS style This is a lot of pits, some situations do not follow the common sense of the card, in the precise control of style and size will encounter these pits. 1,

Inline elements, such as IMG, default to the end (or bottom) to leave white/gap, cannot be removed. Workaround: Make it appear as block-level elements by Display:block. (Note also the text-align:center of the parent element setting, only valid for inline elements, and after changing to block display, you need to add margin-left to the center position.) ) 2,

Adjacent two-story Div, the inner layer plus margin and outer add padding effect is not the same ....
The outer layer adds the padding display effect to be common sense, if is the inner level adds the margin, the left and right margin displays the normal, but up and down margin can express to the parent level div above, this lets the person puzzling.
If the inner layer is added to the float:left, it will eliminate the inner layer effect, but this is essentially to let the inner layer out of the outer structure control. 3,

Through JS to change the DOM node classname, according to the classname corresponding CSS style changes the appearance of the node, this is beyond doubt. However, if you immediately follow an alert (), the classname of the DOM node changes, but the CSS is not yet rendered, and the render is paused after the alert is popped.
Target.classname = ' Change '
Alert (111);
When alert is identified, Target does not exhibit the appearance of the classname counterpart. 4,

To control the vertical centering of a span within the parent layer, the following conditions must be met:
A parent-layer element (such as p,div) specifies line-height;
B to span at the same time specify Display:inline-block;
Line-height:1.4em;
Vertical-align:middle; These 3 attribute restrictions. 5,

To achieve the center effect in CSS:
A, text-align:center;
B, Flex layout
C, Position:absolute;
Overflow:hidden;
z-index:200;
top:50%;
left:50%;
Transform:translate ( -50%,-50%); 6,

about what position and float have to know. float

property specifies whether a box (element) should float, and an absolute element ignores the float property.
left element floats to the ieft.
Right element floats to the left.
None default value. The element does not float and is displayed where it appears in the text.
inherit specify that the value of the float attribute should be inherited from the parent element. position

Default value static
Absolute
Generates an absolutely positioned element that is positioned relative to the first parent element other than static positioning.
The position of the element is defined by the "left", "Top", "right" and "bottom" properties.
fixed
Generates an absolutely positioned element that is positioned relative to the browser window.
The position of the element is defined by the "left", "Top", "right" and "bottom" properties.
relative
Generates a relatively positioned element that is positioned relative to its normal position.
Therefore, "left:20" adds 20 pixels to the left position of the element.
static default value. There is no positioning, and the elements appear in the normal stream (ignoring top, bottom, leave, right, or z-index declarations).
inherit specify that the value of the position attribute should be inherited from the parent element. Html/js

1, the first thing to note is that <script> is a double tag tag, the following wording is necessarily not.

<script src= "js/xxx.js"/>//error <script src= "Js/xxx.js

" ></script>//correct

Time to copy the code from other places to come, it was the problem to the pit.