Small css details

1. visibility hidden elements do not cause reflow and repaint (backflow and re-painting), while display is opposite, at the same time, hiding visibility will not lead to inter-resource connection (that is, when the child element is visible, it will not be affected by parent-level den );

2. When text-indent is hidden with a negative margin, additional performance loss is generated, and it can only apply to blocks. table cells and inline-block attribute elements also generate dashed boxes, can be replaced by font: 0/0 'songti;

3. When a hidden element is combined with height: 0; overflow: hidden, when its child element contains position: absolute or fixed (the parent element has no position attribute ), this will cause the hidden "invalid" (that is, the child element is not affected by the cut. Note: When the width of the parent element is also set to 0, IE6 and 7 May have a strange "bug" to hide sub-elements. The reason for this is that the bug occurs because the IE debugging tool can be used to hide parent-level sub-elements, if you have any questions, please reply );

4. position: absolute. An element that does not apply the left/top attribute values is a common element that does not occupy space, that is, this element can normally inherit attributes such as the parent text-align (Note: The alignment after its inheritance is based on its own left side, such as defining text-align: right, it depends on the rightmost of the parent level on its leftmost side. If it is a bit difficult to test, it will be more clear: <div style = "text-align: right; "> <div style =" border: 1px solid red; width: 500px; height: 500px; position: absolute; "> </div> );