Abstract:

  1. The CSS profile
  2. The document flow
  3. The box model
  4. CSS layout
  5. The CSS positioning
  6. CSS animations
  7. 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

  1. Concept: All the elements are wrapped in “boxes” through which we achieve the layout. The complete box model concept is applied to block boxes.
  2. Composition: margin, border, padding, content
  3. Two types of box models:
box-sizing:border-box | content-box ;
Copy the code
  1. 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

or

.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

or

.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

3.

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

Direction: reverse | alternate | alternate – reverse number: 1/2 /… | infinite filling pattern: none | recently (can make the animation stops and display the last frame) | backwards | if both suspended: paused | running

7. Other common knowledge

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