CSS world (document)

  css, css3, Front end, Style

After finishing the book “High Performance JavaScript”, we need to deal with “CSS World” quickly. This book on CSS features is very worth reading. It is complete in content, prominent in key points, strong in actual combat, and just wordy. Because the book has too much content and needs to be sorted out bit by bit, it was put on the website for everyone to check.

Site address:Full stack development
Original link:CSS worldDouban reads:CSS world

CSS world

Chapter 1 Overview

  1. Fluid layout
  2. table
  3. CSS3

Chapter 2 Terms and Concepts

  1. Undefined behavior

Chapter 3 Flow, Elements and Basic Concepts

  1. Block level element

    • Why?list-itemThe element appears bulleted
    • display: inline-table;How is the box made up of
    • width/heightWhich box does it act on

  2. width/heightThe specific details of the role

    • It’s hiddenwidth:auto
    • widthDetails of Value Action
    • Principle of Width Separation under CSS Fluid Layout
    • Changewidth/heightActing in detailbox-sizing
    • Relatively simpleheight:auto
    • Aboutheight:100%

  3. min-width/max-widthAndmin-height/max-height

    • Born for fluidsmin-width/max-width
    • Different initial values
    • Transcend! important, beyond the maximum
    • Expansion and Collapse Animation Technology of Elements with Arbitrary Height

  4. inline elemen

    • Which elements are inline elements
    • Inline box model
    • Ghost blank node

Chapter 4 Box Size Four Families

  1. Deep understandingcontent

    • contentWith replacement elements
    • contentContent generation technology

  2. ModeratepaddingAttribute

    • paddingThe dimension of the element
    • paddingPercentage value of
    • Label element built-inpadding
    • paddingAnd graphic drawing

  3. RadicalmarginAttribute

    • marginRelated to element size and layout
    • marginPercentage value of
    • marginMerge
    • margin:auto
    • marginInvalid case analysis

  4. MeritoriousborderAttribute

    • Why?border-widthPercentage values are not supported
    • Know all kinds of thingsborder-styleType
    • border-colorAndcolor
    • borderWith transparent border techniques
    • borderAnd graphic construction
    • borderContour layout technology

Chapter 5 Inline Elements and Streams

  1. Letterx

    • LetterxBaselines with CSS World
    • LetterxWith CSSx-height
    • LetterxWith CSSex

  2. Cornerstone of Inline Elementsline-height

    • The origin of the height of the inline element-line-height
    • Why?line-heightYou can make inline elements “vertically centered.”
    • thoroughline-heightAll kinds of attribute values of
    • inline elemenline-heightThe “large value characteristic” of

  3. line-heightGood friend ofvertical-align

    • vertical-alignBasic Understanding of Family
    • vertical-alignFunctional premise
    • vertical-alignAndline-heightRelationship between
    • Deep understandingvertical-alignLinear class attribute value
    • Deep understandingvertical-alignText class attribute value
    • Simple Understanding, Deep Understandingvertical-alignSubscript class attribute values are superscript to linear class attribute values
    • Everywherevertical-align
    • Based onvertical-alignThe horizontal and vertical center bullet box of the attribute

Chapter 6 Destruction and Protection of Flow

  1. Devil attributefloat

    • floatThe essence and characteristics of
    • floatThe mechanism of action of
    • floatA deeper mechanism of action
    • floatFluid layout

  2. floatThe natural nemesis ofclear

    • what isclearAttribute
    • If you can’t accomplish something, you can’t do it.clear

  3. CSS World Enchantment-BFC

    • BFCDefinition of
    • BFCFluid layout

  4. Best barrieroverflow

    • overflowCut boundaryborder box
    • Understandoverflow-xAndoverflow-y
    • overflowWith scroll bars
    • rely onoverflowThe style of expression
    • overflowLocation with anchor point

  5. floatBrother ofposition:absoluteabsolute localization

    • absoluteThe inclusion block of
    • Independent with Relative Characteristicsabsoluteabsolute localization
    • absoluteAndtext-align
  6. absoluteAndoverflow

  7. absoluteAndclip

    • ReconsideredclipAttribute
    • Learn moreclipThe rendering of

  8. absoluteThe fluid characteristics of

    • Whenabsoluteencounterleft/top/right/bottomAttribute
    • absoluteThe fluid characteristics of
    • absoluteThemargin:autoCenter

  9. position:relativeIs the eldest brother

    • relativeYesabsoluteLimitations of
    • relativeAnd positioning
    • relativeThe principle of minimizing the influence of

  10. Strongposition:fixedFixed positioning

    • position:fixedDifferent “Include Blocks”
    • position:fixedTheabsolutesimulate
    • position:fixedLock to background

Chapter 7 Stacking Rules

  1. z-index
  2. Cascading Context and Cascading Level
  3. Understand the stacking order of elements
  4. Keep in mind the stacking rules

  5. Learn more about cascading context

    • Specific
    • Create
    • Cascading Context and Cascading Order
  6. z-indexNegative values are deeply understood.
  7. z-indexGuidelines

Chapter 8 Text Processing Capability

  1. line-heightAnother friend offont-size

    • font-sizeAndvertical-alignThe secret story of
    • Understandingfont-sizeAndex、emAndremThe relationship between
    • Understandingfont-sizeThe key attribute value of the
    • font-size:0Hiding with Text

  2. Font attribute familyfont-family

    • Learn about serif fonts and sans serif fonts
    • Practical Value of Equal Width Font
    • Chinese font and English name
    • Some additional explanations

  3. Other members of the font family

    • font-weight
    • font-style
    • font-variant

  4. fontAttribute

    • AbbreviatedfontAttribute
    • Use keyword valuesfontAttribute
    • fontApplication Value of Key Attribute Value

  5. @font faceRules

    • @font faceThe essence of is variable
    • @font faceAnd font icon technology

  6. Text control

    • text-indentIndent with Inline Elements
    • letter-spacingSpacing with characters
    • word-spacingSpacing with words
    • Understandword-breakAndword-wrapThe difference between
    • white-spaceControl of line breaks and spaces
    • text-alignAlign with element
    • How to solvetext-decorationUnderline and text overlap
    • text-transformCharacter case

  7. Understand:first-letter/:first-linePseudo element

    • thorough:first-letterPseudo-elements and Examples
    • :first-linePseudo element

Chapter 9 Modification and Beautification of Elements

  1. color

    • Color keyword
    • UnsupportedtransparentKeyword
    • UnsupportedcurrentColorVariable
    • UnsupportedrgbaColor sumhslaColor
    • Support the system color of chicken ribs

  2. background

    • Hidden elementbackground-imageIs it loaded or not
    • distinctivebackground-positionPercentage calculation method
    • background-repeatAnd rendering performance
    • The outside is strong and the inside is dry.background-attachment:fixed
    • background-colorThe background color is always the lowest
    • Using Multi-Background AttributeshackSmall technique
    • Gradient background andrgbaCompatible Treatment of Background Color

Chapter 10 Display and Hiding of Elements

  1. displayShow/Hide with Elements

  2. visibilityShow/Hide with Elements

    • It’s not just about reserving space
    • Understandvisibility:collapse

Chapter 11 User Interface Styles

  1. AndborderShaped likeoutlineAttribute

    • You can never set it globally.outline:0 none
    • Really does not occupy spaceoutlineAnd its application

  2. Cursor propertiescursor

    • A dazzling array of thingscursorattribute value
    • Custom cursor

Chapter 12 Changes in Flow Direction

  1. Changing horizontal directiondirection

    • directionbrief introduction
    • directionThe golden partner ofunicode-bidi

  2. writing-mode

    • writing-modeThe original function
    • writing-modeWhat rules have been changed
    • writing-modeAnddirectionThe relationship between

Related Posts: