Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

The introduction

This article summarizes some of the important issues in CSS. The chapters are organized from easy to difficult, and readers are advised to read them in chapter order. Hope that the reader read this article, there is a certain inspired thinking, but also on their own CSS master degree have a certain understanding, to make up for the omissions, have a better grasp of CSS.

The author will also stand in the perspective of the interviewer to answer the following questions, and appropriate analysis.

1. Talk about the types of CSS box models

CSS box model is mainly divided into standard box model and IE box model, the content width of the two box models is different:

Standard box model: Content width = content

IE box model: Content width = content + border + paddin

2. Talk about the priority order of CSS selectors

Take! The style attribute of the important tag has the highest priority; The stylesheet comes from the same source:! Important > Inline Style >ID selector > Class selector > Tags > Wildcards > Inheritance > Browser default properties

3. Talk about your understanding of BFC

BFC literally stands for block-level formatting context. Elements with BFC properties can be treated as separate containers. The elements inside the container do not affect the layout of the elements outside the container, and BFC has some features that normal containers do not have. In layman’s terms, the BFC can be thought of as a large, closed box, where the elements inside the box, no matter how turbulent, do not affect the outside.

Conditions for the formation of BFC

  • The BFC feature can be triggered if an element meets any of the following criteria:
  • Body root element
  • Float element: float a value other than None
  • Absolute position elements: Position (Absolute, fixed)
  • Display inline-block, table-cells, flex
  • Overflow values other than visible (hidden, auto, Scroll)

Common functions of BFC

  • Remove the floating
  • Remove margin overlap

4. A way to hide an element on a page

1. Visibility: Hidden will not change the page layout, and leaving the original space in the document layout will cause redrawing

2. Display: None changes the layout of the page. No longer allocating space in the document layout causes backflow + redraw

This element is hidden, but does not change the page layout, and if the element is already bound to any event, such as click, clicking on the area will also trigger the click event

5. Talk about your understanding of rearrangement and redrawing

  • Rearrangement: Generally, changing the width, height, and other geometric attributes of an element that affect its position will cause rearrangement
  • Redraw: Normally changing the color of an element or background will cause redraw

Two ways to reduce rearrangements and redraws are commonly used for performance optimization purposes:

  • Minimize redraw and rearrange, such as style set changes, use add new style class name.class 或 cssText 。
  • Using **absolute** or **fixed** to remove elements from the document flow can have a significant impact on performance when making complex animations.

6. How to draw a 0.5px straight line using pure CSS

<div class="half"></div> <style> .half { width: 300px; background-color: #000; height: 1px; The transform: scaleY (0.5); /* transform origin: 50% 100%; /* transform origin: 50% 100%; < span style>Copy the code

7. How to create a triangle with pure CSS

<div class="content"></div> <style> .content { width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent pink; } </style>Copy the code

8. How to use CSS to center vertically

Use absolute positioning and Transform (for not knowing the width and height of the inside box)

<div id="box">
    <div id="child"/>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Use absolute positioning and margins (for knowing the width and height of the inside box)

<div id="box">
    <div id="child"/>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 300px;
    height: 300px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}
Copy the code

Use Flex layout (for any situation)

<div id="box">
    <div id="child"/>
</div>

#box {
    display: flex;
    background: #ddd;
}
#child {
    align-items: center;
    justify-content: center;
    background: orange;
}
Copy the code

9. Implement a two-column layout

Using floating

<div id="left"> </div> <div id="right"> </div> </div> #outer {height: 100px; } #left { float: left; width: 200px; height: 100%; background: lightcoral; } #right { margin-left: 200px; height: 100%; background: lightseagreen; }Copy the code

usingflexlayout

<div id="left"> </div> <div id="right"> </div> </div> #outer {display: flex; height: 100px; } #left { width: 200px; height: 100%; background: lightcoral; } #right { flex: 1; height: 100%; background: lightseagreen; }Copy the code

Make use of absolute positioning

<div id="left"> </div> <div id="right"> </div> #outer {position: relative; height: 100px; } #left { position: absolute; width: 200px; height: 100%; background: lightcoral; } #right { margin-left: 200px; height: 100%; background: lightseagreen; } Duplicate codeCopy the code

10. Achieve the Holy Grail layout and The Twin Wing layout (three columns)

Grail layout and twin wing layout purpose:

  • A three-column layout, with the middle column loading and rendering first (content is most important, which is why you need to know about this layout).
  • The content is fixed on both sides, and the content in the middle ADAPTS to the width.

The holy grail layout

<div id="container" class="clearfix">
  <p class="center"></p>
  <p class="left"></p>
  <p class="right"></p>
</div>

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: lightcyan;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
Copy the code

Twin wing layout

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}

Copy the code

recommended

If you want to continue learning about browsers, you can watch another article by me on juejin.

If you want to continue to learn the Vue principle of readers, you can watch another article by the author [interview treasure guide] high frequency front end questions of Vue principle of readers – nuggets (juejin. Cn)

If you want to continue to learn the JS principle of readers, you can watch the author of another article [interview treasure guide] high frequency front end questions of JavaScript principle – nuggets (juejin. Cn)

If there are readers who want to continue to learn the common method of handwriting JS, you can watch the author of another article [interview treasure guide] high frequency front end questions of handwriting commonly used JS method – digging gold (juejin. Cn)

conclusion

This article is the author’s personal study notes, if there are fallacies, please inform, thank you! If this article has been helpful to you, please click the “like” button. Your support is my motivation to keep updating.