1. width is a ray
Many pages require adaptive width, so set the width to a percentage. Otherwise, the block elements will easily become a dog skin plaster that does not stick.
When the width of an element is not defined, the browser fills up the whole line. In fact, the following operations are performed: width: auto, and width adaptive.
2. IE6 does not know Min-height
The solution is _ height. Sometimes the variable height is not needed. If you like Min-height without principle, remember to use _ height to deal with IE6.
3. Float and clear
Float and absolute positioning will destroy normal document streams. Normal streams are top-down, while float is a stream from left to right or from right to left.
Clear is only for the last floating element. If there is no floating element above, what do you want to clear?
The so-called clear floating, I think it is relative to the previous floating element, another line.
4. Difference between position relative and static
Relative is relative to the location of its normal stream, while static is the normal stream of the document, that is, the default situation of the Document Stream.
Generally, relative follows the top and left values. You can also use right and bottom, but remember that everything is relative to your normal stream.
If you set the position to relative, absolute, or fixed, the element will overwrite the element without the position attribute. If you do not set the static position, consider it as not.
This indicates that the position weight in the hierarchical relationship is high. Of course, if the position has a higher priority than the Z-index and Z-index values, otherwise, the position value is higher than the value not set,
Then, if no position is set, the elements at the following position will overwrite the preceding elements in the Document Stream order.
5,Z-index andOverflow
Use the Z-index attribute to set the stacking sequence of elements. Then, elements with higher stacking order will always be in front of elements with lower stacking order.
However, the Z-index attribute is only useful when the position attribute of the node is relative, absolute or fixed.
When a normal flow overflows, you can select the scroll or hidden attribute of overflow.
What is overflow? For example, if the height defined by the parent element is 100 and that defined by the child element is 150, the 50 that cannot be supported is overflow.
Therefore, overflow only occurs when the child element overflows the parent element. To solve the overflow problem, you only need to add an overflow attribute to the parent element.
The normal flow of sibling elements does not overflow, but when the child element relative, it also overwrites, but this is out of the overflow jurisdiction.
Of course, parent-level overflow is equally effective for child-level elements that overflow due to relative.
6. If IE has a bug, contact haslayout.
Haslayout is a unique attribute of IE. Many magical bugs in IE are related to haslayout. Remember that some styles will trigger haslayout. The most commonly used one is ZOOM: 1.
Haslayout = true <Table> <TD> <body> <HR> <input> <SELECT> <textarea> <button> <IFRAME> <embed> <object> <APPLET> <marquee> some attributes can trigger the value of haslayout --------------------------------- display to start haslayout: value of haslayout canceled by inline-block: value of other values ------------------------------------ width/height for starting haslayout: value other than auto for canceling haslayout: Value of starting haslayout by Auto Adjust position: the value of absolute to cancel haslayout: static -------------------------------------- float to start haslayout: Left or right to cancel the value of haslayout: none; zoom (ie private attribute) to start haslayout: value for canceling haslayout: narmal or null -------------------------------------------- IE7. There are some additional attributes that can trigger this attribute: Min-Height: (any value) max-Height: (any value except none) min-width: (any value) max-width: (any value except none) overflow: (any value except visible) overflow-X: (any value except visible) overflow-Y: (any value except visible) 5 position: fixed
7. Magical W3C collapse
Don't talk about anything. Check the effect first.
<style>#a{background-color: red;height:130px;width:200px;margin-bottom: 20px;}#sub_a{margin-top:30px;background-color: blue;height:100px;width:150px;}</style><div id="a"><div id="sub_a"></div></div>
This is the problem of adding collapsing-margin to the outer margin. collapsing is not a browser bug but a W3C standard. See the following section:
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
In CSS,Two or more adjacent elements (parent and child elements or sibling elements)OfNormal streamInBlock ElementVerticalMargin overwrites. The outer margin formed in this way is called the outer margin overlay (collapsed margin ).
Just like me, cainiao will study this article.
Http://www.smallni.com/collapsing-margin/
Avoid overlay the outer margin. In fact, it is easy to destroy any of the four necessary conditions (two or more, adjacent, vertical, and normal streams) where the outer margin is superimposed.
Let's talk about "adjacent". Only by understanding the concept of "adjacent" Can elements not be adjacent to each other to avoid overlay margins.
Adjacent not only between sibling elements, but also between parent and child elements. The outer margin overlay between elements can only be called adjacent in four situations:
The elements in the preceding four cases may collapse the margin (the last one is the element itself), but note that the conditions for the above four relationships to form an adjacent link are also added: elements are notNon-empty content,Padding,BorderOrClearSeparated.
From: http://www.cnblogs.com/yingzi/archive/2012/04/13/2445667.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
