CSS Related details Optimization memo

<p> tags can no longer contain <p&gt, and cannot contain <div>,<div> may contain <p>A and IMG tags are special in-line elements, a tag can contain div and so on, almost all of the replaceable elements are inline elements, such as , <input> and so on, the replacement element is usually intrinsic size, so it has width and height, can be set. For example, when you do not specify the width and height of IMG, it is displayed in its intrinsic size, which is the width and height of the image when it is saved. For form elements, the browser also has a default style, including width and height. Margin-top/bottom (Padding-top/bottom) Percentage calculates the properties of the DT tag with the width of the most recent block-level ancestor element reset just wasted, increasing the page rendering load

Padding tag with very few property values, other labels without wasting time re-rendering

If there is no direct floating element, the use of clear:both is superfluous.

Inline horizontal elements do not react to many CSS styles, such as Height/width, clear, Margin-top/margin-bottom, vertical-align, overflow, etc.

Block-level elements have no effect on the Vertical-align property.

A{display:inline-block; *display:inline; *zoom:1;}
This is the Inline-block property of the set element, but the following two styles are superfluous for inline elements, because display: Inline-block allows inline horizontal elements to behave just like the true inline-block level.

Margin negative number can increase the width of the label, do not need to use width

Input, textarea Select itself has a text size that does not follow the parent tag, so it needs to be reset
input,textarea,select{font-size:100%}

text box and text field 100% Adaptive display, the cursor usually needs to keep a certain distance from the left
input{width:92%; padding-left:4%; padding-right:4%;}

According to the CSS specification, inline elements can only contain one of the block elements or inline elements. If mixed content appears, you should create an anonymous block renderer to wrap the inline elements.

Transform rotation rotate the default is to rotate the source point by 50% 50% of the element.Overflow:hidden/scroll/auto also makes the file a wrapper, able to seal the float element inside, usually to repair the float effect, reproduce to obtain the heightzoom is wrapped on IE6 7, becomes a block element, this element enlarges The width percentage is relative to the width value of the parent block element, and the font-size percent is relative to the font-size size of the outer first layer containing the Font-size attribute, and here the vertical-align, some eclectic, is determined relative to the Line-height value inherited by this tag. At the same time, wide element width defaults to 100%, but height is not, should be out of layout considerations.  Hide scroll bar document.body.style.overflow= "hidden";pseudo-elements are written in CSS3: After, both begin with a double colon, and CSS2 is written like this: After, and the pseudo-element (pseudo element) and the Pseudo-class (pseudo classes) are distinguished, they have a pseudo-class notation, But it is not pseudo-class, there are only 5 known pseudo-elements, respectively, is a before,after,first-line,first-letter,selectionPseudo-classes can assign styles independent of the elements of a document, and can be assigned to any element, logically and functionally similar, but are predefined, do not exist in the document tree, and are expressed differently, so it is called a pseudo-class. The pseudo-element controls the same content as an element, but the pseudo-element does not exist in the document tree, and is not a true element, so it is called a pseudo-element.

CSS Related details Optimization memo