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
- Fluid layout
table
- CSS3
Chapter 2 Terms and Concepts
- Undefined behavior
Chapter 3 Flow, Elements and Basic Concepts
-
Block level element
- Why?
list-item
The element appears bulleted -
display: inline-table;
How is the box made up of -
width/height
Which box does it act on
- Why?
-
width/height
The specific details of the role- It’s hidden
width:auto
-
width
Details of Value Action - Principle of Width Separation under CSS Fluid Layout
- Change
width/height
Acting in detailbox-sizing
- Relatively simple
height:auto
- About
height:100%
- It’s hidden
-
min-width/max-width
Andmin-height/max-height
- Born for fluids
min-width/max-width
- Different initial values
- Transcend
! important
, beyond the maximum - Expansion and Collapse Animation Technology of Elements with Arbitrary Height
- Born for fluids
-
inline elemen
- Which elements are inline elements
- Inline box model
- Ghost blank node
Chapter 4 Box Size Four Families
-
Deep understanding
content
-
content
With replacement elements -
content
Content generation technology
-
-
Moderate
padding
Attribute-
padding
The dimension of the element -
padding
Percentage value of - Label element built-in
padding
-
padding
And graphic drawing
-
-
Radical
margin
Attribute-
margin
Related to element size and layout -
margin
Percentage value of -
margin
Merge margin:auto
-
margin
Invalid case analysis
-
-
Meritorious
border
Attribute- Why?
border-width
Percentage values are not supported - Know all kinds of things
border-style
Type -
border-color
Andcolor
-
border
With transparent border techniques -
border
And graphic construction -
border
Contour layout technology
- Why?
Chapter 5 Inline Elements and Streams
-
Letter
x
- Letter
x
Baselines with CSS World - Letter
x
With CSSx-height
- Letter
x
With CSSex
- Letter
-
Cornerstone of Inline Elements
line-height
- The origin of the height of the inline element-
line-height
- Why?
line-height
You can make inline elements “vertically centered.” - thorough
line-height
All kinds of attribute values of - inline elemen
line-height
The “large value characteristic” of
- The origin of the height of the inline element-
-
line-height
Good friend ofvertical-align
-
vertical-align
Basic Understanding of Family -
vertical-align
Functional premise -
vertical-align
Andline-height
Relationship between - Deep understanding
vertical-align
Linear class attribute value - Deep understanding
vertical-align
Text class attribute value - Simple Understanding, Deep Understanding
vertical-align
Subscript class attribute values are superscript to linear class attribute values - Everywhere
vertical-align
- Based on
vertical-align
The horizontal and vertical center bullet box of the attribute
-
Chapter 6 Destruction and Protection of Flow
-
Devil attribute
float
-
float
The essence and characteristics of -
float
The mechanism of action of -
float
A deeper mechanism of action -
float
Fluid layout
-
-
float
The natural nemesis ofclear
- what is
clear
Attribute - If you can’t accomplish something, you can’t do it.
clear
- what is
-
CSS World Enchantment-BFC
- BFCDefinition of
- BFCFluid layout
-
Best barrier
overflow
-
overflow
Cut boundaryborder box
- Understand
overflow-x
Andoverflow-y
-
overflow
With scroll bars - rely on
overflow
The style of expression -
overflow
Location with anchor point
-
-
float
Brother ofposition:absolute
absolute localization-
absolute
The inclusion block of - Independent with Relative Characteristics
absolute
absolute localization -
absolute
Andtext-align
-
-
absolute
Andoverflow
-
absolute
Andclip
- Reconsidered
clip
Attribute - Learn more
clip
The rendering of
- Reconsidered
-
absolute
The fluid characteristics of- When
absolute
encounterleft/top/right/bottom
Attribute -
absolute
The fluid characteristics of -
absolute
Themargin:auto
Center
- When
-
position:relative
Is the eldest brother-
relative
Yesabsolute
Limitations of -
relative
And positioning -
relative
The principle of minimizing the influence of
-
-
Strong
position:fixed
Fixed positioning-
position:fixed
Different “Include Blocks” -
position:fixed
Theabsolute
simulate -
position:fixed
Lock to background
-
Chapter 7 Stacking Rules
z-index
- Cascading Context and Cascading Level
- Understand the stacking order of elements
- Keep in mind the stacking rules
-
Learn more about cascading context
- Specific
- Create
- Cascading Context and Cascading Order
-
z-index
Negative values are deeply understood. -
z-index
Guidelines
Chapter 8 Text Processing Capability
-
line-height
Another friend offont-size
-
font-size
Andvertical-align
The secret story of - Understanding
font-size
Andex
、em
Andrem
The relationship between - Understanding
font-size
The key attribute value of the -
font-size:0
Hiding with Text
-
-
Font attribute family
font-family
- Learn about serif fonts and sans serif fonts
- Practical Value of Equal Width Font
- Chinese font and English name
- Some additional explanations
-
Other members of the font family
font-weight
font-style
font-variant
-
font
Attribute- Abbreviated
font
Attribute - Use keyword values
font
Attribute -
font
Application Value of Key Attribute Value
- Abbreviated
-
@font face
Rules-
@font face
The essence of is variable -
@font face
And font icon technology
-
-
Text control
-
text-indent
Indent with Inline Elements -
letter-spacing
Spacing with characters -
word-spacing
Spacing with words - Understand
word-break
Andword-wrap
The difference between -
white-space
Control of line breaks and spaces -
text-align
Align with element - How to solve
text-decoration
Underline and text overlap -
text-transform
Character case
-
-
Understand
:first-letter/:first-line
Pseudo element- thorough
:first-letter
Pseudo-elements and Examples -
:first-line
Pseudo element
- thorough
Chapter 9 Modification and Beautification of Elements
-
color
- Color keyword
- Unsupported
transparent
Keyword - Unsupported
currentColor
Variable - Unsupported
rgba
Color sumhsla
Color - Support the system color of chicken ribs
-
background
- Hidden element
background-image
Is it loaded or not - distinctive
background-position
Percentage calculation method -
background-repeat
And rendering performance - The outside is strong and the inside is dry.
background-attachment:fixed
-
background-color
The background color is always the lowest - Using Multi-Background AttributeshackSmall technique
- Gradient background and
rgba
Compatible Treatment of Background Color
- Hidden element
Chapter 10 Display and Hiding of Elements
-
display
Show/Hide with Elements -
visibility
Show/Hide with Elements- It’s not just about reserving space
- Understand
visibility:collapse
Chapter 11 User Interface Styles
-
And
border
Shaped likeoutline
Attribute- You can never set it globally.
outline:0 none
- Really does not occupy space
outline
And its application
- You can never set it globally.
-
Cursor properties
cursor
- A dazzling array of things
cursor
attribute value - Custom cursor
- A dazzling array of things
Chapter 12 Changes in Flow Direction
-
Changing horizontal direction
direction
-
direction
brief introduction -
direction
The golden partner ofunicode-bidi
-
-
writing-mode
-
writing-mode
The original function -
writing-mode
What rules have been changed -
writing-mode
Anddirection
The relationship between
-