After learning CSS and HTML, I found that I had many deficiencies in basic knowledge, so I decided to summarize what I had learned to deepen my impression and better deal with the interview.

HTML interview questions

1. How to understand HTML semantics?

define

Semantic simple understanding is to make the machine can understand the content, Html semantic refers to the use of semantically appropriate tags, so that the page has a good structure, so that the page elements have meaning.

role

  • After removing styles, the page presents a clear structure, making it easier to read and understand (increasing code readability).
  • Conducive to browser search engine inclusion (SEO)
  • Facilitate the sustainable operation and maintenance of team projects, so that developers can understand the structure.

Give an example

The code on the right below is HTML semantically, which is easier to read and understand than the code on the left

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

  • Display: block/table, div, h1,h2,table,ul, OL,p, etc
  • display:inline/inline-block; Span, img, input button, etc., features are not displayed in a line

CSS – layout

1. How to calculate the width of the box model?

Definition: There are two types of CSS box models: IE box model, standard W3C box model IE content contains border and padding;

For example: how big is the offsetWidth of div1?

<style>
       #div1{
           width: 100px;
           padding: 10px;
           border: 1px solid #ccc;
           margin: 10px;
       }
</style>
    
<div id="div1">
    this is div1
</div>
Copy the code

OffsetWidth =(content width + Padding + border), no outer border, so the answer is 122px. Add box-sizing:border-box to the stylesheet, then 100px will include the padding and border

2. The problem of longitudinal overlap of margin

For example: What is the distance between AAA and BBB?

<style>
       p{
           font-size: 16px;
           line-height: 1;
           margin-top: 10px;
           margin-bottom: 15px;
       }
</style>
Copy the code
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
Copy the code
  • Margin-top and margin-bottom of adjacent elements overlap
  • Blank content<p></p>Labels also overlap

3. The problem of margin negative value

Set negative values for top,left,right and bottom of margin.

  • Margin-top and margin-left are negative values, and elements move up and left
  • Margin-right is a negative value, and the right element moves to the left, not affecting itself
  • Margin-bottom is a negative value that moves on the element below it and does not affect it
<style> 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; </p> <div class="container"> <div class="item border-blue"> This is item 1</div> <div class="item border-red">this is item 2</div> </div> <p> <div class="container clearfix"> <div class="item border-blue float-left">this is item 3</div> <div class="item border-red float-left">this is  item 4</div> </div>Copy the code

Margin-top, margin-bottom,margin-right, and margin-left are used to test the actual item box

4. Understanding and application of BFC

What is BFC? How to apply it?

  • Block Format context, block format context
  • A separate rendering area where the rendering of internal elements does not affect elements outside the boundary
  • Common conditions that form BFC: float is not None, position is absolute or fixed, overflow is not Visible, display is flex inline-block, etc
  • Common BFC applications: Clearing floating
  • Code demo
<div class="container BFC "> <img SRC ="webp.webp.jpg" Alt ="" class="left" > <p class=" BFC "> .container{background-color: #ccc; border: 1px solid red; } .left{float: left; } img{margin-right: 10px; } .bfc{overflow: hidden; } </style>Copy the code

The BFC class added in the above example is used to render a separate region and only affects the elements inside the region, not the elements outside the region

5. Float layout issues, and ClearFix

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

Objective:

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

Technical summary

  • Use float layouts
  • Use margin negative values on both sides to overlap the middle content horizontally
  • To prevent the middle content from being overwritten by both sides, use a padding and a margin
<style> body{min-width: 550px; } header{background-color: #f1f1f1; text-align: center; } #left{background-color: red; width: 200px; margin-left: -100%; position: relative; right: 200px; } #center{background-color: yellow; width: 100%; } #right{background-color: green; width: 100px; margin-right: -100px; } footer{background-color: #f1f1f1; text-align: center; clear: both; } .container{padding-left: 200px; padding-right: 100px; } .container .column{float: left; } </style> <header>this is head</header> <div class="container"> <div id="center" class="column"> middle </div> <div id="left" <div > <div id="right" class="column"> </div> <footer> This is foot</footer>Copy the code

This is an example of the Holy Grail layout. Be sure to understand the left and right element style layout issues

< span style> body{min-width: 550px; } #main{background-color: #ccc; width: 100%; height: 190px; } #left{background-color: red; width: 200px; height: 190px; margin-left: -100%; } #right{background-color: green; width: 200px; height: 190px; margin-left: -200px; } .main-wrap{margin: 0 200px 0 200px; } .col{float: left; } < / style > < div id = "main" class = "col" > < div class = "main - wrap" > middle < / div > < / div > < div id = "left" class = "col" > left < / div > < div Id ="right" class="col"> </div>Copy the code

The above code is an example of a two-wing layout. Notice how the left and right elements are laid out

The difference between the two:

  • Both wings use margin for left and right, grail layout uses padding for left and right
  • The grail is more responsible

Clearfix by hand (write within 10 seconds)

/* Write clearfix */. Clearfix :after{content: "; display: table; clear: both; }.clearfix{*zoom:1} /* Compatible with earlier VERSIONS of IE */Copy the code

6. Flex paint dice

Flex implements a three-point die

Common syntax review: flex-direction, illustration-content, align-items, flex-wrap, align-self

<style> /* Use flex to draw a dice */. Container {width: 200px; height: 200px; border: 2px solid red; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; } .item{ width: 40px; height: 40px; background-color: #ccc; border-radius: 50%; } .item:nth-child(2){ align-self: center; } .item:nth-child(3){ align-self: flex-end; } </style> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>Copy the code

CSS – 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
  • Positioning elements: Absolute, fixed
  • Code examples:

What is the implementation of center alignment?

Horizontally centered (example for 3-11 positioning – solution -2)

  1. Inline element: text-align: center
  2. Block element: margin: Auto
  3. Abolute element: left: 50%+margin-left negative

Vertical center

  1. Inline element: line-height equals height
  2. Absolute: top: 50%+margin-top negative
  3. Absolute: transform (-50%, -50%) absolute: transform (-50%, -50%)
  4. Absolute: top,left, bottom, right=0+margin: auto

CSS – Graphic styles

Line-height inheritance problem

Code issues:

  • Write a specific value, such as 30px, to inherit the value (easier to understand)
  • Write ratio, such as 2/1.5, inherits the ratio (easier to understand)
  • Write percentage, such as 200%, then inherit the calculated value (考 试)
  • Code demo:

CSS – response type

What is REM?

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

How to implement responsiveness?

A common solution for responsive layout?

  • Media-query: sets the font size of the root element depending on the screen width
  • Rem, based on the relative units of the root element
  • Code demo: It is not necessary to write to understand the use of media

vw/vh

The downside of REM: ladder

Page viewport size

  • Window.screen. height // Screen height (same as width)
  • Window.innerheight // Viewport height of the web page (excluding the header and tail of the browser)
  • Document. Body. ClientHeight / / body height
  • Example demonstration:

  • Screenshot above example in 667 is the screen height, 553 is innerHeight, red square on the left is the document body. ClientHeight
  • vw/vh
    • Vh web page viewport height 1/100
    • Vw page viewport width 1/100
    • Vmax takes the maximum value of both; Vmin takes the minimum value of both
    • Code demo