HTML interview questions

How to understand HTML semantics

Make search engines easy to read (SEO)

Block level elements & inline elements

Block LEVEL: DIV H1 /2/3/4/5 table UL OL P inline: SPAN IMG input button

CSS interview questions

1. The layout

How to calculate the width of the box model

  1. Box-sizing: content-box (default)

Width = width of the content height = height of the content width and height are not included in the content border and padding. Width = border + padding + content height = border + padding + content height

Margin vertical overlap problem (margin collapse)

Margin-top and margin-bottom of adjacent elements overlap.

Margin calculation: positive number & positive number: take the largest negative number & negative number: the largest absolute number positive number & negative number: the sum of the sums

In addition, notice that the block-level elements with empty contents are normally ignored because their height is zero. However, margin is the largest if the upper and lower margins are set, and the largest among the four if the margins of the upper and lower adjacent elements exist.

<! DOCTYPEhtml>
<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 longitudinal overlap</title>
    <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

</body>
</html>
Copy the code

Margin (top left right bottom); margin (top left right bottom)

Margin-top and margin-left are negative values, elements move up and left margin-right are negative values, right elements move left, it is not affected by margin-bottom, bottom elements move up, it is not affected by itselfCopy the code

When margin-top is negative:When margin-left is negative:When margin-bottom is negative:Margin-right when margin-right is negative:

BFC understanding and application, what is BFC and how to use it

  1. BFC -> Block Format Context (BFC) -> Block format context (BFC) -> Block format context (BFC) -> Block format Context (BFC) -> Block format context (BFC) -> Block format context (BFC)

  2. Common conditions for an element to form a BFC:

    Float is not None b. position is absolute or fixed C. overflow is not visible (hidden) D. display is flex inline-block, etcCopy the code

  3. How to use BFC -> to clear height collapse of parent elements caused by floats in float layouts.

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> <style type="text/css"> .container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; </style> </head> <body> <div class="container BFC "> <img src="https://img3.sycdn.imooc.com/5e87e32c0001c80707000700-140-140.jpg" class="left" style="margin-right: 10px;" /> <p class=" BFC "> </p> </div> </body> </html>Copy the code

Float layout problems

  1. How to achieve the holy cup layout and the twin wing layout

Grail layout and Twin wing layout purpose:

A. Three-column layout with the middle column loaded and rendered first (content is the most important) b. Fixed content on both sides, middle content ADAPTS to width c. Generally used for PC web pagesCopy the code

// Technical summary of grail layout and Twin wing layout:

A. Use float layout b. Use margin negative values on both sides to overlap the middle content horizontally C. To prevent the middle content from being covered by both sides, use padding for one and margin for the other.Copy the code
Grail layout:

  1. Use padding to make room for the left and right columns

  2. Use margin-left: -100% for the left column, move it by one center, then use position: relative right: left column width, offset it left to fill the reserved left column space. The correct middle column width is not known, so use percentages.

  3. The right column is relatively simple, use margin-right: -150px (you can use margin-left if you want, but add position relative, and relative offset > not worth the loss).

  4. The above requires that the three columns should be wrapped in a container DIV, so that the middle column can be compressed into two columns by the inner margin. In addition, the left column should be moved relative to the edge of the container. If it is not used, it should be relative to the body, which is more difficult to understand. Of course, with a twin-wing layout, there are no such requirements.

<body> <div id="header">this is header</div> <div id="container" class="clearfix"> <div id="center" class="column">this is center</div> <div id="left" class="column">this is left</div> <div id="right" class="column">this is right</div> </div> <div id="footer">this is footer</div> </body> <style type="text/css"> body { min-width: 550px; } #header { text-align: center; background-color: #f1f1f1; } #container {/* Need a fixed position for the left and right sides */ padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { background-color: #ccc; width: 100%; } #left {/* left} #left {/* left */ background-color: yellow; width: 200px; margin-left: -100%; /* Set -100% to move it one layer to the left of the container, then set it 200px to the right of the origin. Fill the container with 200px to the left */ right: 200px; } # background-color: red; background-color: red; background-color: red; width: 150px; margin-right: -150px } #footer { text-align: center; background-color: #f1f1f1; } .clearfix:after { content: ''; display: block; clear: both; } </style>Copy the code
Twin wing layout
  1. Double wing layouts use margins to leave space on both sides
  2. Without the padding, the left column uses margin-left: -100% to shift to the left of the center column
  3. In the right column, use margin-left to move yourself to the right. Using margin-right will cause you to edge the middle column, because the right side of the middle column uses margin to occupy space. The right column only uses a margin-left negative value to reduce its width to 0 in order to pan to the right.

4. Simplicity From a code point of view, the twin wing layout takes a lot less work than the Holy Grail layout.

<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>

<style type="text/css">
    body {
        min-width: 550px;
    }
    .col {
        float: left;
    }

    #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
    }
    #main-wrap {
        margin: 0 190px 0 190px;
    }

    #left {
        width: 190px;
        height: 200px;
        background-color: #0000FF;
        margin-left: -100%;
    }
    #right {
        width: 190px;
        height: 200px;
        background-color: #FF0000;
        margin-left: -190px;
    }
</style>
Copy the code

Flex layout

Container properties:Project Attributes: Ruan Yifeng teacher’s Flex practice

2. The positioning

What are absolute and relative based on

Relative refers to its position

Absolute Specifies the location based on the location element of the nearest layer

Absolute relative fixed (body, without the first three)

Implementation of center alignment

  • Horizontal center

Inline element: text-align: center

Block element: margin: Auto

Absolute element: left: 50% + margin-left negative value half of its width

<body> <div class="container container-1"> <span> A text </span> </div> <div class="container container-2"> <div class="item"> this is block item </div> </div> <div class="container container-3"> <div class="item"> this is absolute item </div> </div> </body> <style type="text/css"> .container { border: 1px solid #ccc; margin: 10px; padding: 10px; } .item { background-color: #ccc; } /* Inline: text-align: center*/. Container -1 {text-align: center; } /*block element: margin: auto*/. Container - 2. item {width: 500px; margin: auto; } /* Absolute: left: 50% + margin-left negative: 50% */. Container -3 {position: relative; height: 100px; } .container-3 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; } </style>Copy the code
  • Vertical center

Inline element: line-height equals height

Absolute: top: 50% + margin-top negative

Absolute element: transform (-50%, -50%), incompatible

Absolute: top,left,bottom,right = 0 + margin: auto, good compatibility

<body> <div class="container container-1"> <span> A text </span> </div> <div class="container container-2"> <div class="item"> this is item </div> </div> <div class="container container-3"> <div class="item"> this is item </div> </div> <div class="container container-4"> <div class="item"> this is item </div> </div> </body> <style type="text/css">  .container { border: 1px solid #ccc; margin: 10px; padding: 10px; height: 200px; } .item { background-color: #ccc; } /* Inline: line-height equals height */. Container -1{text-align: center; line-height: 200px; height: 200px; } /* Absolute element: top: 50% + margin-top negative */. Container -2 {position: relative; } .container-2 .item { width: 300px; height: 100px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -50px; } /* Absolute: transform (-50%, -50%) */. } .container-3 .item { width: 200px; height: 80px; position: absolute; left: 50%; top: 50%; transform: Translate (-50%, -50%)} /* Absolute elements: top,left,bottom,right = 0 + margin: auto */. Container -4 {position: relative; } .container-4 .item { width: 100px; height: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style>Copy the code

3. Graphic style

How does line-height inherit

  • Fix the number 10px, the child element inherits directly, and line-height is also 10px

  • Font-size: 10px * 1.5 = 15px

  • Font-size: 20px; the child element inherits the fixed number 40px instead of the percentage.

<style type="text/css"> body { font-size: 20px; line-height: 200%; /* 40px */ } p { background-color: #ccc; font-size: 16px; } </style> <body> <p>Copy the code

4. The response type

There are many reactive solutions, but REM is still used.

What is rem

Rem a unit of length

  • Px, the absolute unit of length, most commonly used
  • Em, unit of relative length, parent element, not often used
  • Rem, a unit of relative length, relative to the root element, often used in reactive layouts

Common scenarios for responsive layouts

  • Media-query, set the root element font size + REM according to different screen widths. These ratios are fixed and will not change
<body> <div id="div1"> this is div </div> </body> <style type="text/css"> @media only screen and (max-width: Font size */ HTML {font size: 86px; }} @media only screen and (min-width: 375px) and (max-width: 413px) {/* iphone6/7/8 and iphonex */ HTML {text-align: left; 100px; } } @media only screen and (min-width: Font size */ HTML {font size: 110px; }} body {font-size: 0.16rem; } #div1 { width: 1rem; background-color: #ccc; } </style>Copy the code
  • Vw, VH scheme, poor compatibility

Rem has drawbacks: echelon, 374-XXX 375-xxx

Height // The screen height is 667

Window.innerheight // The viewport height of the web page is 553. When using the emulator, the viewport height is 667 because there is no navigation bar

Document. Body. ClienHeight / / body height

Vh is 1/100 of the height of a web page viewport

Vw is 1/100 of the width of the viewport

Vmax is set to the maximum value and vmin to the minimum value

<body>
    <p>vw vh 测试</p>
    <div id="container">
    </div>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #container {
        background-color: red;
        width: 10vw;
        height: 10vh;
    }
</style>

Copy the code