1 common several horizontal vertical center

Margin: Auto

    div {
      width: 300px;
      height: 300px;
      background: orange;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      /* The inline element is centered */
      text-align: center;
      line-height: 300px;
    }
Copy the code

1.2 Absolute positioning -margin: negative spacing

    div {
      width: 300px;
      height: 300px;
      background: orange;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;      /* Pan the page width to the left half and subtract the div half width */
      margin-top: -150px;       /* Pan down half the page height and subtract half the div height */
      /* The inline element is centered */
      text-align: center;
      line-height: 300px;
    }
Copy the code

1.3 the flex layout

.father { width: 300px; height: 300px; background: red; display: flex; justify-content: center; align-items: center; } .child { width: 150px; height: 150px; background: orange; /* align = center */ text-align: center; line-height: 150px; } <div class="father"> <div class="child">Copy the code

Table 1.4 – cell

.father { width: 300px; height: 300px; background: red; display: table-cell; /* align: bottom; /* align: bottom; } .child { width: 150px; height: 150px; background: orange; margin-left: auto; margin-right: auto; /* align = center */ text-align: center; line-height: 150px; } <div class="father"> <div class="child">Copy the code

2 display:inline-block

Combines some of the features of inline and block

  • Makes an element an inline element that has the property of being on a row with other elements
  • You can change height, width, padding, and margin

It becomes a block-level element that can share a row. But a gap is created between elements that are also set to display:inline-block

Cause of gap: According to our code writing habits, we often hit enter after the label end character, which will produce the return character, which is equivalent to the blank character, and multiple blank characters will be merged into a blank character, so the gap is generated.

How to remove:

  • Delete whitespace between elements (poor readability);
  • Font-size :0 (if there is a font, it is not recommended to increase the code);
  • Set parent elements display:table and word-spacing:-1em.

3 Flex Flex box

Set the display: flex; The parent element is the container; The elements inside a container are its items

3.1 Container Properties

3.1.1 flex – direction

  • Row (default) : Spindle is horizontal to the right
  • Row-reverse: the main axis is horizontal to the left
  • Column: the main axis is vertically downwards
  • Column-reverse: the main axis is vertical

3.1.2 flex – wrap

  • Nowrap (default) : no line breaks
  • Wrap: First line on top, newline
  • Wrap-reverse: First line down, newline

3.1.3 flex – flow

Define both flex-direction and flex-wrap

    flex-flow: <flex-direction> <flex-wrap>;
Copy the code

3.1.4 flex – content

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: the two ends are aligned with equal intervals between items.

3.1.5 the align – items

  • “Stretch” (default) : The height of the project is not set or is set to “auto”, which takes up the entire height of the container.
  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.

3.1.6 the align – content

Align-content only works if there are multiple lines:

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

3.2 Project Attributes

3.2.1 the order

The smaller the item value is, the more advanced it is. The default value is 0

    .item {
      order: <integer>;
    }
Copy the code

3.2.2 flex – turns up

Divide the remaining space of the parent element proportionally, default is 0

    .item {
      flex-grow: <number>;
    }
Copy the code

3.2.3 flex – the shrink

Running out of space, the project will shrink by the defined scaling, which defaults to 1

    .item {
      flex-shrink: <number>;     /* Negative values are invalid */
    }
Copy the code

3.2.4 flex – basis

Fixed the initial project size, default auto

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

3.2.5 flex

Default value: 0 1 Auto

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]Copy the code

3.2.6 align – self

This item is different from other items, that is, overrides the align-items property of the parent element (container). The default value is auto, which inherits the align-items property of the parent element.

4 landing and IFC

4.1 landing

Block-level format context, the child does not affect the outer element, the outer element does not affect the child element.

4.1.1 Formation conditions

  • The root element
  • Float to none
  • Position The value can be absolute or fixed
  • The display value can be inline-block, table-cell, table-caption, flex, or inline-flex
  • The overflow is not visible

4.1.2 Layout rules

  • The inner box is placed vertically;
  • The vertical distance of the Box is determined by margin (note: the upper and lower margins of two adjacent boxes belonging to the same BFC will overlap, and only one container can be triggered to overlay one container on the other side, so they will not be in the same BFC).
  • The left side of each element touches the left side of the containing box, even if there is a float;
  • The region of the BFC does not overlap with float;
  • The BFC is a separate container in which children do not affect the outside elements and vice versa.
  • Floating elements also participate in the height calculation of the BFC.

4.2 the IFC

The height of the inline box is determined by the highest inline element in the IFC. The inline box of the IFC is usually left and right adjacent to the entire IFC, and is not affected by the vertical padding/margin, but the float element is disturbed. Because float elements are placed between IFC and line box, the line box width is shortened.

4.1.1 Formation conditions

  • Block-level elements contain only inline level elements

4.1.2 Layout rules

  • Child elements are arranged horizontally and vertically, starting from the top of the element;
  • Child elements only involve transverse sample distances;
  • In the vertical direction, the child elements are vertical-align in different ways.
  • A rectangular area that can contain all the boxes on a row is called the row box. The width of the line box is determined by the containing block and the float within it;
  • The “line box” in IFC is usually close to its containing block, but float elements take precedence;
  • The line box height in the IFC is determined by the line height calculation rules of the CSS. Multiple line box heights in the same IFC may be different.
  • When the total width of inline-level boxes is less than the line box containing them, the horizontal rendering rule is determined by the value of the text-align attribute.
  • When an “inline box” exceeds the width of the parent element, it is split into boxes, which are distributed among several “line boxes”. If the child element is not forced to break a line, the inline box will not be split and will overflow the parent element.

Holdings role

  • Horizontally centered: When a block is horizontally centered in the environment, inline-block will generate an IFC in the outer layer, and text-align:center will center it horizontally.
  • Vertically centered: Create an IFC, use one of the elements to offset the height of the parent element, and then set it to vertical-align:middle. Other elements in the row can be vertically centered under the parent element.

The 5 fills up the rest

5.1 Fill the remaining width (two-column layout: solid left and right)

5.1.1 float + landing

.left { width: 200px; height: 300px; float: left; background: yellow; } .right { height: 400px; background: orange; overflow: hidden; } <div class="container"> <div class="left"> Left side fixed </div> <div class="right"> Right side adaptive </div> </div>Copy the code

5.1.2 float + margin – left

.left { width: 200px; height: 300px; float: left; background: yellow; } .right { height: 400px; background: orange; Margin-left: 200px} <div class="container"> <div class="left"> </div> <div class="right">Copy the code

The effect same as above

5.1.3 absolute

.left { width: 200px; height: 300px; background: yellow; position: absolute; } .right { height: 400px; background: orange; margin-left: 200px; } <div class="container"> <div class="left"> </div>Copy the code

The effect same as above

5.1.4 ensuring table

.container { display: table; width: 100%; } .left { width: 200px; height: 400px; background: yellow; display: table-cell; } .right { height: 400px; background: orange; } <div class="container"> <div class="left"> </div>Copy the code

5.1.5 flex layout

.container { display: flex; } .left { width: 200px; height: 400px; background: yellow; } .right { height: 400px; background: orange; flex: 1; } <div class="container"> <div class="left"> </div>Copy the code

Same effect as the previous ones

5.1.6 calc function

5.2 Fill the remaining height

5.2.1 Absolute Positioning

.container { width: 600px; height: 600px; position: relative; } .top { height: 50px; background: yellow; } .bottom { position: absolute; left: 0; top: 50px; bottom: 0; width: 100%; background: orange; } <div class="container"> <div class="top"> </div>Copy the code

5.2.2 Calc function (parent element height must be fixed)

.container { width: 600px; height: 600px; position: relative; } .top { height: 50px; background: yellow; } .bottom { height: calc(100% - 50px); background: orange; } <div class="container"> <div class="top"> </div> </div> </div>Copy the code

The effect same as above

5.2.3 Flexible Layout

.container { width: 600px; height: 600px; display: flex; flex-direction: column; } .top { height: 50px; background: yellow; } .bottom { flex: 1; background: orange; } <div class="container"> <div class="top"> </div>Copy the code

The effect same as above

6. Three-column layout

6.1 float

.container { width: 600px; height: 600px; } .left { float: left; width: 100px; height: 100%; background: green; } .right { float: right; width: 100px; height: 100%; background: yellow; } .center { height: 100%; margin-left: 100px; margin-right: 100px; background: orange; } <div class="container"> <div class="left"> left fixed </div> <div class="center"> Middle adaptive </div> </div>Copy the code

6.2 absolute

.container { position: absolute; width: 600px; height: 600px; }! [image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81292a8a627a4aae9c08be392f05ca1f~tplv-k3u1fbpfcp-watermark .image) .left { position: absolute; left: 0; width: 100px; height: 100%; background: green; } .right { position: absolute; right: 0; float: right; width: 100px; height: 100%; background: yellow; } .center { position: absolute; left: 100px; right: 100px; height: 100%; background: orange; } <div class="container"> <div class="left"> left fixed </div> <div class="center"> Middle adaptive </div> </div>Copy the code

The effect same as above

6.3 Elastic Box

.container { display: flex; width: 600px; height: 600px; } .left { width: 100px; height: 100%; background: green; } .right { float: right; width: 100px; height: 100%; background: yellow; } .center { flex: 1; right: 100px; height: 100%; background: orange; } <div class="container"> <div class="left"> left fixed </div> <div class="center"> Middle adaptive </div> </div>Copy the code

6.4 Grail Layout (with Header and Footer)

  • Advantages: No DOM need to be added, good compatibility
  • Cons: Layout confusion occurs when the middle section < left
.container { display: flex; flex-direction: column; width: 600px; height: 600px; text-align: center; color: white; } .header, .footer { height: 50px; background: purple; } .footer { clear: both; /* Clear float */}. Main {flex: 1; top: 50px; bottom: 50px; padding: 0 100px; } .left, .right, .center { float: left; position: relative; width: 100px; height: 100%; background: green; } .left { margin-left: -100%; left: -100px; } .right { margin-left: -100px; right: -100px; } .center { width: 100%; height: 100%; background: orange; } <div class="container"> <div class="header"> </div> <div class="main"> <div class="center"> Middle adaptive </div> <div Class = "left" > left fixed < / div > < div class = "right" > right fixed < / div > < / div > < div class = "footer" > end < / div > < / div >Copy the code

6.4 Layout of Flying Wings (plus Header and Footer)

.container { display: flex; flex-direction: column; width: 600px; height: 600px; text-align: center; color: white; } .header, .footer { height: 50px; background: purple; } .footer { clear: both; /* Clear float */}. Main {flex: 1; top: 50px; bottom: 50px; } .left, .right, .center { float: left; position: relative; width: 100px; height: 100%; background: green; } .left { margin-left: -100%; } .right { margin-left: -100px; } .center { width: 100%; height: 100%; background: orange; } .content { height: 100%; margin-left: 100px; margin-right: 100px; } <div class="container"> <div class="header"> </div> <div class="main"> <div class="center"> Middle adaptive < / div > < / div > < div class = "left" > left fixed < / div > < div class = "right" > right fixed < / div > < / div > < div class = "footer" > end < / div > < / div >Copy the code

The effect same as above

Difference between grail and Wings:

  • Grail layout: Non-primary elements occupy the padding of their parent elements
  • Twin wing layout: The margin where the non-primary element occupies the primary element

7 Clearing floats

7.1 Why do I want to clear floats?

Float causes the parent element to collapse in height

7.2 Please remove the float

  1. Add an empty element with the clear attribute after you need to clear the floating block;
  • Pros: Simplicity
  • Faults: not elegant
  1. The parent div defines height
  2. The parent div defines the pseudo class :after
  3. The parent div defines overflow:hidden

8 margin

margin: 1px; Margin: 1px auto; Margin: 2px 1px; Margin :1px 1px 1px 1px 1px up, right, down, leftCopy the code

9 Drawing a Triangle

9.1 the principle

Div width and height set to 0, boder in each direction, i.e. Boder – direction: width solid color; = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

    #triangle {
      width: 0;
      height: 0;
      border-top: 50px solid black;
      border-right: 50px solid orange;
      border-bottom: 50px solid red;
      border-left: 50px solid pink;
    }
    
    <div id="triangle"></div>
Copy the code

9.2 example

#triangle { width: 0; height: 0; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 200px solid red; <div id="triangle"></div>Copy the code

10 CSS 3 gradient

10.1 Linear gradient

10.1.1 From Top to Bottom (default)

    background-image: linear-gradient(orange, red);
Copy the code

10.1.2 Other Directions

    background-image: linear-gradient(to top, orange, red);  / * * / up
    background-image: linear-gradient(to right, orange, red);  / * * / to the right
    background-image: linear-gradient(to left, orange, red);  / * * / to the left
    background-image: linear-gradient(to bottom right, orange, red);  /* to the right */
Copy the code

The specified direction can also be specified by the specified Angle (in deg, the Angle is the Angle between the horizontal line and the gradient line, calculated counterclockwise).

10.2 Radial Gradient

The middle gradient is outward

    background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code

11 CSS2D conversion

  • Transform: Translate (x, Y) : Move position
  • Transform: rotate(90deg) : Rotate elements 90 degrees clockwise; Degree <0, counterclockwise
  • Transform: scale(x, y) : width x times, height Y times
  • Transform: Skew (10DEg, 20DEG) : An element is skewed 10 degrees along the X axis and 20 degrees along the Y axis
  • Transform: skewX(10DEg) : An element is tilted 10 degrees along the X axis
  • Transform: skewY(20DEg) : The element is tilted 20 degrees along the Y-axis
  • Transform: matrix(n, n, n, n, n, n) : merge

12 CSS3D conversion

  • Translate3d (x, Y, Z) : translateX(x), translateY(y), translateZ(z) : translate3D (x, Y, Z)
  • Scale3d (x, Y,z) scale3D (x, Y,z) scale3D (x,y,z) scale3D (x,y,z) scale3D (x,y,z) scale3D
  • Transform: rotate3D (x,y,z, Angle); transform: rotate3D (x,y,z, Angle); transform: rotate3D (x,y,z, Angle)
  • Transform: perspective(n) : Perspective attempt
  • Matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) : a merger

13 excessive

13.1 attributes

attribute describe
transition Merge four attributes
transition-delay Transition effect delay time
transition-duration Excessive effect duration
transition-property The name of the CSS property to which the transition effect is targeted
transition-timing-function Speed curve of transition effect

13.2 example

    .gradient {
      width: 300px;
      height: 200px;
      background-color: orange;
      transition-delay: 1s;
      transition-duration: 3s;
      transition-property: background-color;
      transition-timing-function: linear;
    }

    .gradient:hover {
      background-color: red;
    }
    
    <div class="gradient"></div>
Copy the code

14 animation

Novice tutorial: https://www.runoob.com/css3/css3-animations.html

@keyframes Specify animation. CSS3
animation Shorthand properties for all animation properties. 3
animation-name Specifies the name of the @keyframes animation. 3
animation-duration Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default is 0. 3
animation-timing-function Specifies the speed curve of the animation. The default is “ease”. 3
animation-fill-mode Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing). 3
animation-delay Specifies when the animation should start. The default is 0. 3
animation-iteration-count Specifies the number of times an animation is played. The default is 1. 3
animation-direction Specifies whether the animation is played backwards in the next cycle. The default is “normal”. 3
animation-play-state Specifies whether the animation is running or paused. The default is “running”.

14.1 example

    .gradient {
      width: 30px;
      height: 30px;
      margin: 85px;
      border-radius: 50%;
      border: 20px solid orange;
      animation: test 3s ease 0.5s infinite alternate;
    }

    @keyframes test {
      25% {
        width: 50px;
        height: 50px;
        margin: 75px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      50% {
        width: 100px;
        height: 100px;
        margin: 50px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      75% {
        width: 150px;
        height: 150px;
        margin: 25px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      100% {
        width: 200px;
        height: 200px;
        margin: 0;
        border-radius: 50%;
        border: 20px solid orange;
      }
    }
    
    <div class="gradient"></div>
Copy the code

The effect is to enlarge a circle with a radius of 30px to a radius of 100px.