HTML and CSS interview questions summary

HTML interview questions

How to understand HTML semantics?

Make it easier to read (increase the readability of the code)
Make search engines easier to read (good for SEO)

By default, which HTML tags are block-level elements and which are inline elements?

display: block/table; There are div h1-h5 table ul ol p etc.
display: inline/inline-block; 有 a b em strong i span img input button等

CSS interview questions

layout

Box model width calculation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

offsetWidth = (content width + inner margin + margin), no outer border
Therefore, the answer is 122px

How to make offsetWidth = 100px?
```
box-sizing: border-box;
```
Vertical overlap problem of margin:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			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>

The margin-top and margin-bottom of adjacent elements will overlap
Blank content
Will also overlap
The answer is 15px

Negative margin problem

Negative values of margin-top and margin-left, the element moves up and to the left
Negative value of margin-right, the element on the right moves to the left without affecting itself
Negative margin-bottom, the lower element will move up without affecting itself

What is BFC? How to apply?

black format context, block-level formatting context
An independent rendering area, the rendering of internal elements will not affect the elements outside the boundary
Common conditions for forming BFC
- float is not none
- position is absolute or fixed
- overflow is not visible
- display is flex, inline-block, etc.
Common applications of BFC
- Clear float
```
overflow: hidden;
```

float layout

The purpose of the Holy Grail layout and the double-wing layout

Three-column layout, the middle column is loaded and rendered first (content is the most important)
The content on both sides is fixed, the middle content is adaptive with the width
Generally used for PC web pages

Technical summary of the Holy Grail layout and the double-wing layout
Use float layout
Use negative margins on both sides to overlap the middle content horizontally

To prevent the middle content from being covered on both sides, one uses padding and the other uses margin

Holy Grail 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>圣杯布局</title>
    <style type="text/css">
        body {
         
         
            min-width: 550px;
        }
        #header {
         
         
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
         
         
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
         
         
            float: left;
        }

        #center {
         
         
            background-color: #ccc;
            width: 100%;
        }
        #left {
         
         
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
         
         
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
         
         
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
         
         
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<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>
</html>

Double wings 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>双飞翼布局</title>
    <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>
</head>
<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>
</html>

The Holy Grail layout uses padding, and the double wings use margin.

flex layout

Common syntax:

flex-direction switch the main axis direction
justify-content horizontal alignment
align-items vertical alignment
flex-warp whether to wrap display
The align-self property defines the alignment of flex items individually in the lateral (vertical axis) direction.

Responsive

What is rem?
- rem is a unit of length
  - px, absolute length unit, most commonly used
  - em, relative length unit, relative to the parent element, not commonly used
  - rem, relative length unit, relative to the root element, often used in responsive layout
Common solutions for responsive layout?
- media-query, set the font-size of the root element according to different screen widths
- rem, the relative unit based on the root element
- vw/vh vw/vh is relative to the width of the window, the window width is 100vw, and the window height is 100vh
- Percent, that is, the width and height of the box are in %, such as width: 20%

Positioning

relative based on its own positioning
absolute is positioned based on the nearest positioning element
- Positioning element:
- absoulute relative fixed
- body

Center horizontally

inline element: text-align: center;
block element: margin: 0 auto;
absolute元素：left: 50%; transfrom: translateX(-50%)

Vertically centered

Inline element: the value of line-height is equal to the value of height
absolute元素：top: 50%; transfrom: translateY(-50%)
absolute元素：top, left, bottom, right = 0; margin: auto

CSS3

Graphic style

Inheritance of line-height

body {
      
      
    font-size: 20px;
    line-height: 200%;
}
p {
      
      
    font-size: 16px;
}

The line height here is 40px, which needs to be calculated first and then inherited