CSS世界 (张鑫旭)（Z-Library）

【One-Line Pitch】 A deep-dive, experience-driven guide to the CSS 2.1 "world," organized around the metaphor of "flow" — ideal for front-end developers who already know CSS basics but want to understand why CSS behaves the way it does and break through a learning plateau. 【Book Arc】 - **Opening (~0%–10%)**: The author explains his 10-year journey and the book's mission — to go beyond CSS manuals and treat CSS as an interconnected "world," not a list of isolated properties. He introduces the core concept of "flow" (流) as the invisible mechanism that governs element layout and positioning, and contrasts CSS 2.1 with the newer, more complex CSS3 world. - **Early (~10%–23%)**: The book establishes essential terminology and the "undefined behavior" concept (browser differences that aren't bugs but unspecified spec areas). It then dives into the two fundamental element types — block-level and inline — and begins dissecting how the "flow" shapes their default behavior, including why list-item elements show bullet markers and how the box model is structured. - **Early–Middle (~23%–42%)**: A detailed exploration of width and height behavior, including the four manifestations of `width:auto` (external vs. internal sizing), the "wrapping" (包裹性) property of inline-block elements, and the "formatting width" of absolutely positioned elements. The author introduces his "no width" principle — letting flow handle horizontal space instead of hard-coding pixel values. - **Middle (~42%–48%)**: The book continues with internal sizing details: minimum content width (min-content), maximum width (max-content), and practical applications like precise scrolling with iScroll. It then transitions into the "box dimension" — how width actually applies to the inner box, comparing it to Earth's structure to explain content, padding, margin, and border relationships. - **Late (~48%–100%)**: Based on the table of contents, the remaining chapters cover inline elements and line-height/vertical-align, float and clear, BFC and overflow, absolute/fixed positioning, z-index and stacking contexts, text handling (font-size, font-family, @font-face, text-indent, etc.), and element decoration (color, borders, backgrounds). These sections apply the flow framework to practical layout and styling challenges. 【Key Takeaways】 - **CSS is a "world," not a manual** (Early): Every property interacts with others — e.g., float behavior is influenced by line-height, font, and cursor. Understanding these interconnections is the key to moving beyond rote memorization; the author explicitly rejects the idea that reading a CSS reference is sufficient. - **"Flow" is the central organizing principle** (Early): Flow is CSS's basic positioning and layout mechanism, analogous to water in the physical world — block elements fill width like water fills a container, inline elements float like wood. Most CSS 2.1 behavior can be understood as flow, its disruption (float, absolute), or its redirection. - **`width:auto` has four distinct behaviors** (Middle): External sizing (block elements fill parent width) vs. internal sizing (shrink-to-fit, minimum content width, and maximum width). Recognizing which applies helps predict layout behavior — e.g., why long unbroken text overflows a container. - **The "no width" principle saves code and maintenance** (Middle): Setting `width:100%` on block elements destroys their natural fluidity, forcing manual recalculation when container sizes change. Letting flow handle horizontal space (with margin/padding auto-allocation) creates self-adaptive layouts. - **"Wrapping" (包裹性) is a key internal-sizing behavior** (Middle): Inline-block elements size to their content but never exceed the container (unless minimum content width is larger). This makes them ideal for mixed text-and-image layouts without layout breakage. - **"Undefined behavior" explains cross-browser quirks** (Early): When browsers differ (e.g., Firefox vs. Chrome on `:active` after `preventDefault()`), it's often not a bug but an unspecified spec area. Understanding this reframes debugging and sets realistic expectations. - **The box model is layered like Earth's structure** (Middle): Width applies to the "inner box," which is composed of multiple parts (content, padding, border, margin). Visualizing this structure clarifies how `box-sizing` and width calculations actually work. 【Reading Tips】 - **Skim the opening chapters (1–2)** if you're already familiar with CSS basics — the "worldview" and terminology sections are motivational and conceptual, but the real value starts with Chapter 3 on flow and element sizing. - **Deep-read Chapter 3** (flow, width/height, box model) — it's the foundation for everything else. Pay special attention to the `width:auto` breakdown and the "no width" principle; these are the book's most actionable insights. - **Use the companion website** (demo.cssworld.cn) for hands-on examples — many concepts (like "wrapping" or minimum width) are much clearer when you see them live. The author references specific demo URLs throughout. - **Treat this as a conceptual companion, not a reference** — the book deliberately skips basic syntax and selectors. Keep a CSS manual handy for property details, but use this book to understand *why* properties behave as they do. - **Expect personal interpretation** — the author admits everything is his own understanding, not official spec. This makes the book readable but means you should verify critical details against current browser behavior, especially since the book targets IE8+ and predates modern CSS. 【Coverage Limits】 This guide synthesizes the opening, early, and middle sections (roughly 0–48% of the book) plus the table of contents. Detailed content on inline elements, float/positioning, stacking contexts, text handling, and decoration (Chapters 5–9) is not covered in the excerpts and is summarized only from the chapter list.