First, basic knowledge

1. Style sources

Browser Style: Browser Style User Style: User Style Author Style: element inline, document inline, external style sheet

2. Stack styles

Style index order: Element inline style ==> Document inline style ==> External style ==> User style ==> browser style

3. The inheritance

Styles related to the appearance of the element are inherited, and styles related to the layout of the element on the page are not. You can enforce inheritance using inherit.

What is the difference between height: 100% and height: inherit? Height: Inherit height is always equal to the height of the parent element in the document flow, and it does not inherit the height of an element out of the document flow, even if it is a direct parent of the current element

4. Color

Said red: color: red | # FF0000 | 0, 255

// d: 0It means full transparency,1Completely opaque color:rgba(255.0.0, d) // a: hue // b: saturation // c: brightness color:hsl(a, b, c, d)
Copy the code

Length of 5.

Unit identifier instructions
The length of the absolute
in inches
cm cm
mm mm
pt Pound === 1/72 inch
Relative length
em Hook to element size
ex Hook to the X height of the element font
rem Hook to the root element size
px CSS pixel
% The percentage
Em is based on the current stylefont-sizeIt’s calculated
Em is styled according to the rootfont-sizeIt’s calculated
Ex refers to the x height of the current font, the distance between the font baseline and the center line, usually 1ex is roughly equal to 0.5em
# # 6. Angle
Unit identifier instructions
– –
deg The degree of
grad 0grad ~ 400grad
rad Radians 0rad ~ 6.28rad
turn A circle of 1turn is 360deg
## 7. Vendor prefix

Browsers implement a feature with a vendor prefix when the module definition is still unstable

Unit identifier instructions
Chrome and Safari -webkit-
Opera -o-
Firefox -moz-
Internet Explorer -ms-
## 8. BFC

Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of Block boxes takes place and where floating elements interact with other elements.

The BFC is a closed box, and no matter how the elements in the box behave, they are not affected by the external elements, and the internal elements are not affected by the external elements. The following ways will create landing the < HTML / >, the floating element (float: not none), absolutely positioned elements (position: absolute | fixed), inline elements (display: The inline – block), form related elements (display: table | table – cell…), overflow to the visible block elements, dispaly flow – root

9. Inline, inline-block and block

// Common inline elements<span> <a> <input> <img> <br> <select>// Common block level elements<div> <form> <table> <p> <h1>~<h6> <ol> <ul>
Copy the code

Block: exclusive row, width, height, padding, margin inline: The width and height attributes are invalid. The vertical padding and margin attributes are invalid

10. Trigger condition of Z-index

Z-index is valid only for elements whose position attribute is relative, Absolute, or fixed.

11. box-sizing

Content-box: Default, standard box model. Width and height only include the width and height of the content, excluding border, padding, and margin. Border-box: width and height include content, border, padding, but not margin.

12. positionPositioning relative to whom?

Postion: relative Position relative to its own position in the normal document flow. The original position in the standard flow continues to be occupied, and the original position is left blank. Position: Absolute Leaves the document flow and does not occupy the space of the document flow. Positions a parent element that is not static relative to position. If not, keep looking until . Position: Fixed is positioned relative to a browser window or iframe, regardless of the parent element. Position: Sticky Set top, bottom, left, or right to take effect.

Second, specific topics

1. Float and clear floats

Floating causes the parent element to collapse highly

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .container {
      width: 300px;
      /* Clear float: set fixed height for parent element */
      /* height: 300px; * /
      border: solid red 1px;
      /* Clear float: trigger BFC */
      /* overflow: hidden; * /
    }
    /* Clear float: add false element */
    /* .container::after { content: ''; display: block; clear: both; } * /
    .son {
      width: 100px;
      height: 100px;
      float: left;
    }
    .son:nth-child(1) {
      background-color: greenyellow;
    }
    .son:nth-child(2) {
      background-color: hotpink;
    }
    /* The same principle as adding pseudo-elements */
    /* .clear { clear: both; } * /
  </style>
</head>
<body>
  <div class="container">
    <div class="son"></div>
    <! Prevent floating elements from stacking: Add block elements after floating elements -->
    <! -- <div class="clear"></div> -->
    <div class="son"></div>
    <! Clear float: Add block element after float element -->
    <! -- <div class="clear"></div> -->
  </div>
</body>
</html>
Copy the code

2. Collapsing margins

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    .container{// Trigger the BFCdisplay: flow-root;
    }
    div:not(.container) {
      width: 100px;
      height: 100px;
    }
    .first {
      background-color: hotpink;
      margin-bottom: 10px;
    }
    .second {
      background-color: greenyellow;
      margin-top: 100px;
    }
  </style>
</head>
<body>// If the BFC is not triggered, it will be found that the height of the.container does not contain the margin-bottom<div class="container">
    <div class="first"></div>
  </div>
  <div class="second"></div>
</body>
</html>
Copy the code

3. Flexible layout

3.1 The left side is fixed and the right side is adaptive

// Flex layout, when browser width > 600px, newline and flex: 1<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0px;
    }
    .container {
      height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .container div {
      height: inherit;
    }
    .first {
      flex: 0 0 600px;
      background-color: lawngreen;
    }
    .second {
      flex: 1;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</body>
</html>
Copy the code

Using Margin to achieve adaptive layout, the principle is actually very easy to understand. The left side floats out of the document flow, and the right side uses margin to ensure that the left element is not covered, and its width inherits the viewport width.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0px;
    }
    .container {
      height: 100vh;
    }
    .container div {
      height: 100%;
    }
    .first {
      width: 300px;
      background-color: lawngreen;
      float: left;
    }
    .second {
      width: 100%;
      margin-left: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</body>
</html>
Copy the code

3.2 Layout of the Grail

Middle adaptive, left and right width fixed. Don’t understand why this is now an interview? Write this in Flex layout, won’t it take a minute?

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style> 
    body {
      margin: 0px;
    }
    .container {
      height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .container div {
      height: inherit;
    }
    .left {
      flex: 1 0 500px;
      background-color: red;
    }
    .middle {
      flex: 1;
      min-width: 300px;
      background-color: yellowgreen;
    }
    .right {
      flex: 1 0 500px;
      background-color: violet;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>
</html>
Copy the code

If the interviewer asks you to write this in Flex layout, the interviewer will ask, what else can you do? acutely

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style> 
    body {
      margin: 0px;
    }
    .container {
      width: 100%;
      height: 100vh;
      padding: 0 400px 0 300px;
      box-sizing: border-box;
      display: flow-root;
    }
    .container div {
      height: inherit;
    }
    .left {
      width: 300px;
      position: relative;
      left: -300px;
      float: left;
      background-color: red;
    }
    .middle {
      width: 100%;
      background-color: yellowgreen;
      position: absolute;
    }
    .right {
      width: 400px;
      background-color: violet;
      float: right;
      position: relative;
      right: -400px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>
</html>
Copy the code

4. Center vertically and horizontally

// flex
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
      margin: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .div {
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="div"></div>
</body>
</html>
Copy the code
// Know the width and height of the element<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0px;
      height: 100vh;
    }
    .div {
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); / / or / /margin-top: -50px;
      // margin-left: -50px;
    }
  </style>
</head>
<body>
  <div class="div"></div>
</body>
</html>
Copy the code
// Do not know the width and height of the element<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0px;
      height: 100vh;
    }
    .div {
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="div"></div>
</body>
</html>
Copy the code