Summary of common HTML / CSS knowledge

Time:2022-5-13

1. Semantic HTML

1.1 comparison between semantic and non semantic

<!--  Non semantic -- >
  < div > Title < / div >
  <div>
    < div > a paragraph of text < / div >
    <div>
      < div > List 1 < / div >
      List 2
  </div>
  </div>
<!--  Semantic -- >
  <h1>Title</h1>
  <div>
    <p>A paragraph of text</p>
    <ul>
      <li>List 1</li>
      <li>List 2</li>
    </ul>
  </div>

It can be seen from the two pieces of code that the title, paragraph and list can be more clearly distinguished by using semantic tags. At the same time, it is also conducive to SEO optimization.

  • Make it easier to read (high code readability)
  • Make search engines easier to read

2. Block level elements and inline elements in HTML by default

2.1 block level elements

  • display: block/table;
  • Div h1~h6 table UL ol P et al
  • Exclusive row

2.2 inline elements

  • display: inline/inline-block;
  • Span img input button, etc
  • Features: it will not monopolize one line, and the adjacent inline elements will be next to the same line until the edge of the browser

3. CSS layout

3.1 width calculation of box model

3.1.1 what is the offset width of div1 in the following code

<style>
  #div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
  }
</style>
<div></div>
  • Offsetwidth = (content width + inner margin + border), excluding outer margin
  • Therefore, offsetwidth = (100 + 10 + 10 + 1 + 1) PX

3.2.1 how to make the offsetwidth of the above code div = 100px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  #div1{
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box;  /* Weird box model of IE browser*/
  }
</style>
</head>
<body>
  <div>
    div1
  </div>
</body>
<script>
  let width = document.getElementById('div1').offsetWidth;
  console.log(width); // 100
</script>
</html>

As shown in the following figure: the content, inner margin and border are all included in the Div

Summary of common HTML / CSS knowledge

image.png

3.2 margin vertical overlap

3.2.1 distance between AAA and BBB

  <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
  • The margin top and margin bitom of adjacent elements will overlap, and take the larger value
  • Elements with empty content are ignored and margin overlaps
  • Therefore, the distance between AAA and BBB is 15px

3.3 negative margin problem

3.3.1 the codes are as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > margin negative value < / Title >
    <style type="text/css">
        body {
            margin: 20px;
        }

        .float-left {
            float: left;
        }
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        .container {
            border: 1px solid #ccc;
            padding: 10px;
        }
        .container .item {
            width: 100px;
            height: 100px;
        }
        .container .border-blue {
            border: 1px solid blue;
        }
        .container .border-red {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    
    <p>Used to test the negative number of margin top bottom</p>
    <div>
        <div>
            this is item 1
        </div>
        <div>
            this is item 2
        </div>
    </div>

    <p>Used to test the negative number of margin left right</p>
    <div>
        <div>
            this is item 3
        </div>
        <div>
            this is item 4
        </div>
    </div>

</body>
</html>

Operation results

Summary of common HTML / CSS knowledge

image.png

3.3.2 set negative value for margin top

Set a negative value for margin top of Item1

<!--  In style, set the margin top of Item1 to a negative value -- >
.item1{
    margin-top: -20px;
}

As a result, Item1 and Item2 are moved up by 20px

Summary of common HTML / CSS knowledge

image.png

3.3.3 margin bottom setting negative value

<!--  In style, set a negative value -- >
.item1{
    margin-bottom: -20px;
}

As a result, Item1 did not move and Item2 moved up by 20px

Summary of common HTML / CSS knowledge

image.png

3.3.4 margin left setting negative value

Negative margin left value for Item3

<!--  Set a negative value -- > for item3markin left in style
.item3{
    margin-left: -20px;
}

Operation result: both Item3 and item4 move 20px to the left

Summary of common HTML / CSS knowledge

image.png

3.3.5 margin right setting negative value

Negative margin right value for Item3

<!--  Set a negative value -- > for item3markin right in style
.item3{
    margin-right: -20px;
}

Operation result: Item3 did not move, and item4 moved 20px to the left

Summary of common HTML / CSS knowledge

image.png

3.4 understanding and application of BFC

3.4.1 what is BFC

  • Block format context
  • An independent rendering area. The rendering of internal elements will not affect elements outside the boundary

3.4.2 common BFC conditions

  • Float is not none
  • Position is absolute / fixed
  • Overflow is not visible
  • Display is Flex / inline block

3.4.3 application of BFC

3.4.3.1 clear float

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .box {
          display: inline-block;
          width: 50px;
          height: 50px;
          line-height: 50px;
          border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div>
        <div>box</div>
        <p>A paragraph of text</p>
    </div>
</body>
</html>

After floating the box, the box is not in the container, that is, it is separated from the document flow and affects the layout

Summary of common HTML / CSS knowledge

image.png

At this time, the condition of adding container to the parent level will not be triggered, because the floating condition of container will not be added to BFC

.bfc{
      overflow: hidden;
  }

The effect is as follows

Summary of common HTML / CSS knowledge

image.png

3.5 float layout

3.5.1 using float to realize the Holy Grail layout and double wing layout

  • In the three column layout, the middle column is rendered and loaded first in order to display important contents at the first time
  • The content on both sides is fixed, and the content in the middle is adaptive with the width
  • Mainly used for PC web pages

3.5.1.1 realization of the Grail layout

  • Using float
  • Using position
  • Use a negative margin value
  • Leave both sides blank through the parent container

Basic style layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > grail layout < / Title >
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }
        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            width: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }
        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div>this is header</div>
    <div>
        <div>this is center</div>
        <div>this is left</div>
        <div>this is right</div>
    </div>
    <div>this is footer</div>
</body>
</html>

Code effect

Summary of common HTML / CSS knowledge

image.png

The steps and detailed codes for realizing the layout of the Holy Grail are as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > grail layout < / Title >
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }
        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            width: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
        }
        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
        /*1. Add floating for the left / Center / right element in the container*/
        #container .column {
          float: left;
        }
        /*2. Set the container to the left and right inner margins, leaving space on both sides*/
        #container {
          padding-left: 200px;
          padding-right: 150px;
        }
        /*
        *3. Due to floating, the container element is separated from the document flow, resulting in a high collapse of the container
        *Therefore, the container needs to clear the float
        */
        .clearfix::after {
          content: ' ';
          display: block;
          clear: both;
        }
        /*4. Set margin left to a negative value for left*/
        #left{
          margin-left: -100%; /*- 100% is the relative parent content width, that is, the width after removing the inner margin*/
        }
        /*5. Left sets the relative positioning and moves it to the left by its own width*/
        #left {
          position: relative;
          right: 200px;
        }
        /*6. Set margin right for the right element*/
        #right {
          margin-right: -150px; /* When margin right is set to a negative value, the parent container ignores its own width*/
        }
    </style>
</head>
<body>
    <div>this is header</div>
    <div>
        <div>this is center</div>
        <div>this is left</div>
        <div>this is right</div>
    </div>
    <div>this is footer</div>
</body>
</html>

Code implementation effect

Summary of common HTML / CSS knowledge

image.png

3.5.1.2 realization of double wing layout

The infrastructure code is as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > dual wing layout < / Title >
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
        }
    </style>
</head>
<body>
    <div>
        <div>
            this is main
        </div>
    </div>
    <div>
        this is left
    </div>
    <div>
        this is right
    </div>
</body>
</html>
Summary of common HTML / CSS knowledge

image.png

Key points of dual wing layout

  • Use flot layout
  • The sub container (#main wrap) of the middle container (#main) is set to margin left / margin right to leave the left and right columns blank
  • Margin left for the left container: – 100%;
  • The right container sets margin left: negative self width

The following is the step code to realize the dual wing layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > dual wing layout < / Title >
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #main {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #left {
            width: 190px;
            height: 200px;
            background-color: #0000FF;
        }
        #right {
            width: 190px;
            height: 200px;
            background-color: #FF0000;
        }
        /*1.  Set left float for three containers*/
        .col {
            float: left;
        }
        /*2.  Set the left and right outer margins of the child elements of the middle container to leave space on both sides*/
        #main-wrap {
            margin-left: 190px;
            margin-right: 190px;
        }
        /*3.  Set the margin left container to - 100%*/
        #left {
            margin-left: -100%;
        }
         /*4.  Set the left container margin left to - 190px*/
        #right {
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            this is main
        </div>
    </div>
    <div>
        this is left
    </div>
    <div>
        this is right
    </div>
</body>
</html>
Summary of common HTML / CSS knowledge

image.png

3.6 flex

3.6.1 common syntax of flex

  • Flex direction / / sets the direction of the spindle
  • Justify content / / spindle alignment
  • Align items / / alignment of cross axes
  • Flex wrap / / whether to wrap lines
  • Align self / / the alignment of child elements on the cross axis

Specific can learnFlex tutorial of Ruan Dashen

3.6.2 flex layout case

Realize three-point dice

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  < title > three point dice < / Title >
  <style>
    .container{
      width: 240px;
      height: 240px;
      padding: 10px;
      background-color: #5596ff;
      border-radius: 10px;
    }
    .item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
Summary of common HTML / CSS knowledge

image.png

Key points of code

  • Set the container to flex layout and set the alignment of child elements
  • Sets the alignment of child elements on the cross axis

The specific code steps are as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  < title > three point dice < / Title >
  <style>
    .container{
      width: 240px;
      height: 240px;
      padding: 10px;
      background-color: #5596ff;
      border-radius: 10px;
      /*1.  Set container to flex layout*/
      display: flex;
      justify-content: space-around; /* The alignment of child elements on the main axis is: both ends are aligned, and the spacing between items is equal*/
      align-items: center;/* The alignment of child elements on the cross axis is: middle alignment*/
    }
    .item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #fff;
    }
    /*2.  Child1 setting: align the starting point of the cross axis*/
    #child1{
      align-self: flex-start;
    }
    /*3.  Child3 setting: end point alignment of cross axis*/
    #child3{
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
Summary of common HTML / CSS knowledge

image.png

4. CSS positioning

4.1 absolute and relative

4.1.1 relative

  • Relative position according to itself
  • It will not affect external elements

4.1.2 absolute

  • Absolute is located according to the location element of the nearest layer. If it is not found, it is located according to the body element
  • An element whose position is set to relative / absolute / fixed is called a positioning element

4.2 what are the methods of center alignment

4.2.1 horizontal centering

  • Inlin element: text align: Center;
  • Block element: Margin: Auto;
  • Absolute element: left: 50%; Margin left: negative value (half of its own width);

4.2.2 vertical centering

  • Inlin element: line height: the height value of the container;
  • Absolute element: Top: 50%; Margin top: negative value (half of its height);
  • Absroute element: Transform: translate (- 50%, – 50%);
  • Absroute elements: set top, left, bottom, right to 0; margin: auto;

5. CSS graphic style

5.1 line height inheritance

5.1.1 inherited values

 <style>
    body{
      font-size: 20px;
      line-height: 20px;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

In the above code, the line height of the body element is 20px. At this time, the line height of the P tag will directly inherit the value 20px.

5.1.2 inheritance ratio

 <style>
    body{
      font-size: 20px;
      line-height: 1.5;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

In the above code, the line height of the body element is 1.5, that is, 1.5 times the font size, and the line height of the body is 30px; At this time, the P tag inherits the line height proportional multiple of the body. The line height of the P tag = (its own font size) * (the inherited line height proportional multiple). Therefore, the line height of the P tag in the above code is 24px.

5.1.3 percentage of inheritance

 <style>
    body{
      font-size: 20px;
      line-height: 200%;
    }
    p{
      font-size: 16px;
    }
  </style>
<body>
  <p>ABC</p>
</body>

In the above code, the line height of the body element is 200%. At this time, the line height of the body element is 40px. Because it is a percentage, the P tag inherits the line height result calculated by the parent element body, so the line height of the P tag in the above code is finally 40px.

6. CSS response

Common length units

  • PX is the absolute length unit. Since it is the absolute length, the response formula cannot be made
  • Em, relative length unit, relative to the font size of the parent element
  • Rem, relative length unit, relative to the font size of the root element
    Here we mainly introduce rem

6.1 rem


0.16rem results are as follows

Summary of common HTML / CSS knowledge

image.png

0.32rem results are as follows

Summary of common HTML / CSS knowledge

image.png

0.48rem results are as follows

Summary of common HTML / CSS knowledge

image.png

6.2 common solutions for responsive

6.2.1 implementation using media query and REM

Media query: set different font sizes according to different screen widths. The following code sets the font size of the root element for different mobile phones through media query:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > responsive layout < / Title >
    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /*For iPhone 5 or smaller size, set font size in proportion to the width (320px) of iPhone 5*/
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /*IPhone 6 / 7 / 8 and iPhone x*/
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px) {
            /*For iPhone 6p or larger, set font size in proportion to the width (414px) of iPhone 6p*/
            html {
                font-size: 110px;
            }
        }

        body {
            font-size: 0.16rem;
        }
        #div1 {
            width: 1rem;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div>
        this is div
    </div>
</body>
</html>

6.2.2 using VW VH to realize responsive

  • VH 1 / 100 of web page viewport height
  • VW 1 / 100 of the width of web page viewport
  • Vmax takes the maximum value of both (VH \ VW) and Vmin takes the minimum value of both (VH \ VW)
  • The problem of REM ladder is solved