从0到1.CSS进阶之旅 (莫振杰) (Z-Library)

# 【One-Line Pitch】 A practical, example-driven CSS intermediate guide that takes you from basic selectors and units through box model, display tricks, float/positioning layouts, and CSS-drawn graphics — ideal for front-end developers who know some CSS but want to master the "why" behind layout behavior and pick up battle-tested techniques. # 【Book Arc】 - **Opening (~0%–9%)**: Covers CSS fundamentals — units (px, em, rem, %), cascade and specificity rules, selector types (descendant, child, sibling), pseudo-elements, and the three stylesheet approaches. Solves the "why does my style not apply" confusion. - **Early (~17%–26%)**: Deep dive into the box model — content, padding, border, margin, margin collapsing (sibling, parent-child, empty elements), negative margin techniques, and the first look at clearing floats with overflow:hidden. Establishes the mental model for all layout work. - **Early (~26%–30%)**: Explores the display property — inline-block behavior, simulating buttons with anchors, display:none vs visibility:hidden, and the powerful display:table-cell for vertical centering, equal-height columns, and auto-even distribution. - **Middle (~35%–43%)**: Text effects — text-indent tricks (including the -9999px SEO technique), text-align vs margin:auto for centering, and line-height inheritance quirks. Also touches form styling (textarea resize control). - **Middle (~48%–52%)**: Float and positioning layouts — normal flow vs out-of-flow, float behavior with siblings, the "height collapse" side effect, and the recommended ::after clearfix solution. Then positioning: relative parent + absolute child patterns for sub-navigation and precise placement. - **Late (~52%+)**: CSS graphics — triangles, rounded corners, circles, and ellipses built purely with CSS to avoid image HTTP requests, plus performance rationale for "fewer images" design. # 【Key Takeaways】 - **Units have precise reference points** (Early): px is absolute, % refers to the parent's same property, em refers to the current element's font-size, rem refers to the root html font-size. Mixing them wrongly causes mysterious sizing bugs — check the reference before writing. - **Cascade follows "last one wins" only under equal weight** (Early): For the same element and property, the later rule wins only when selector weights match. Weight calculation applies to specified styles, not inherited ones — inherited styles always lose to specified styles. - **Selector weight cannot judge inherited styles** (Early): A high-weight selector targeting an ancestor does not override a lower-weight selector targeting the element itself. Understand the difference between "specified" and "inherited" to debug style conflicts. - **Margin collapsing is a three-case trap** (Early): Adjacent siblings, parent-child pairs without padding/border separation, and empty elements all merge vertical margins. Negative margins can pull elements or subsequent siblings — a core technique for centering and tab designs. - **display:table-cell is a layout "artifact"** (Early): It gives elements td-like behavior — perfect for vertical centering of variable-size images, equal-height columns, and auto-even division of list items without specifying widths. IE8+ support makes it safe for modern use. - **Clearing floats properly requires ::after** (Middle): overflow:hidden works but hides overflowing content (a "small bomb"); clear:both needs extra HTML tags. The .clearfix::after pattern with clear:both, content:"", and display:block is the production-standard solution. - **Float changes element display behavior** (Middle): Inline elements become block-level when floated, allowing width/height/margin. Floated elements leave normal flow, causing parent height collapse — always plan for clearing. - **CSS graphics beat images for performance** (Late): Triangles, circles, and ellipses via CSS avoid image file size and extra HTTP requests. Use border tricks and border-radius instead of image assets for simple shapes. # 【Reading Tips】 - **Skim Chapter 1's selector catalog** if you already know basic CSS; but deep-read the specificity and inheritance sections (1.4) — they explain the most common real-world debugging confusion. - **Work through the box model chapter with a browser console open** — the book explicitly shows how to verify computed values (e.g., 200px × 50% = 100px). Reproduce the margin collapsing examples yourself. - **Treat Chapter 4 (display) as a reference for "when to use what"** — the table-cell section is the most valuable; bookmark the three use cases (vertical centering, equal height, even distribution). - **For float/positioning (Chapters 7–8), focus on the "why"** — normal flow vs out-of-flow is the theoretical foundation. The clearfix pattern is a must-memorize snippet; the positioning patterns (relative parent + absolute child) are reusable for nav menus. - **Skim Chapter 9 (CSS graphics)** — the triangle and border-radius techniques are quick wins; don't over-invest unless you need custom shapes. # 【Coverage Limits】 Excerpts cover roughly the first half of the book (through positioning and the start of CSS graphics). Later chapters on performance optimization, CSS techniques, important concepts, HTML appendix, and interview questions are not covered in this guide. #