Traps to Developers

Summary

A summarization of some traps to developers. There traps are unintuitive things that are easily misunderstood and cause bugs. Summarization of traps​ HTML and CSS​ min-width is auto by default. min-width: auto makes min width determined by content. It has higher priority than many other CSS attributes including flex-shrink, overflow: hidden, width: 0 and max-width: 100%. It's recommended to set min-width: 0. Horizontal and vertical are different in CSS: Normally width: auto tries fill available space in parent. But height: auto normally tries to just expand to fit content. For inline elements, inline-block elements and float elements, width: atuo does not try to expand. margin: 0 auto centers horizontally. But margin: auto 0 normally become margin: 0 0 which does not center vertically. In a flexbox with flex-direction: column, margin: auto 0 can center vertically. Margin collapse happens vertically but not horizontally. The above flips when layout direction flips (e.g. writing-mode: vertical-rl) Block formatting context (BFC): display: flow-root creates a BFC. (There are other ways to create BFC, like overflow: hidden, overflow: auto, overflow: scroll, display:table, but with side effects) Margin collapse. Two vertically touching siblings can overlap margin. Child margin can "leak" outside of parent. Margin collapse can be avoided by BFC. Margin collapse also doesn't happen when border or padding spcified If a parent only contains floating children, the parent's height will collapse to 0. Can be fixed by BFC. Stacking context. In these cases, it will start a new stacking context: The attributes that give special rendering effects (transform, filter, perspective, mask, opacity etc.) will create a new stacking context position: fixed or position: sticky creates a stacking context Specifies z-index and position is absolute or relative Specifies z-index and the element is inside flexbox or grid isolation: isolate ... Stacking context can cause these behaviors: z-index d...