😂 This is just a personal note… I didn’t think anyone would see…

Front-end development interview questions

The answers are basically self-organized. Not all of them.

There will be a lot of their own wordy, there are a lot of messy supplement, please forgive me.

Introduce the standard CSS box model? What’s different about the box model for the lower version of IE?

There are two types of box models: IE box model (IE5.5 and below) and W3C standard box model.

  • Box Model:

    Content, padding, border, and margin.

  • Different:

    W3C standard box model width and height, is the width and height of the content;

    IE box model width and height, is the content, padding, border three parts of the width and height.

  • Additional:

    The outline is drawn on top of the element box, it does not take up space (does not affect the size and positioning of the element). Will overwrite the content, but the latter will overwrite the former.

    Compatibility: Internet Explorer 8 or later.

Other references: some practical details about margins, resolving box model compatibility issues

How do I center div?

Horizontal center

  • Given the width, the block element:

    Add margin:0 auto.

    div{
	width:200px;
	margin:0 auto;
 }
Copy the code

  • Given the width, the absolutely positioned div is centered:

    div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* This step is critical */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* * */
}
Copy the code

  • Unknown width, fit-content:

    Compatibility is poor.

    div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* * */
}
Copy the code

  • Unknown width, inline-block:

    .parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* * */
}
Copy the code

  • Unknown/known width, relative:

    Reference: three, floating realization of horizontal middle method

    • Advantages: strong compatibility and expansibility;
    • Disadvantages: the implementation principle is more complex.

    You need two divs, the outer layer left 50% and the inner layer left-50%.

    Use float or inline-block to make the container size content size instead of the default 100%.

    .outter {
    display: inline-block; /* or float: left; * /
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
Copy the code
    • When left is a percentage, it is the percentage of the parent container’s width (MDN).

Horizontal and vertical center

  1. Determine the container width and height:

    Relative or absolute positioning, set the margin.

    div {
	position: relative / fixed; /* Relative positioning or absolute positioning */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* The margin is half its width and height */
	background-color: pink; /* * */
 }
Copy the code

  2. Uncertain container width and height:

    Absolute positioning, using the Transform property.

    div {
	position: absolute/fixed; /* relative makes width 100%, so no */
	top: 50%;
	left: 50%;
	transform: translate(50%, 50%);background-color: pink; /* * */
}

Copy the code

  3. Flex layout:

    The width and height may or may not be determined.

    Compatibility should be considered in practical use.

    .container {
	display: flex;
	align-items: center; 		/* Vertical center */
	justify-content: center;	/* Horizontal center */

}
.container div {
	width: 100px; Can be saved / * * /
	height: 100px; Can be saved / * * /
	background-color: pink;	/* * */
}  
Copy the code

  4. The inline – block:

    The width and height may or may not be determined.

    Align: text-align

    Vertical center: parent element line-height has the same value as height, child element vertical-align.

    Disadvantages: The inner layer is higher than the outer layer, cannot be vertically centered, and will be on top of the parent layer (see demo).

    .container {
    height: 200px; /* Vertical center */
    line-height: 200px; /* Vertical center */
    text-align: center; /* Horizontal center */
}
.container div {
    display: inline-block; /* Core: width adaptive, height can be centered */
    line-height: 20px; /* is automatically inherited and a different value must be set to override */
    vertical-align: middle; /* Vertical center */
}  
Copy the code

What are the CSS selectors?

  1. Id selector (# myID)
  2. Class selector (.myClassName)
  3. Tag selector (div, H1, P)
  4. Next to sibling selectorh1 + p(The “P” following the h1)
  5. General sibling selectorh1 ~ p(select all p after h1)
  6. Child selector (UL > LI)
  7. Descendant selector (Li A)
  8. Wildcard selector (*)
  9. Attribute selector (a[rel = “external”])
  10. Pseudoclass selector (A :hover, Li :nth-child)
  • Pseudo-element & pseudo-class:
    • allPseudo elements: 
      ::after
::before
::first-letter
::first-line
::selection
Copy the code
    • pseudo-classes: 
      :active.:hover.:visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
Copy the code

Wildcard selectors have an interesting use for non-subselectors, such as:

section * a {font-size:1.3 em; }Copy the code

Any a tag that is a section grandchild, but not a child, is selected. It doesn’t matter what the parent of A is.

Which attributes can be inherited?

  • All elements are inheritable

    visibility

cursor
Copy the code

  • Inline elements are inheritable:

    letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight  text-decoration text-transform directionCopy the code

    Font-variant: Sets paragraphs to small uppercase fonts.

    Text-transform: Controls the case of letters in text.

  • Block elements are inheritable:

    // Indent the first line of text in the text block text-indent text-alignCopy the code

  • List elements are inheritable:

    list-style
list-style-type
list-style-position
list-style-image
Copy the code

  • Table elements are inheritable:

    /* 1. Separate default value. The border will be split. Border-spacing and empty-cells properties are not ignored. Borders will be merged into a single border if possible. Border-spacing and empty-cells properties are ignored. Inherit specifies that the value of the border-collapse property should be inherited from the parent element. * /
border-collapse
Copy the code

  • Non-inheritable styles:

    display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

Haven't seen * / / * the following

table-layout /* Table width is adaptive. Values: automatic, fixed, inherit*/

page-break-after page-break-before /* Force pagination when printing */

unicode-bidi /* use with direction to control text direction */
Copy the code

How is the CSS priority algorithm calculated?

  • The nearest priority principle shall prevail if the style definition is the nearest in the case of the same weight;
  • The loading style is based on the last loaded location.

The priorities are:

// With the same weight, permissions from high to low:
1.Inside the element tag (inline style/inline style)2.Write in the <style> tag (embed style)3.Write in a separate CSS style sheet (link style)4.Link other stylesheets in stylesheets: @import url(css/styles2.css)

// Different weights are calculated! important > id >class > tag

// !importantTake precedence over everything!importantHas a higher priority than inlineCopy the code

Weight calculation method:

// the special value of the selector is expressed as four parts, represented by 0,0,0,0.The specificity of the interline style is1.0.0.0The special value of the ID selector, plus0.1.0.0. Class selector, property selector, or pseudo class, plus0.0.1.0. Element and pseudo element, plus0.0.0.1. Wildmatch selectors * contribute nothing to particularity, i.e0.0.0.0. ! Important, it has no special value, but it has the highest priority. For the convenience of memory, its particularity value can be considered as1.0.0.0.0.Copy the code

More: detailed priority calculation method

CSS3 new pseudo class has what?

Reference: new features of MDN – CSS

pseudo-classes instructions
:last-child The last child of the parent element.
:nth-child(an+b) Find all children of the current element;

The set of the first +b elements (n = 0, 1, 2…) .
:nth-last-child(an+b) with:nth-child(an+b)Similar, except it starts at the endReverse countingNot from the beginning.↪ MDN
:only-child The only child element belonging to a parent element, that is, all elements that have no siblings are selected.


:first-of-type Under the parent element, the uppermost element of each element type.
:last-of-type The last element of each element type, under the parent element.
:nth-of-type(an+b) Under the parent element, the NTH element of each element type.



Find the set of all children of the same element type under the current element,

Sort each set in order of location,

The selection is going to be the set of the first an+b elements.
:nth-last-of-type(an+b) And basically:nth-of-typeSame thing, except it starts at the endReverse countingNot from the beginning.
:only-of-type Select elements of tag type that are different from other sibling elements, that is, elements of this element type have only one element at the same level under their parent element. (A boy and a girl in a family)


:enabled Each enabled element (primarily for form elements).
:disabled Disabled elements (mainly used to control the disabled state of form controls).
:checked A single or check box is selected.
:indeterminate Indicates an uncertain state.

1.<input type="checkbox">Element, whose indeterminate property is set to true by JavaScript;

2.<input type="radio">Element, when all radio buttons in the form with the same name value are not selected;

3. In a state of uncertainty<progress>The element
:target <a>jump#Anchor point, you can set the style of the anchor point target.MDN
:root Matches the root element of the document tree.

For HTML,:rootsaid<html>The element is the same as an HTML selector, except that it has a higher priority.
:empty An element with no child elements.

Child elements can only be element nodes or text (including Spaces).MDN

Comments do not count, but Spaces around comments do.
:not(X) The match does not match the parameter selectorXDescribe the elements.

XCan’t containanotherNegative selector.

:notThe priority of a pseudo-class is the priority of its argument selector.

:notPseudo-classes, unlike other pseudo-classes, areDoes not increase the priority of the selector.

:not(p)Will match any non-p elements, includinghtmlandbody. (So be careful, if you set the color, you may have unexpected situations, such as all the same color.↪ bug demo)

What are the values of display? Explain their role.

display instructions
css1
none Element is not displayed and removed from the document flow.
inherit Inherits the value of the display attribute from the parent element.
block Block types. The default width is the width of the parent element. The width and height can be set.
inline Inline element type. The default width is the content width. The width and height cannot be set.
list-item Display as block type elements and add style list tags.
css2
inline-block The default width is the content width, you can set the width and height, display in line.
table Display as a block-level table.
flex How elastic elements stretch or shrink to fit the space available in a Flex container.
grid Grid layout

The values of position are relative and absolute. What is the origin of position?

position instructions
static The default value.

Without positioning, the element appears in normal flow

(Ignore the top, bottom, left, right, z-index declaration).
inherit Inherits the value of the position attribute from the parent element.
absolute Absolute positioning.

No space is reserved for elements,

Position relative to the ancestor element of the last non-static position.
Fixed (old IE not supported) Absolute positioning.

No space is reserved for elements,

Position relative to the browser window.

The position of the element does not change as the screen scrolls.
relative Relative positioning.

Position relative to its normal position.

Under this keyword, the element is placed in the position where the positioning was not added.

Reposition elements without changing the layout of the page

(Thus leaving blank where this element would have been if it had not been positioned).

A relatively positioned element is not out of the document flow, while an absolutely positioned element is out of the document flow.

What’s new with CSS3?

  1. Rounded corner (border-radius:8px)

  2. New CSS selectors, pseudo-classes (often used :nth-child)

  3. Text-decoration

    The default value is currentColor solid None, and the value can be changed to text-imided-color, text-imided-style and text-imided-line.

  4. Opacity & Opacity

  5. Transform

    Rotate, scale, tilt skew, translate

  6. Animation & Transition

  7. Box-shadow, text-shadow

    box-shadow: x-offset y-offset blur-radius spread-radius color;

text-shadow: x-offset y-offset blur-radius color;
Copy the code

  8. New layouts, such as multi-columns, flexible box, and Grid layouts

  9. Linear gradient

  10. Multi-background (background-image can be set to multiple urls or Linear-gradients)

  11. Media Query (@media MDN) (check this out)

  12. Border can be set to image (border-image)

Please explain the Flexbox (flexible box layout model) of CSS3 and how it works?

MDN

What is a flexbox

CSS3 added layout.

Flexbox can place lists in the same direction (top to bottom, left to right) and allow lists to stretch out to take up available space.

More complex layouts can also be achieved by nesting a Flex container.

  • Elements with a Flex layout are called Flex containers, or “containers” for short.

  • All of its child elements automatically become container members and are called Flex items, or “items.”

While normal layouts are based on blocks and inline flow directions, Flex layouts are based on Flex-flow flows and can be easily used to make games and adapt to different screen sizes.

There is more flexibility in the layout than before.

Specific: www.w3cplus.com/css3/flexbo…

Application scenarios

  1. Horizontal and vertical center

  2. One side fixed width, one side adaptive

  3. Multi-column and equally divided layout

  4. The holy grail layout

  5. sticky footer

My application in the project

  1. sticky footer (demo)

    If the page content is not long enough, the footer is fixed at the bottom of the window. If the content is long enough, the footer is pushed down by the content.

    <div class="detail-flex">
    <div class="detail-content">detail-content</div>
    <div class="detail-footer">detail-footer</div>
</div>
Copy the code
    .detail-flex
    display: flex
    flex-direction: column
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    
    .detail-content
        flex: 1 0 auto
        
    .detail-footer
        flex: 0 0 auto
Copy the code

What is the principle behind creating a triangle with pure CSS?

Border of different width and height: please stamp demo for details

basis

Hide the top, left, and right edges (color: transparent).

div {
  width: 0;
  height: 0; /* div has no content, do not write */
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

/* or write */ like this
div {
  width: 0;
  border: 100px solid transparent;
  border-bottom-color: # 343434;
}
Copy the code

Equilateral triangle

Width of display section = width of transparent section * √3

3 material 1.732 square root

div {
  width: 0;
  border: 100px solid transparent;
  border-bottom: 173px solid # 343434;
}
Copy the code

Right triangle

Set the width of both sides to 0.

/* Fill the triangle in the lower right corner */
div {
  width: 0
  border: 0 solid transparent
  border-left: 100px solid transparent
  border-bottom: 100px solid # 343434
}
Copy the code

A triangle with a border

pen demo

The two overlap. (But not smart enough)

<div id="col1"></div>
<div id="col2"></div>
Copy the code
body.html
  margin: 0
  background-color: # 333
#col1.#col2
  width: 0
  border: 100px solid transparent
  border-bottom: 173px solid #fff
#col2
  position: absolute
  left: 0
  top: 2px
  border-bottom-color: # 222
  transform: scale(0.98)
Copy the code

How to implement the CSS multi-column height?

Reference: Eight ways to create contour column layouts

1. Background images

  • Advantages:

    The implementation method is simple, strong compatibility, do not need too much CSS style can be easily implemented.

  • Disadvantages:

    Using this method is not suitable for high column layouts such as fluid layouts;

    If you need to change the background color or realize the contour column of other column number, you need to make the background image again.

2. Div nested +position

demo

Schematic diagram:

  • Advantages:

    No need for anything else (javascript, background images, etc.), but a pure CSS and HTML implementation of the isometric column layout;

    Compatible with all browsers (including IE6), and can easily create any number of columns.

  • Disadvantages:

    It is not as simple and clear as other methods, which will bring some difficulty for you to understand;

    Complex div nesting and unclear HTML semantics (you need as many containers as you can have columns).

3. Positive padding and negative margin balance each other out

demo

  • Principle:

    Using padding | – bottom margin – bottom are negative balance;

    Set overflow:hidden, so that the parent is the same height as the columns inside it when the padding-bottom column is not set. When the height of any of the columns inside it increases, the parent is stretched to the height of the highest column inside. Other columns that are shorter than this will compensate for the height difference with their padding-bottom.

  • Advantages:

    Multi-column equiheight layout can be realized;

    Can realize the effect of separating line between columns;

    Simple structure;

    Compatible with all browsers.

  • Disadvantages:

    If you want a border around each column, the bottom (or top) border cannot be displayed.

  • Disadvantages solutions:

    1. Use a background image that is consistent with the border (I don’t like this type of method and it is difficult to change later)

    2. Use divs to mimic column borders

      demo

      Add a div to each column (can be replaced with ::after pseudo-element) and set the position to absolute;

      In the Wrapper one level above the column, position relative;

      This allows absolute to be positioned according to the size and position of the wrapper.

4. Border + absolute positioning /float “simulation”

Absolutely locate demo, float demo

2. Div nested +position = 2. Div nested +position = 2. Div nested +position (I have changed the following, so also ↪ demo)

  • Advantages:

    Simple structure, compatible with all browsers, easy to master.

  • Disadvantages:

    Border + content is limited to a maximum of three columns, so you can’t achieve more than three columns.

5. Simulate table layouts

demo

  • Advantages:

    This is a very simple, easy-to-implement approach.

  • Disadvantages:

    Internet Explorer 6-7 cannot run properly because of poor compatibility.

6. The flex layout

  • Advantages:

    Easy to use, suitable for mobile terminal.

  • Disadvantages:

    CSS3 is new and not compatible with older browsers.