• All of the following texts are included in the warehouse:… /top-fe-iqa, content scope bureau are incssContains only a small number ofcss3related
  • First published: November 30, 2020
  • Updated on December 02, 2020
  • Read online address:… / CSS/box_model. HTML…
  • Suggested reading length: Flip through it every now and then
  • Recommended reading target: junior and intermediate front-end engineers, CSS enthusiasts
  • Interview questions and reference answers are published on November 30, 2020

preface

After this year’s gold three silver four gold nine silver ten, next year’s golden opportunity is coming, whether has been unable to resist the restless heart. In short, it’s never too early to start preparing for an interview! This is the author formally before thick said the role of the post. Let’s start with a few tips:

  1. The following interview questions are not guaranteed to be completely appropriate, there are mistakes or inaccuracies, please actively correct, so as not to mislead the community partners
  2. Not all of themCSSKnowledge point, but it is a very representative topic
  3. The content below will be added or modified from time to time
  4. Less full textcss3– there will be a separate article on the new features

1. Do you understandThe box modelWhat is the difference between the standard CSS box model and the lower version IE box modelbox-sizingWhat are the common attributes? What are the effects of each?

  • The box model is the core concept in CSS layout. A box is equal to itself + padding + border + margin
  • There is a property in CSS3box-sizing
    • Border-box refers to the standard of the WEIRD box model W3C specification
    • Content-box refers to the standard box model developed by IE box model IExplore
  • In IExplore, missing declarations in HTML documents trigger the weird box model
* {box-sizing: border-box;
}
Copy the code

Do you know what isBFC?BFCWhat are the layout rules for? How do I create a BFC?

  1. What do you know about BFCBFC 吗
  2. What are the layout rules of the BFC?
  3. How do I create a BFC? What are the trigger conditions
  4. What are the roles and scenarios

Understanding of block-level context

  • Block
  • Formatting Context

Block-level formatting the separate rendering areas of a context page determine the layout, relationships, and interactions of the nodes in the rendering area

Context Abbreviation Version Declaration Block Formatting Context BFC 2-level box container inline formatting context IFC 2-level box container elastic formatting context FFC 3 Elastic box container Grille formatting context GFC 3 grille box containerCopy the code

BFC layout rules

The BFC is a separate and isolated rendering area on the page, and the child nodes in the container do not affect the layout of the outside nodes and vice versa.

  • The vertical distance of the child node is determined by the margin. The margin of adjacent nodes will overlap, and the maximum margin is taken as the merged value
  • The BFC area does not overlap with the same floating area

What are the trigger conditions

  • The root element HTML
  • Absolute position: Absolute /fixed
  • Floating node float:left/right
  • Non-overflow visible node overflow! visible
  • Display table layout or elastic layout inline-block, table-cell, table-caption

And so on…

Functions and Scenes

  • To preventmarginOverlap occurs (margin overlap of adjacent elements)

In general, when both the upper and lower elements have margins, there will be overlap, which is only 50px in fact. The so-called collapse is actually caused by the interaction between two BFC adjacent boxes or parent-child boxes. The two boxes will take the maximum margin of the adjacent edge as the common margin of the adjacent edge.

.box1 {
  margin-bottom: 50px;
}
.box2 {
  margin-top: 50px;
}
Copy the code
  • Prevents floating nodes from being overwritten
.parent {
  width: 100px;
  /* Height collapse occurs when the parent element does not write height */
  /* height: 100px; * /
  border: 1px solid #ccc;
}

.float {
  float: left;
  width: 50px;
  height: 50px;
  background-color: #eee;
}
Copy the code
  • Remove the floating
overflow: auto;
/ * or * /
display: flow-root;


Copy the code

Or developing commonly used to remove the floating fett.net lify. The app/guides/CSS /…

Tell me, pleasecssAnd the priority of the selector

preface

The basic rules for selectors are roughly the following, and their basic function is to select HTML elements

Selector {property value; The attribute value}Copy the code

Note that the browser is looking for elements from right to left

div .box a{}Copy the code

! Important > Inline style = inline Style > ID selector > Class selector = Pseudo-class selector = Attribute selector > Element selector = pseudo-element selector > wildcard selector = descendant selector = sibling selector

There’s a weight problem that’s going to be involved here

10000:! Important 1000: Inline style, inline style 100: ID selector 10: class selector, pseudo-class selector, attribute selector 1: element selector, pseudo-element selector 0: wildcard selector, descendant selector, sibling selectorCopy the code

The selector

Basic classification of selectors

  • Element selector
  • The pseudo-element selector ::before is not in the DOM tree
  • Class element selector
  • Attribute selector [type=radio]
  • Pseudoclass selector :hover
  • ID selector page is generally unique
  • Combinatorial selector
  • Negative selector selects in reverse
  • Universal selector

Basic selector

The selector The alias use
* The wildcard * {}
tag Label selector p{}
.class class . {}
#id The id selector # {}

Pseudo elements

The selector The alias use
::before Insert before the element
::after Insert after the element

Hierarchy selector

The selector The alias use
elem1+elem2 Adjacent sibling
elem1~elem2 Fellow Gm

The weight of the selector

High-priority cascading low-priority styles are actually a more complex problem

The selector Weight a
inline + 1000
id + 0100
Class selectors, properties + 0010
Element, pseudo element + 0001
* + 0000
inheritance There is no weight

Via Color: PowderBlue! important; Increase your own weight (its priority is the highest), then the same weight is written after the effect

4. WhenRemove the floating? How do I clear the float? How does it work

Using float causes the node to flow out, causing the height of the parent node to collapse, and it is necessary to clear the float for the parent node if the height is not explicitly declared. Define the following clearfix to clear the float, adding it to the parent node

.clearfix::after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    content: "";
}
Copy the code

5, Tell me about your rightbase64Understanding and usage scenarios

  1. Used to reduce the number of HTTP requests
  2. Good for small images
  3. The volume will increase

6. Centered Layout: Centered floating elements? Absolutely centereddiv

Vertical centering is divided into horizontal centering, and vertical centering, and complete centering (both horizontal and vertical centering). It is not necessary to memorize the next implementation method

Horizontal center

  1. Inline elements can be declared on their parent nodetext-align: center;For inline, inline block, inline table, inline Flex
  2. Block-level elements can pass throughmargin: 0 auto; + The width of the width(To achieve horizontal center in modern browsers, use display: Flex; justify-content: center; However, this code does not work in older browsers such as Internet Explorer 8-9 that do not support elastic box layouts. To center the parent element, use margin: 0 auto.
  • A node that is not a block-level element must be declared display:block
  • You do not need to explicitly declare width if the node width is implicitly declared
  1. Position absolute+ move transform
  2. Absolute +margin negative margin solution
  3. display:flex + justify-content:center

Vertical center

  1. Child elements are single-line text words directlyline-heightEquals the height of the parent node
  2. display:flex + align-items:center
  3. Position absolute+ move transform
  4. Absolute +margin negative margin solution

Horizontal and vertical are centered

The width and height of the element are fixed

Absolutely positioned at 50% and then adjusted by margin, browser compatibility is good

<div class="parent">
  <div class="child"></div>
</div>
Copy the code
.parent {
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
}
Copy the code

or

.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
Copy the code

The width and height of the element are unknown

.parent {
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin: -50px 0 0 -50px; * /
  transform: translate(-50%, -50%);
}
Copy the code

Powerful Flex layout combined with Margin

.parent {
  display: flex;
  div {
    margin: auto; }}Copy the code

7,displayWhat are the values and what do they do?

  • Nodes marked as block-level elements block, list-item, table, Flex, or Grid participate in the block formatting context
  • Nodes marked inline elements inline, inline-block, inline-table, inline-flex, or inline-grid participate in the inline formatting context

8. What are the ways to hide elements in a page

Opacity: 0, visibility: hidden, display: none 2. Ways to hide elements on a pageCopy the code

Display: None and visibility: Hidden are often used to control the hiding of nodes during normal document flow layout.

Opacity :0 opacity:0 position:relative; opacity:0 opacity:0; Z-index :-1 The node is invisible but occupies space and cannot be clickedCopy the code

9,imgBelow the gap 3px principle

Img follows a vertical alignment according to the baseline alignment (as in inline), and can align vertical-align:bottom

Since the alignment is inline, you can change it to block alignment

10,css resetandnormalize.cssWhat’s the difference?

Default styles make sense, such as drop-down boxes, forms, and headings; But the default style still creates problems, and customization costs can be high

  • Li’s list-style is one of the default styles for tags

In practice summed up a lot of schemes

css reset

Is a direct reset, such as we use in development

* {padding:0;
  margin:0
}
Copy the code

normalize.css

The starting point is not to get rid of the browser default styles but to accommodate different representations and keep the padding margin of some elements

11. Please tell us the position of the CSS

Understanding Positioning

Basic idea of positioning:

It allows you to define where an element box should appear relative to its normal position, or relative to a parent element, another element, or even the browser window itself.

CSS Positioning mechanism (3 types)

There are three basic positioning mechanisms of the CSS

  • Normal flow
  • floating
  • Absolute positioning

CSS Position Indicates the value of the property

Attribute values meaning describe
Static The element box is generated normally. Block-level elements generate a rectangular box as part of the document flow, while inline elements create one or more line boxes to be placed in their parent element. The default value. Without positioning, the element appears in normal flow
Relative The element box is offset by a distance. The element remains as it was before it was positioned, and the space it originally occupied remains. Generates a relatively positioned element that is positioned relative to its normal position.
Absolute The element box is completely removed from the document flow and positioned relative to its containing block. Generates an absolutely positioned element relative to the first parent element other than the static positioned element.
fixed The element box behaves like setting position to Absolute, except that the contained block is the window itself Generates an absolutely positioned element, positioned relative to the browser window.
inherit Specifies that the value of the position attribute should be inherited from the parent element.

12,pseudo-classesandPseudo elementsThe difference between?css3What are the new pseudo classes?

First of all pseudo-classes and pseudo-elements are selectors such as tag class selectors and so on

  • Pseudoelement: elements that do not exist on the page are not explicitly declared in the code :before and :after (CSS2 already exists). It can also be written as ::before/::after with two colons (compatibility with lower versions suggests using a single colon legacy).

  • Pseudo class: refers to state selectors such as hover: Focus and: Checked states

::after 和:afterThe difference between

Two colons in the form (compatibility with lower versions of the recommendation to use a single colon legacy)

<p class="p-box">
    <span>:before</span>
    CSS
    <span>:after</span>
</p>
Copy the code

Pseudo-elements are typically used in conjunction with content

.p-box{&::before{
    content: 'before';
  }
  &::after{
    content: 'after'; }}Copy the code

13. The CSSvertical-alignWhat are the values? Under what conditions can it take effect?

The default font is aligned to the baseline, vertical-align is the alignment of the font

  • It could be the pixel value px
  • But is the top
  • middle
  • bottom

14,z-indexWhat should I pay attention to?

The combination of position and Z-index can generate the cascading context. It has always been believed that Z-index only defines the cascading sequence of a node on the Z-axis in three-dimensional space, and the higher the value is, the closer it is to the screen observer. In fact, this understanding is not comprehensive, but also pay attention to the following two points.

  • Z-index only works on the node where the location is declared
  • The cascade order of nodes on the Z-axis is determined by z-index, the cascade context and the cascade level

Please talk about itcssWhat are the units in? And the difference?

Unit Definition Type Description PX pixel absolute unit - cm cm absolute unit - % % relative to unit relative to parent em M width relative to unit relative to current node font REM M width relative to unit relative to root node font VH window height relative to unit relative to windowCopy the code

A resolution of 1920×1080 means 1920 pixels horizontally and 1080 vertically

Em/rem

Em and REM are common units of length in mobile layouts, and both have the same suffix. Rem stands for root EM, which means unit of length relative to the root node as a reference.

Em: the font width of the current node is exactly the width of one M relative to the parent node rem: the font width of one M relative to the root node rem: the font width of one M relative to the root node rem: the default font width is 16px. So what’s different about them?

1, PX

Pixels. A unit of length relative to the screen resolution of a display

  • IE cannot adjust font sizes that use PX as a unit
  • Most foreign websites can adjust because they use EM or REM font sizes

2, em

Em Relative length unit Size relative to the font size of the text in the current object

  • The reference is the font size of the parent element
  • The current parent element has no font size set relative to the browser’s default font size
  • The em value is not fixed
  • Em inherits the font size of the parent element

3, rem

Rem is a relative unit added to CSS3. Rem is a unit of length relative to the font size of the HTML root element

  • Advantages Only need to set the size of the root directory to adjust the scale of the entire page
  • Compatibility With Earlier Versions of Internet Explorer 8

4. Vw, VH

Vw, VH, vmax, and vmin are based on the viewport

Vw is relative to the width of the viewport and it’s equal to 1/100 of the width of the viewport

The length of vH is equal to 1/100 of the viewport height

5. % (percentage)

Usually relative to the parent element

1. For ordinary positioned elements, we understand the parent element

2. For position: Absolute; Is relative to the located parent element

3. For position: Fixed; Is relative to the ViewPort

6, vm,

Css3 new unit, the smaller of the width or height of the viewport

The smallest one is divided evenly into 100 VMS

For example, if the browser height is 900px and the width is 1200px, take the minimum browser height, 1 VM = 900px/100 = 9 px

Disadvantages: Poor compatibility

16. How many kinds of CSS animations are there?

  • Transition Tween animation
  • Keyframe Animation of the keyframe
 .container{
            width: 100px;
            height: 100px;
            background: red;
            
            animation: run 1s linear;
            / * * /
            /* animation-direction: reverse; * /
            /* animation-fill-mode: forwards; * /
            /* infinite loop */
            animation-iteration-count: infinite;
            /* Play status */
            /* animation-play-state: paused; * /
        }
        @keyframes run{
            0%{
                width: 100px;
            }
            50%{
                width: 800px;
            }
            100%{
                width: 100px; }}Copy the code

17. The difference between transition animation and keyframe animation?

  • Transitions require state changes
  • Keyframes do not require state changes
  • Keyframe animation control is more detailed

18. Draw a 0.5px line for the CSS

  • Plan 1 Usetransform
 .line{
       border: 1px solid red;
       transform: scaleY(.5);
     }
Copy the code
  • Plan 2 Usemeta
<meta name="viewport" content="Width = device - width, initial - scale = 0.5">
Copy the code
  • Plan 3 Usebackground
height: 2px;
  background-image: linear-gradient(0deg, red 50%, transparent 50%)
Copy the code

19, Please use pure CSS to draw a triangle, what is the principle?

 .sanjiaoxing{
        /* First put a box wide and high */
        width: 100px;
        height: 100px;
        /* All use the border feature */
        border:20px solid pink
      }
Copy the code

The principle is that the border connection is bevel, because of this, we can do a lot of interesting things, this is often examined in the interview to see the handwriting CSS problem, we understand the principle is simple to try it

.sanjiaoxing{
        /* First set the width and height of a box to 0 */
        width: 0px;
        height: 0px;
        /* All use the border feature */
        border:20px solid pink;
        /* Then make the rest of the borders transparent
        border-right-color: transparent;
        border-left-color: transparent;

      }
Copy the code

What styles of CSS can be inherited

CSS has styles that can be added to parent elements and then automatically inherited to child elements. Font size font weight color cursor and so on

  • Font related attributes

    • font-family
    • font-weight
    • font-size
    • font-style

  • Text series attributes

    • Text-indent Indicates the indent of the text

    • Text-align the text horizontally

    • Text-shadow Indicates the text shadow

    • The line – line height

    • Text-transform Controls the size of the text

  • Visibility of elements

    • visibility

  • The cursor attributes

  • cursor

Of course there are many more

21, use,CSSDraw a fan

We have already drawn the triangle, again we can draw a sector with border as follows (just set border-radius)

   /* First set the width and height of a box to 0 */
        width: 0px;
        /* height: 0px; * /
        /* All use the border feature */
        border:40px solid pink;
        /* Then make the rest of the borders transparent
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        
        border-radius: 50%;
Copy the code

After the language

I haven’t introduced myself yet, in order not to interrupt the interest of my friends in this article, I put the introduction at the end of the article. My name is Yang Xiaoyang, and I am actively sharing my personal humble opinions. If you are interested in CSS, you are welcome to pay more attention to my next share. It would be great if you could bookmark or share this article with others around you

Key words

Front end interview questions and better Answers Front end interview questions