CSS Notes - Knowledge summary - Moment For Technology

Abstract:

The CSS profile
The document flow
The box model
CSS layout
The CSS positioning
CSS animations
other

Overview of the CSS

Cascading Style Sheets (abbreviated CSS) is a Style sheet language used to describe the styling of HTML or XML documents. CSS 2.1 is the most widely used version. Check whether each browser supports a feature → caniuse.com debug code → border debug method/webstorm query CSS information → MDN/CSS tricks

2. Normal Flow

Default automatic left to right, top to bottom streaming arrangement.

1. HTML element type

Inline elements, block elements, and inline-block elements, depending on the display attribute.

1) Flow direction

Inline element: From left to right, line breaks only when it reaches the right
Block elements: From top to bottom, each occupies an exclusive row
Inline-block element: from left to right, but does not break content across two lines

2) width

Inline elements: As narrow as possible, width is not accepted (do not put block elements in inline elements)
Block elements: as wide as possible, you can set width (do not set width)width:100%;)
Inline-block element: As narrow as possible, width can be set

3) high

Inline element: Indirectly determined by line height, height is not accepted
Block element: Determined by all internal document flow elements, height can be set
Inline-block element: Height can be set

Overflow (overflow) 2.

Content is out of the container, and overflow Settings are available for the display of the out of part.

overflow:visible;Display the excess portion directly
overflow:hidden;Hide excess
overflow:scroll;Display up, down, left and right scroll bars (even without overflow)
overflow:auto;Display necessary scroll bars when overflow occurs

3. Get out of the document stream

When an element leaves the document flow, its container does not count its height as container height. 1) Position: Absolute; Or the position: fixed; 2) float: left;

Three. Box model

See: CSS Note-brief Box model

Concept: All the elements are wrapped in “boxes” through which we achieve the layout. The complete box model concept is applied to block boxes.
Composition: margin, border, padding, content
Two types of box models:

box-sizing:border-box | content-box ;
Copy the code

Margin merge: box and box margin merge when there is no barrier between them.

1) Eliminate “brother” margin merge method: display:inline-block; 2) Eliminate “parent” margin merge method: ① add border between margin, ② add padding between margin, ③ display:flex;

4. CSS layout

layout

Need compatibility with IE 9? → need → use float layout
Need compatibility with IE 9? → Not required → Compatible with older browsers? → Need → Use flex layout
Need compatibility with IE 9? → Not required → Compatible with older browsers? → No need, only compatible with the latest browser → use [Grid layout]

1. The float layouts

Float :left; HTML: parent element + class=”clearfix” CSS: add three sentences

.clearfix:after{
    content:' ';
    display:block;
    clear:both;
}
Copy the code

2. Flex Layout (maximum use)

Flex Flow is different from Normal Flow. 1) Container (parent) style ① display defines the container

.container{
    display:flex | inline-flex ;
}
Copy the code

② Flex-direction Controls the spindle direction

.container{
    flex-direction:column | column-reverse | row | row-reverse ;
}
Copy the code

③ Flex-wrap controls line breaks

.container{
    flex-wrap: nowrap (default) | wrap | wrap - reverse; }Copy the code

④ context-content controls spindle alignment

container{
    justify-content: flex - start (default) | flex - end | center | space - between | space - around | space - evenly; }Copy the code

⑤ align-items control the alignment of the sub-axis

.container{
    align-items: flex - start | flex - end | center | stretch (two head alignment); }Copy the code

⑥ align multiple lines of content

.container{
    align-content:flex-start | flex-end | center | space-between | space-around | stretch ;
}
Copy the code

① Order Changes the order between items. Order can be 0 (default),1,2,-1,-2… , the smaller the value, the higher the order.

.item:first-child{
    order:5;
}

.item:nth-child(2) {order:2;
}

.item:last-child{
    order: -1;
}
Copy the code

② Flex-grow controls items to grow fat. The default flex-grow value is 0.

.item:first-child{
    flex-grow:1;
}

.item:nth-child(2) {flex-grow:2;
}

.item:last-child{
    flex-grow:1;
}
Copy the code

It means that the extra space is divided into 4 parts,1,2 and 1 parts respectively. The default value of flex-shrink is 1, and the value of “flex-shrink” is usually 0, which prevents items from “shrinking”.

.item:first-child{
    flex-shrink:1;
}

.item:nth-child(2) {flex-shrink:2;
}

.item:last-child{
    flex-shrink:1;
}
Copy the code

Indicates that when the window is less than the width of container, items start to “thin” and “thin” 1,2,1 respectively. The default value of flex-basis is auto, which is equivalent to width. ⑤ align-self controls the alignment of individual items

.item:last-child{
    height:50px;
    align-self:flex-start | flex-end | center ;
}
Copy the code

3. Grid Layout (most powerful)

① display defines a container

.container{
    display:grid | inline-grid ;
}
Copy the code

② Grid-template-rows and grid-template-columns set rows and columns

.container{
    grid-template-rows:25% 100pxLine (high); grid-template-columns:40px 50pxAuto (column width);/* Gird-template :25% 100px/40px 50px auto; * /
}
Copy the code

.container{
    grid-template-rows:1fr 3Fr (copy); grid-template-columns:1fr 2fr 1fr;
}
Copy the code

Represents a table with 2 rows and 3 columns (3 rows and 4 columns). ③ Partition grid-template-areas

<div class="container">
    <header>navigation</header>
    <aside>The sidebar</aside>
    <main>content</main>
    <div class="ad">advertising</div>
    <footer>The footer</footer>
</div>
Copy the code

.container {
  min-height: 100vh; /* Fill up the entire screen */
  
  display: grid;
  grid-template-rows: 60px auto 60px;
  grid-template-columns: 100px auto 100px;
  grid-column-gap: 5px;
  
  grid-template-areas: 
  "header header header"
  "aside main ad" 
  ". footer footer";
}

.container> * {border: 1px solid red; 
}

.container>header {
  grid-area: header;
}
.container>aside {
  grid-area: aside;
}
.container>main {
  grid-area: main;
}
.container>.ad {
  grid-area: ad;
}
.container>footer {
  grid-area: footer;
}
Copy the code

④ Specify the area scope of items

.item{
    gird-row-start:1(line number, can be negative); gird-row-end:2;
    /* gird-row:1/2; * /
    
    gird-column-start:1;
    grid-column-end:4;
    /* Grid-area :1/1/2/ 1/2; * /
}
Copy the code

.item{
    gird-column-start:1;
    grid-column-end:span 3(only positive); }Copy the code

⑤ Grid-gap sets the gap

.container{
    grid-row-gap:5px;
    grid-column-gap:5px;
    grid-gap:5px;
}
Copy the code

5. CSS Positioning

1. A div hierarchy

Top → Bottom: Text content → Float element (out of the document flow) → Block child element → border → background Note: Text content in a float element follows the float element.

2. Position attribute

1) values

Static: Default, element in document flow
Relative: relative to itself, rising but not out of the document flow
Absolute: Absolute location based on the selected parent location element
Fixed: The positioning is based on the viewport
Sticky: The normal state is that in a document flow, when the element is about to move out of the viewport, the element will be sticky and will not continue to roll with the document flow

2) experience

To use absolute, you usually write relative (position the selected parent element)
Use absolute or fixed, be sure to write top/bottom and left/right.

left:100%; On the rightbottom:100%; On the mostCopy the code

Sticky poor compatibility, rarely used

3. Cascading context

1) understand

The z-index attribute only works on position elements (elements with a non-default position attribute)
The level of cascading of a common element takes precedence over the cascading context in which it resides
The cascade level comparison is meaningful only in the context of the current cascade context element

2) Z-index attribute

Value: Z-index :auto (default) /0/1/2/-1/-2/……
The z-index attribute only works on position elements (elements with a non-default position attribute)
The higher the number, the higher the upper level
Learn to manage numbers. Don’t write likez-index:9999;such

3) Cascading order within a cascading context (rule)

The order from upper layer to bottom layer is as follows:

Z-index > 0 child positioning element
Z-index = 0 or z-index = auto
Inline or inline-block child element
Float child elements
Block child elements
Z-index < 0 child positioning element
Border of this cascading context
The background of this cascading context

Analysis of the sample

4) How does an element become a cascading context element

The < HTML > element is itself a cascading context

position: relative or absolute;z-index:非auto;
Copy the code

position:fixed;
Copy the code

See MDN documentation for more

CSS animation

1. Browser rendering principle

1) Rendering steps for the first rendering

① To construct THE HTML Tree (DOM) ② to construct the CSS Tree (CSSOM) ③ To merge the two trees into the Render Tree ④ to construct the HTML Tree ⑤ Paint ⑥ Composite

2) Update the rendering steps of the rendering

3 ways: ① Change the layout, all go: JS/CSS → style → layout → draw → composition (such as div.remove()) ② Do not change the layout: JS/CSS → style → draw → composition (such as only change background) ③ Do not change the layout, draw: JS/CSS → Styles → Composition (such as change transform) Browser render View CSS Triggers

2. The transform properties

1) Four common functions

1) translate displacement

transform:translateX(20px);
transform:translateY(50px);
transform:translateZ(100px);

transform:translate(20px.50px);
transform:translate3d(20px.50px.100px);
Copy the code

Absolute position element (position:absolute;) Often used in the center of:

transform:translate(-50% -50%);
Copy the code

(2) scale zooming

transform:scaleX(1.5);
transform:scaleY(1.5);

transform:scale(1.5);
transform:scale(1.5.0.5);
Copy the code

3 Rotate Rotates in the Z axis by default

transform:rotate(45deg); namelytransform:rotateZ(45deg);
transform:rotateX(45deg);
transform:rotateY(45deg);
Copy the code

(4) skew tilt

transform:skew(15deg); namelytransform:skewX(15deg);
transform:skewY(30deg);

transform:skew(15deg.30deg);
Copy the code

When used in combination, separate them with Spaces

3. The transition properties

1) the role

Given the beginning state and the end state, add the intermediate frame

2) grammar

transition: Attribute name Duration Transition mode delay;Copy the code

Transition way: ease (default) | linear | ease – in | ease – out more see the MDN document note: not all properties can transition transition, display: none; To display: block; Unable to transition (usable visibility:hidden; – > visibility: visible; Make the transition)

4. The animation attributes

1) the role

Use multiple transforms to change to animation

2) Use steps

① Declare keyframes ② add animations

3) grammar

① Declaration key frame method 1: percentage

@keyframes xxx{
    0%{
        transform:none;
    }
   66.66%{
        transform:translateX(100px);
    }
    100%{
        transform:translateX(100px) translateY(200px); }}Copy the code

错句 2: From to

@keyframes xxx{
    from{
        transform:none;
    }
    to{
        transform:translateX(100px); }}Copy the code

② Add animation

#demo.start{
animation: Animation name duration transition mode Delay times direction Filling mode whether to suspend; }Copy the code

7. Other common knowledge

vertical-align:top;orvertical-align:middle;Used to eliminate unnecessary parts under the image border
white-space:nowrap;Text content does not wrap
border-radius:10% 30% 20% 70%;Set the outer border rounded corner of the element (‘ border-radius:50%; Is round)
Negative margin

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS Notes – Knowledge summary

Overview of the CSS

2. Normal Flow

1. HTML element type

1) Flow direction

2) width

3) high

Overflow (overflow) 2.

3. Get out of the document stream

Three. Box model

4. CSS layout

layout

1. The float layouts

2. Flex Layout (maximum use)

3. Grid Layout (most powerful)

5. CSS Positioning

1. A div hierarchy

2. Position attribute

1) values

2) experience

3. Cascading context

1) understand

2) Z-index attribute

3) Cascading order within a cascading context (rule)

4) How does an element become a cascading context element

CSS animation

1. Browser rendering principle

1) Rendering steps for the first rendering

2) Update the rendering steps of the rendering

2. The transform properties

1) Four common functions

3. The transition properties

1) the role

2) grammar

4. The animation attributes

1) the role

2) Use steps

3) grammar

7. Other common knowledge

CSS Notes – Knowledge summary

Overview of the CSS

2. Normal Flow

1. HTML element type

1) Flow direction

2) width

3) high

Overflow (overflow) 2.

3. Get out of the document stream

Three. Box model

4. CSS layout

layout

1. The float layouts

2. Flex Layout (maximum use)

3. Grid Layout (most powerful)

5. CSS Positioning

1. A div hierarchy

2. Position attribute

1) values

2) experience

3. Cascading context

1) understand

2) Z-index attribute

3) Cascading order within a cascading context (rule)

4) How does an element become a cascading context element

CSS animation

1. Browser rendering principle

1) Rendering steps for the first rendering

2) Update the rendering steps of the rendering

2. The transform properties

1) Four common functions

3. The transition properties

1) the role

2) grammar

4. The animation attributes

1) the role

2) Use steps

3) grammar

7. Other common knowledge

Related Posts

Looking at the houses of thinking – real estate data visualization | 🏆 third essay technology projects

Vue responsive data principle

Vue3 + TS + Vite + elementPlus