preface

Year after year job-hopping season, ready to start from the interview content to see the front-end related knowledge points, aimed at exploring a series of knowledge points, ability within the scope of in-depth exploration. Focus on practice, for the primary front-end and prepare for the interview of the students, try to attach actual code examples and related questions ~ series name is used [bald break front-end interview] — because the circle of consensus, technology is proportional to the amount of hair. 😄 hope we can break the bottleneck as soon as possible

There are too many articles about interview questions or certain knowledge points. Here I just want to record my personal summary in the form of code warehouse and output the article. After all, theory is not equal to practice

Related articles:

  • Bald front-end interviews — HTML5
  • Bare end Interview – new feature in ES6+
  • Bald front end interview — CSS3
  • Bald break front end interview — other related

What is the range of

CSS, as it is known, is short for Cascading Style Sheets, a markup language that is interpreted and implemented by the browser to make pages look better. While CSS3 is the latest standard for CSS, CSS3 is backward compatible, so all features of CSS1/2 are available in CSS3. And CSS3 also added a lot of new features, for the development of great convenience, it is worth our understanding.

CSS3 is backward compatible, so cSS1/2 is supported. It can also be used in CSS3. If CSS3 is forward compatible, it means that CSS1/2 accepts CSS3 as written, which is not the case. So CSS3 is backward compatible.

Range of new features

CSS3 update contains many features and is very easy to use, specifically contains the following several large module updates, we will introduce one by one through the code.

The selector

CSS3 has many new selector properties, greatly simplifying the code, and greatly improving the performance of the program. For example, for a color-changing table, it is very easy to use CSS3:

tbody tr:nth-child(odd) {
  background-color: aqua;
  opacity: 0.7;
}
tbody tr:nth-child(even) {
  background-color: orange;
  opacity: 0.7;
}
Copy the code

The actual effect is shown below:

There are many more attributes, some of which are listed briefly below, and many more that can be documented and used.

Ele:nth-last-child(n) 
Ele:nth-of-type(n) 
Ele:nth-last-of-type(n) 
Ele:last-child 
Ele:first-of-type 
Ele:only-child 
Ele:only-of-type 
Ele:empty 
Ele:checked 
Ele:enabled 
Ele:disabled 
Ele::selection 
Ele:not(s)
Copy the code

The box model

There are three kinds of box model: box – sizing: content – box | border – box | inherit, the default is the content – box.

As shown in the following code, the container contains two images, both 50% wide, but the image has a border, and the element box model defaults to a Content-box, so the image folds because it overflows.

<style>
    .container img {
      width: 50%;
      border: 1px solid # 111;
    }
</style>
<div class="container">
    <img src="./css3.jpg" /><img src="./css3.jpg" />
</div>
Copy the code

Box-sizing :border-box = box-sizing:border-box; box-sizing:border-box

.container img {
  box-sizing: border-box;
  width: 50%;
  border: 1px solid # 111;
}
Copy the code

As you can see, it becomes a line. Because the border-box evaluates the border inside width.

layout

CSS3 has added many layout related properties, such as Flex layout and multi-column layout.

Flex layout

Flex layout personally think is really the most convenient and concise layout, Flex related attributes are particularly many, remember is not too realistic, the interview will be commonly used a few on the line, specific I think Ruan Yifeng’s article is written well, I will not copy and paste here. — Ruan Yifeng Flex layout

Multi-column layouts

Multi-column layout is a new property in CSS3, which is extremely convenient when dealing with content that needs to be displayed in multiple columns. It mainly includes the following attributes:

  • Column-count: sets the number of columns in the layout
<style>
    .column-2 {
      column-count: 2;
    }
    .column-3 {
      column-count: 3;
    }
</style>
Copy the code

As shown in the figure below, it is very simple to achieve a uniform layout of several columns.

  • Column-gap: specifies the interval between columns
.column-2 {
  column-count: 2;
  column-gap: 80px;
}
Copy the code

  • Column-rule: Property sets the width, style, and color rules between columns
.column-3 {
  column-count: 3;
  column-rule:3px outset #ff0000;
}
Copy the code

As you can see, the layout is very simple, the code is extremely simple, and the compatibility is also good, basically now the mainstream browsers can support.

Multi-column layouts are ideal for newspaper, paper, and book article types.

Background and border

CSS3 adds new attributes to elements’ backgrounds and borders.

background

  • Background-clip: Specifies the drawing area of the background
.container {
  border: 4px solid orchid;
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url('./css3.jpg'); background-clip: border-box; // By default, start at border} <div class="container" />
Copy the code

.container {
  border: 4px solid orchid;
  padding: 20px;
  width: 300px;
  height: 200px;
  background-image: url('./css3.jpg');
  background-clip: content-box;
}
Copy the code

As you can see in the figure below, the area drawn does not contain padding.

  • Backround-origin: specifies the location area of the background image

    background-origin: border-box; Calculate background-position from border.

background-origin: padding-box; Computes background-position from padding-.;

background-origin: content-box; Calculates background-position from content.

  • Background-size: Specifies the size of the background image

    background-size: contain; Shrink image to fit elements (maintain pixel aspect ratio)

background-size: cover; Extend elements to fill elements (maintain pixel aspect ratio)

background-size: 100px 100px; Reduce the image to a specified size.

background-size: 50% 100%; Shrink the image to the specified size. The percentage is relative to the size of the contained elements.

A border

Border is very simple, just a few border specific properties, here directly in the code to illustrate.

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Border</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background-color: gold;
      margin: 20px 0;
    }
    .radius {
      border-radius: 8px;
    }
    .half-radius {
      border-top-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .shadow {
      box-shadow: 10px 10px 5px # 888888;} .border-img { width: 200px; border:15px solid transparent; border-image: url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */ -webkit-border-image: url(border-.png) 30 30 round; /* Safari and Chrome */ -o-border-image: url(border-.png) 30 30 round; /* Opera */ } </style> </head> <body> <div class="box radius"> rounded </div> <div class="box half-radius"> part rounded </div> <div class="box shadow"> border shadow </div> <div class="border-img"> Border background </div> </body> </ HTML >Copy the code

The specific effect is shown in the figure above, and it is important to note that when setting the border background, the border should be set to transparent ~

Text effect

  • Font, the font – face

First, if you have a font file, you can introduce fonts in one of the following ways.

@font-face { 
  font-family: fontname; 
  src:url(font-name.eot); 
} 
Copy the code

Second, CSS3 adds the tag to set the font.

 <p><font style="font-family: STKaiti"</font></p>Copy the code

  • text-overflow
.overflow {
  white-space: nowrap; 
  width: 100px;
  overflow: hidden;
  text-overflow:ellipsis;
}
<p class="overflow"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

  • text-shadow && word-wrap

Text shadow effect && text wrap effect

.shadow {
  width: 100px;
  text-shadow: 5px 5px 5px #FF0000;
}
.wordwrap {
  word-wrap: break-word;
}

<p class="shadow wordwrrap"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

2 d / 3 d conversion

CSS3 added 2D/3D transformations to allow us to move, scale, rotate, stretch or stretch elements. Setting up performance using CSS is better than setting up performance using JS, so it’s worth learning.

The 2 d transformation

A 2D transformation is doing everything in a plane, changing elements by manipulating X and Y.

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0"> <title>Transform</title> <style> .translate-2d { width: 100px; height: 100px; background-color: aqua; transform: translate(150px, 100px); } .rotate-2d { width: 100px; height: 100px; background-color: orange; transform: rotate(30deg); } .scale-2d { width: 100px; height: 100px; background-color: green; The transform: scale (0.5, 2); } .matrix-2d { width: 100px; height: 100px; background-color: red; Transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); } < / style > < / head > < body > < h1 > 2 d transformation < / h1 > < div class ="translate-2d"> distance left 150 <br/> distance top 100 </div> <div class="rotate-2d"> rotate 30 degrees </div> <div class="scale-2d"</div> <div class= <br /> y </div> <div class="matrix-2d"> Matrix method </div> </body> </ HTML >Copy the code

3 d conversion

The difference between 3D and 2D is that the 3D transformation is stereoscopic and the z-axis is added. Although the elements are also manipulated, the effect is very different from THAT of 2D. The rotate+X/Y/Z is used.

To see the difference, here’s a simple animation:

@keyframes animate-2d { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes animate-3d { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); }}Copy the code

animation

Transition/Animation + KeyFrame CSS3 animation + KeyFrame Then there is the canvas animation mentioned in HTML5, and the JS requestAnimation animation, so we may use a separate article to explain ~

conclusion

CSS3 related features API and corresponding knowledge points are almost, if the interviewer asked CSS3 new features, can answer the above and simple use I think it is almost, reasonable, so many who can remember ah, the interviewer must also have to check the document, ha ha ~

Related code address: bald broken front-end interview series code