This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Preface ⌛

For the front end, CSS is a beginner must learn a knowledge. Basically, after you dabble in HTML, you learn CSS. At the same time, CSS is also a front-end test of knowledge, such as horizontal and vertical center, two-column layout and three-column layout and BFC, etc., are often tested in the interview is also a required point. Therefore, in the following article, I will systematically sort out the problems encountered in the autumn recruitment process on Monday.

Let’s learn ⑧~~⏰

✏️ 1. Comb the CSS framework

Let’s start with a mind map to understand some common CSS questions. See 👇 below for details

Below begin to sort out the answers to each question ~⏳

🖌️ 2. Basic style problems

1. Please explain the weight and priority of CSS

(1) Weight

level	define	Calculated value
Level 0	Wildcard selectors, selectors, and logical composition pseudo-classes	0
Level 1	Label selector	1
Level 2	Class selectors, property selectors, and pseudo classes	10
Level 3	The ID selector	100
Level 4	The style property is inline	1000
Level 5	! important	10000

(2) Priority

The weights are the same, the ones written in the back cover the ones in the front, and the principle of “coming from behind”

Use! Important reaches the maximum priority, use all! If the value is important, the priority is higher

Detailed articles are added at 👇

Who moved my selector? Understand CSS selector priorities in depth

Links: juejin. Cn/post / 699458…

2. Describe the position property of CSS

Static: There is no special location. The object follows the normal document flow. Attributes such as top, right, bottom, and left will not be applied.

Relative: Objects follow the normal document flow, but will be offset within the normal document flow based on properties such as top, right, bottom, and left. And the cascade is defined by the Z-index property.

Absolute: The object is removed from the normal document flow and is located using top, right, bottom, and left attributes. And the cascade is defined by the Z-index property.

Fixed: The object is removed from the normal document flow. The object is positioned with the top, right, bottom, and left attributes as the reference point of the window. When the scroll bar appears, the object will not scroll. And the cascade is defined by the Z-index property.

Sticky: Similar to “relative” and “fixed”, “Relative” is applied before the viewport is rolled to the threshold, and “fixed” is applied after the viewport is rolled to the threshold, which is determined by top.

Detailed articles are added at 👇

You may have some misunderstandings about position and z-index

Links: juejin. Cn/post / 699346…

3. Can the span tag be set with width, height, margin and padding?

Margin and padding affect inline elements.

The SPAN tag is an inline element and does not set the width and height. Margin and padding can be set, but it’s worth noting that when you set margin and padding, only the horizontal direction works, not the vertical direction.

Read this explanation in an article:

While padding can be applied to all sides of an inline element,only left and right padding will have an effect on surrounding content.In the example below,50px of padding has been applied to all sides of the element.As you can see,it has an affect on the content on each side,but not on content above or below.
Copy the code

As the above paragraph explains, when padding is applied to inline elements, it only affects the left and right horizontal directions, but not the top and bottom vertical directions.

4. CSS can implement inherited properties

(1) Font series attributes

Font: combination font
Font-family: specifies the font family for the element
Font-weight: Sets the weight of the font
Font-size: Set the font size
Font-style: Defines the style of the font
Font-variant: A font with small uppercase letters that displays text. This means that all lowercase letters are converted to uppercase letters, but all letters with small uppercase fonts are smaller than the rest of the text.
Font-stretch: Stretches the current font-family. None of the major browsers support it.
Font-size-adjust: Specify an aspect value for an element so that the x-height of the preferred font is maintained.

(2) Text series attributes

Text-indent: indicates the indentation of text
Text-align: align text horizontally
The line – height: line height
Word-spacing: Increasing or decreasing the spacing between words
Letter-spacing: increasing or decreasing the spacing between characters
Text-transform: controls the case of text
Direction: Specifies the writing direction of the text
Color: text color

(3) Element visibility

visibility

(4) Table layout attributes

Caption -side, border-collapse, border-collapse, empty-cells, table-layout

(5) List layout attributes

List style-type, list style-image, list style-position, list style

(6) Generate content attributes

quotes

(7) Cursor attributes

cursor

(8) Page style attributes

Orphans, Page, Page-break-inside, Windows, and orphans

(9) Sound style properties

Speak, speak-punctuation, speak-Numeral, speak-header, speech-rate, volume, voice-family, Pitch, pitch-range, stress, richness, az Imuth and elevation

The detailed article is linked to 👇

Properties that can and cannot be inherited in CSS

Link: www.cnblogs.com/thislbq/p/5…

5、visibility 和 display 的差别（还有opacity)

visibilitySet:hiddenElements are hidden, but their location is still in the page document flow and will not be deleted, thus triggering a redraw of the browser’s rendering engine.
display: set upnoneAttributes hide elements and their location is not preserved, so they trigger backflow and redraw in the browser’s rendering engine;
opacity: Sets the element to transparent, but its location is also in the page document flow and will not be deleted, so it triggers a redraw of the browser’s rendering engine; At the same time, it’s worth noting thatopacityTransition effects can be set.

6, CSS3 has what new features

Added various CSS selectors (:not(.input): indicates allclassnotinputThe node)
Rounded corner (border-radius:8px)
Multi-column layout
Shadow\Reflect
Text-shadow
Linear gradient
Rotate, scale, position, transform
Animation
Multi-background, background clipping

7, CSS3 new pseudo-class – pseudo-element

The first group:

p:first-of-typeSelect each element that belongs to the first element of its parent element.
p:last-of-typeSelect each element that belongs to the last element of its parent element.
p:only-of-typeSelect each element that belongs to an element unique to its parent element.
p:only-childSelects each element that belongs to a unique child of its parent element.
p:nth-child(2)Select each element that belongs to the second child of its parent element.

The second group:

:enabledEnabled form elements.
:disabledDisabled form elements.
:checkedA single or check box is selected.
::beforeAdd content before the element.
::afterAdding content after an element can also be used for clearing floats.
::first-lineAdd a special style line to the first line.
::first-letterAdd a special style to the first letter of the text.

The third group:

Pseudo-class syntax one:It is to make amendscssShortcomings of regular class selectors.
Pseudoelement syntax for two:It is an element generated by a virtual container created out of thin air.

Display :inline-block when a gap is not displayed?

floating
Remove the blank space
Using margin negative values
Use the font – size: 0
Letter – spacing, word spacing
Word – spacing word spacing

11. What is the difference between rgba() and opacity?

rgba() 和 opacityBoth can achieve transparency, but the biggest difference is thisopacityTransparency applied to elements and all content within elements;
whilergba()Applies only to an element’s color or its background color. (setrgbaChildren of transparent elements do not inherit transparency.

12. Why should CSS styles be initialized

Because of browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page display will often be different between browsers.

Of course, initialization styles can have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact.

The simplest way to initialize:

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

Taobao style initialization code:

body.h1.h2.h3.h4.h5.h6, hr, p.blockquote.dl.dt.dd.ul.ol.li, pre, form.fieldset.legend.button.input.textarea.th.td {
        margin: 0;
        padding: 0;
    }

body.button.input, select, textarea {
    font: 12px/1.5tahoma, arial;
}

h1.h2.h3.h4.h5.h6 {
    font-size: 100%;
}

address.cite.dfn.em.var {
    font-style: normal;
}

code.kbd, pre, samp {
    font-family: couriernew, courier, monospace;
}

small {
    font-size: 12px;
}

ul.ol {
    list-style: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

legend {
    color: # 000;
}

fieldset.img {
    border: 0;
}

button.input, select, textarea {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
Copy the code

📁 3. Adaptation problems

1. The difference between PX and EM

px 和 emBoth are units of length. The differences are:
pxThe value is fixed and easy to calculate.
emA variable value is a relative unit that adjusts the font size of the parent element

2. How to adapt the mobile terminal with REM in the project

Rem works on the root element, that is, on the HTML element. In a real project, this would normally be set in the initialization style:

html{
	font-size: 625%; /* 16px * 625% = 100px */
}
body{
	font-size: 0.16 rem; /* that is 0.16rem * 100 = 16px */
}
Copy the code

3. Background of PX, EM and REM

pxA unit of absolute length, most commonly used.
emA unit of relative length. Not often used.
remA unit of relative length, often used in responsive layouts.

📂 4. Animation

1, CSS3 scaling, rotation related API

Understand the differences between CSS animation apis, especially animation, transition, Transform, and Translate. Details are as follows:

animation: used to set the animation property, which is a shorthand property containingSix attributes;
transition: Used to set the style of the element, andanimationIt has a similar effect, but the details are very different;
transform: used for element progressrotating,The zoom,mobileortiltHas nothing to do with the animation that sets the style;
translate ： translatejusttransformA property value of, namely, movement, in addition toscaleAnd so on.

2. If you need to write animation manually, what is the minimum time interval you think? Why?

The default frequency of most monitors is 60Hz, that is, 60 refreshes per second, so the minimum theoretical interval is 1× 1000MS60 = 16.7ms\ FRAc {1×1000ms}{60} = 16.7MS601 ×1000ms = 16.7ms

3. Have you ever done animation? How to move an element from doing to the right 1px per second

translate transition transform
requestAnimationFrame
Animation animation

4. Use CSS to achieve a continuous animation effect

animation:mymove 5s infinite;

@keyframes mymove {
    from {
        top: 0px;
    }

    to {
        top: 200px; }}Copy the code

🗂️

What is Sass and LESS? Why do people use them?

What is PI (1)

They are CSS preprocessors and dynamic style languages, an abstraction layer on top of CSS. They are a special syntax/language compiled into CSS.

Less, for example, is a dynamic style language. LESS can be run either on the client (IE 6+, Webkit, Firefox) or on the server (with Node.js).

(2) Why use them?

The structure is clear and easy to expand.
It’s easy to mask browser private syntax differences. This, needless to say, encapsulates the repetitive processing of browser syntax differences and reduces pointless mechanical effort.
Multiple inheritance can be easily implemented.
Fully compatible withCSSCode that can be easily applied to older projects.LESSOnly in theCSSSyntax has been extended, so the oldCSSCode is also available withLESSThe code compiles together.

Stylus, Sass, less difference

All have five basic features of “variable”, “mix”, “nested”, “inheritance” and “color mix”.
Sass 和 LESSThe grammar is more rigorous,LESSAlways use curly braces{} ， Sass 和 StylusHierarchy and nesting relationships can be indicated by indentation.
SassThere is no notion of global variables,LESS 和 StylusThere is a concept of scope similar to that of other languages.
SassIs based onRubyLanguage, whileLESS 和 StylusCan be based onNodeJS NPMAfter downloading the corresponding library to compile; That’s why installSassSometimes error will be reported, need to installpythonThe script.

3. What is rearrangement and redraw

Redrawing does not necessarily require rearrangement; rearrangement inevitably leads to redrawing.

Rearrangement: When a part of the render tree must be updated and the node size changes, the browser invalidates the affected part of the render tree and reconstructs the render tree.

In layman’s terms, when a DOM change causes an element’s geometry to change, such as its width, height, and location, causing the browser to recalculate the element’s geometry and rebuild the render tree, a process known as “rearrangement.”

Redraw: The browser action that is triggered when the appearance of an element is changed. The browser redraws the element based on its new attributes to give it a new appearance.

In layman’s terms, after the rearrangement is complete, the reconstructed render tree is rendered to the screen, a process known as “redraw”.

DOM tree: Represents the structure of the page

Render tree: Represents how the nodes of the page are displayed.

Once the render tree is built, it’s time to paint the page elements.

4. When will rearrangement occur?

Add, delete, updateDOMNode.
throughdisplay: noneTo hide aDOMNodes – Trigger rearrangement and redraw.
throughvisibility: hiddenTo hide aDOMNodes – only redraw is triggered because there are no geometric changes.
Move or add to the pageDOMThe node adds an animation.
Add a style sheet and adjust the style properties.
User actions, such as resizing a window, changing font size, or scrolling.

Common rearrangement elements
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

5. How to reduce the impact of rearrangement on performance?

Limit rearrangement to low-level DOM nodes as much as possible. As in the following example, if you want to change the style of p, class is not added to div. It is not good to influence child elements by parent elements.
```
<body> 
    <div class="hello"> 
        <h4>hello</h4> 
        <p><strong>Name:</strong>BDing</p> 
        <h5>male</h5> 
        <ol>
            <li>coding</li> 
            <li>loving</li> 
        </ol> 
    </div> 
</body>
Copy the code
```
When reflow rearrangements occur on p nodes, hello and body will also be re-rendered, and even H5 and OL will be affected.
Avoid setting a lot of style attributes because changing the style of a node will trigger a reflow every time it is set, so it is better to use the class attribute.
Implement the animation element, its position property, preferably set to absoulte or fixed, so that it does not affect the other elements of the layout animation implementation speed selection. For example, implementing an animation that moves at 1 pixel is the smoothest, but reflow is too frequent, consuming CPU resources, and moving at 3 pixels is much better.
Do not use a table layout, because if one element in the table triggers a reflow, the entire table will trigger a reflow. If you have to use a table, you can set table-layout: Auto; Or table-layout:fixed; This allows the table to be rendered line by line, which is also intended to limit the reach of reflow.
If the CSS has a calculated expression, it will be recalculated each time, starting a reflow.

📏 6. Performance optimization

1. The difference between link and @import

Link is HTML and @import is CSS.

Link supports parallel downloading to the maximum extent. Excessive nesting of @import leads to serial downloading and FOUC (document style transient failure).

Link can specify candidate styles with rel=”alternate Stylesheet “.

Browsers supported link earlier than @import, and you can use @import to hide styles from older browsers.

@import must be able to reference other files in the CSS file it imports before the style rule.

Overall: Link is superior to @import and has a higher priority.

📐 7. Layout related

1, CSS IFC

IFC is an inline format context with the following characteristics:

The inside of theBoxWill be placed horizontally;
Horizontal spacing bymargin.padding.borderDecision.

2. Say BFC of CSS

(1) What is BFC

Block Formatting Context (BFC) is a block-level Formatting Context, which is the CSS rendering mode of box model layout in Web pages. It refers to an independent rendering area or an isolated independent container.

(2) Five conditions for forming BFC (create rules)

The root element (htmlIs abfc ）
Float element (floatDon’t value fornone ）
Absolute positioning element (positionValues forabsolute 或 fixed ）
Display the values forinline-block 、 table-cell 、 table-caption 、 flex 、inline-flexOne of the elements
overflowDon’t value forvisibleElements (hidden ， auto.scroll ）

(3) Characteristics of BFC

The inside of theBoxThey’ll be placed one after the other in the vertical direction.
The distance in the vertical direction frommargindecision
bfcThe area will not be withfloatElement regions overlap.
To calculatebfcWhen the float element is also involved in the calculation
bfcIt is a separate container on the page, and the child elements inside the container do not affect the outside elements.

(4) The role of BFC

You can include floating elements
Not overridden by floating elements
Block parent and child elementsmarginfolding

3. Does the BFC overwrite the float element? Why is that? For example

No, because the BFC is a separate, isolated container on the page, its internal elements do not interact with the external elements, such as two divs, the top div is set to float, so if the bottom element is not BFC, and float is not set, it will be wrapped in the content of the above element. If you set the following element to overflow: hidden; Property then enables the classic two-column layout, with the content on the left fixed width and the content on the right adaptive because it is BFC.

Float :left

Inline elements become more inline-block when set to float (inline block-level elements, elements with this property have both inline and block-level properties, the most obvious difference being that their default width is not 100%), Padding-top and padding-bottom, or width and height, will work for inline elements

5, two divs are arranged above and below, both set margin, what is the phenomenon?

Officially enroll large
Plus and minus

Q: Why does this happen? Can you explain that?

Is determined by the block-level format context,BFC, the element inBFCWill be arranged up and down, and then the vertical distance frommarginAnd there will be overlap. Specifically, take the largest with the positive, take the largest absolute value with the negative, add one plus one minus;
BFCIs a separate, isolated container within the page, where the inner child elements do not affect the outer elements.

6, what are the methods to clear the float?

(1) Consequences

Height collapse occurs if you do not clear floats: the height of the parent element of the float element is adaptive (if the parent element does not write height, the parent element will collapse after the child element writes floats)

(2) Methods

clearClear float (add nulldivAdd space below the float elementdivAnd write to the elementcssStyle:{clear:both; height:0; overflow:hidden; };
Set the height of the floating element parent;
Float the parent at the same time (you need to float the parent element);
The parent is set toinline-block, itsmargin: 0 autoCenter mode failure;
Add to parentoverflow:hiddenClear float method;
Universal eliminationafterPseudo class clear float (now the mainstream method, recommended use), the code is as follows:

.float_div:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.float_div {
	zoom: 1
}
Copy the code

7. Talk about Flex properties

What does flex:1 stand for? What does flex-basis mean?

Flexible box layout,CSS3New properties for easy layout, such as vertical center
flexAttributes areflex-grow 、 flex-shrink 和 flex-basisThe shorthand

Know about box-sizing? Let’s talk about the box model of CSS

(1) CSS box model

CSS box model is essentially a box that encapsulates the surrounding HTML elements. It includes four attributes: margin, border, padding and content. CSS box model: Standard model + IE model

Standard box model: Width = content + border + padding

Width = content width (border+padding)

box-sizing: border-box;
Copy the code

(2) IE box model and W3C box model

W3C box model: Content, padding, margin, border;
- box-sizing: content-box
- width = content width;
IE box model: The content section of IE calculates the border and padding;
- box-sizing: border-box
- width = border + padding + content width

(3) Box-sizing attribute

The box-sizing attribute can be used to adjust these behaviors:

content-boxIs the default value. If you set the width of an element to100px, then the content area of this element will have100pxWidth, and the width of any borders and inner margins is added to the width of the last drawn element.
border-boxTell the browser that you want to set the border and padding values to be included inwidthInside. That is, if you take an element ofwidthSet to100pxThen this100pxIt’s going to be includedborderandpadding, the actual width of the content area isWidth minus (border + padding). In most cases, this makes it easier to set the width and height of an element.

9. Css3’s Flexbox

css3 的 flexbox, i.e.,Elastic box layout model. It is a brand new one for page layoutCSS3Function,FlexboxYou can place lists in the same direction (top to bottom, left to right) and stretch them out to take up available space.
More complex layouts can also be nested with a scaling container (flex container).
usingFlexThe elements of the layout are calledFlexContainer (flex container), “container” for short.
All of its child elements automatically become container members, calledFlexProject (flex item), “project” for short.
Conventional layout is based on block and inline flow direction whileFlexLayout is based onflex-flowStreams can be easily used for scenarios and can be adaptive to different screen sizes.
There is more flexibility in the layout than before.

10, say CSS horizontal and vertical center

(1) Horizontal center method

Element is an inline element and sets the parent elementtext-align:center
If the element width is fixed, you can set it to left or rightmargin 为 auto ;
If the element is absolutely positioned, set the parent elementposition 为 relative, the element setleft:0; right:0; margin:auto ;
useflex-boxLayout, specifyjustify-contentProperties forcenter
displaySet totabel-ceil

(2) Vertical center method

Set the display mode to table,display:table-cell, while settingvertial-align:middle
useflexLayout, set toThe align - item: center
Set in absolute locationbottom:0,top:0, and set themargin:auto
Set when absolute position is fixed heighttop:50%.margin-topThe value is a negative half of the height
The text is vertically centeredline-height 为 height 值

11. Write vertical center and horizontal center using CSS2 and CSS3 respectively

(1) CSS2 method

Horizontally centered:

Div + margin: auto;
Span + text – align.

Vertically centered:

usepositionthenleft/top 和 marginVertically centered (known width height and unknown width height);
Use position + Margin;
Run the display: table-cell command.

(2) CSS3 method

Horizontally centered:

Flex layout

Vertically centered:

Flex layout

(3) Code implementation

ⅰ. Given width and height, center horizontally and vertically

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Given the width and height, center it horizontally and vertically</title>
    <style>
        .outer {
            position: relative;
            width: 400px;
            height: 600px;
            background: yellow;
        }

        .inner {
            position: absolute;
            width: 200px;
            height: 300px;
            background: gray;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>
Copy the code

ⅱ. The width and height unknown, such as inline elements, horizontal and vertical center

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Unknown width and height, such as inline elements, are centered horizontally and vertically</title>
    <style>
      .outer {
        position: relative;
        width: 400px;
        height: 600px;
        background: yellow;
      }

      .inner {
        position: absolute;
        background: gray;
        left: 50%;
        top: 50%;
        /* translate translates to x and y; X-axis: a positive number means a shift to the right, a negative number means a shift to the left, Y-axis: a positive number means a shift down, a negative number means a shift up */
        transform: translate(-50%, -50%);
      }
    </style>
  </head>

  <body>
    <div class="outer"><span class="inner">I want to center it</span></div>
  </body>
</html>

Copy the code

ⅲ. Absolutely positioned div is centered horizontally and vertically

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Horizontally and vertically centered with an absolutely positioned div</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            background-color: yellow;
            position: relative;
        }

        .inner {
            position: absolute;
            background: gray;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 200px;
            height: 300px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">I want to center it</div>
    </div>
</body>
</html>
Copy the code

Display: table-cell; display: table-cell; Center vertically

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Horizontal and vertical centering using Tabel-cell</title>
    <style>
        .outer {
            width: 400px;
            height: 600px;
            background-color: yellow;
            /* make it a cell element */
            display: table-cell;
            /* Vertical center of text */
            vertical-align: middle;
        }

        .inner {
            background: gray;
            width: 200px;
            height: 300px;
            /* When you set margin and padding on inline elements, it only works horizontally, not vertically */
            /* Horizontal center */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">I want to center it</div>
    </div>
</body>

</html>
Copy the code

ⅴ. Use Flex layout for horizontal and vertical center

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Css3 achieves vertical and horizontal centering</title>
</head>
<style>
    .outer {
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: yellow;
    }

    .inner {
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: gray;
    }
</style>

<body>
    <div class="outer">
        <div class="inner">centered</div>
    </div>
</body>

</html>
Copy the code

12. CSS implements adaptive squares and rectangles with equal aspect ratio

(1) Method

Padding hold high
Pseudo-element settingmargin-top:100%Hold high

(2) Code implementation

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>CSS implements adaptive squares and rectangles with equal aspect ratio</title>
</head>
<style>
    /* The first method is to draw a square */
    .outer1 {
        width: 400px;
        height: 600px;
        background-color: beige;
    }

    .inner1 {
        width: 100%;
        padding-bottom: 100%;
        background-color: green;
    }

    /* Margin-top */
    .inner2 {
        width: 100px;
        overflow: hidden;
        background-color: cadetblue;
    }

    .inner2::after {
        content: ' ';
        margin-top: 100%;
        /* Block, so that it can be set width and height to normal display */
        display: block;
    }
</style>

<body>
    <! -- The first method is to draw a square with the padding height -->
    <div class="outer1">
        <div class="inner1"></div>
    </div>
    <! Margin-top --> margin-top -->
    <div class="inner2"></div>
</body>

</html>
Copy the code

13. How to achieve a two-column layout

(1) What is the two-column layout

The so-called two column layout, is the left fixed width, the right adaptive.

(2) Methods

bfc 和 float
flex
position

(3) Code implementation

ⅰ. BFC and FLOAT realize two-column layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>BFC and Float implement a two-column layout</title>
</head>
<style>
    div {
        height: 500px;
    }

    .aside {
        width: 200px;
        float: left;
        background-color: yellow;
    }

    .main {
        /* overflow: Hidden triggers a BFC */
        overflow: hidden;
        background-color: gray;
    }
</style>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

</html>
Copy the code

ⅱ. Flex implements two column layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Flex implements a two-column layout</title>
</head>
<style>
    div {
        height: 100%;
    }

    .container {
        display: flex;
    }

    .left {
        flex: 0 0 200px;
        /* flex-grow/flex-shrink/flex-basis */
        background-color: yellow;
    }

    .right {
        /* If container_width > sum(flex_basis), the flex-shrink value does not take effect, and the remaining space allocated to each item is proportional to its flex-grow size. If container_width < sum(flex_basis), The flex-grow value does not take effect. Each item is based on flex-basis and shrinks proportionally according to Flex-shrink */
        flex: 1 1;
        background-color: grey;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>
Copy the code

ⅲ. Position Realize two column layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Position implements a two-column layout</title>
</head>
<style>
    .container {
        display: flex;
        position: relative;
    }

    .left {
        position: absolute;
        width: 300px;
        background-color: yellow;
    }

    .right {
        width: 100%;
        margin-left: 300px;
        background-color: gray;
    }
</style>

<body>
    <div class="container">
        <div class="left">hello</div>
        <div class="right">hi</div>
    </div>
</body>

</html>
Copy the code

14. How to achieve a three-column layout

(1) What is the three-column layout

The so-called three column layout, is left and right fixed width, adaptive right.

(2) Methods

The holy grail layout
Twin wing layout
flexlayout
positionlayout
floatlayout

(3) Code implementation

ⅰ. Layout of the Holy Grail

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Achieve the Holy Grail layout of the three column layout</title>
</head>

<style>
    .container {
        padding: 0 300px 0 200px;
    }

    .center {
        float: left;
        background-color: yellow;
        width: 100%;
    }

    .left {
        float: left;
        width: 200px;
        background-color: green;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        float: left;
        width: 300px;
        margin-left: -300px;
        background-color: grey;
        position: relative;
        right: -300px;
    }
</style>

<body>
    <div class="container">
        <div class="center">Middle area</div>
        <div class="left">On the left side of the area</div>
        <div class="right">The right area</div>
    </div>
</body>

</html>
Copy the code

ⅱ. Double flying wing layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Achieve a two-column layout</title>
</head>
<style>
    .container {
        width: 100%;
        float: left;
        background-color: green;
    }

    .center {
        margin-left: 200px;
        margin-right: 300px;
    }

    .left {
        width: 200px;
        float: left;
        background-color: yellow;
        margin-left: -100%;
    }

    .right {
        width: 300px;
        float: left;
        background-color: grey;
        margin-left: -300px;
    }
</style>

<body>
    <! -- Similar to the Holy Grail mode, only add a content box to the middle box, use the content box to set the left and right margins, leaving the left and right boxes to avoid blocking the content. 1: middle box width:100%; Exclusive row 2: Three boxes set float: left; Left {margin-left: -100%}; left{margin-left: -100%}; Right {margin-left: negative width of the parent box} 4: Set the left and right margin of the content box inside the middle main box to avoid blocking the content -->
    <div class="container">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>
Copy the code

Ⅲ. Flex layout

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Flex implements a three-column layout</title>
</head>
<style>
  .container {
    display: flex;
  }

  .center {
    flex: 1 1;
    /* order sets the order of the elastic box object elements */
    order: 2;
    background-color: yellow;
  }

  .left {
    flex: 0 0 200px;
    order: 1;
    background-color: green;
  }

  .right {
    flex: 0 0 300px;
    order: 3;
    background-color: gray;
  }
</style>

<body>
  <div class="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

</html>
Copy the code

Ⅳ. Position layout

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Position implements a two-column layout</title>
</head>
<style>
    div {
        height: 500px;
    }

    .container {
        position: relative;
    }

    .left {
        width: 200px;
        background-color: green;
        position: absolute;
        left: 0;
        top: 0;
    }

    .right {
        width: 200px;
        background-color: yellow;
        position: absolute;
        right: 0;
        top: 0;
    }

    .middle {
        background-color: grey;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</body>

</html>
Copy the code

Ⅴ. Float layouts

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Float implements a three-column layout</title>
</head>
<style>
    div {
        height: 500px;
    }

    .left {
        float: left;
        width: 200px;
        background-color: green;
    }

    .right {
        float: right;
        width: 200px;
        background-color: yellow;
    }

    .middle {
        background-color: grey;
        /* Triggers a BFC */
        overflow: hidden;
    }
</style>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>
</body>
</html>
Copy the code

💡 8. Conclusion

Positions, CSS selector priorities, and handwritten layouts are timeless topics for CSS interviews. So in the process of review, to understand clearly the content of each knowledge point involved, so, it is not difficult to be asked by the interviewer in the interview!

This is the end of the interview questions about CSS! Hope to help you ~

If the article is wrong or want to add new content, welcome to add my wechat pointed out, 👉 vx: MondayLaboratory ~

In the future, if there is any new supplement to the column content, it will be put in the updated address below. You can click the link below to direct it!

🐣 Egg One More Thing

(: PDF version available

👉 wechat public account Monday research room, click the navigation bar below to briefly view the keyword to obtain ~

(: Update address

👉 offer comes to the interview column

) Introduction

If you think this article is helpful to you, you might as well like to support yo ~~😉
That’s all for this article! See you next time! 👋 👋 👋

1 mind map, 6 knowledge blocks, guide you to comb through the interview CSS knowledge points!

Preface ⌛

✏️ 1. Comb the CSS framework

🖌️ 2. Basic style problems

1. Please explain the weight and priority of CSS

(1) Weight

(2) Priority

2. Describe the position property of CSS

3. Can the span tag be set with width, height, margin and padding?

4. CSS can implement inherited properties

(1) Font series attributes

(2) Text series attributes

(3) Element visibility

(4) Table layout attributes

(5) List layout attributes

(6) Generate content attributes

(7) Cursor attributes

(8) Page style attributes

(9) Sound style properties

5、visibility 和 display 的差别（还有opacity)

6, CSS3 has what new features

7, CSS3 new pseudo-class – pseudo-element

Display :inline-block when a gap is not displayed?

11. What is the difference between rgba() and opacity?

12. Why should CSS styles be initialized

📁 3. Adaptation problems

1. The difference between PX and EM

2. How to adapt the mobile terminal with REM in the project

3. Background of PX, EM and REM

📂 4. Animation

1, CSS3 scaling, rotation related API

2. If you need to write animation manually, what is the minimum time interval you think? Why?

3. Have you ever done animation? How to move an element from doing to the right 1px per second

4. Use CSS to achieve a continuous animation effect

🗂️

What is Sass and LESS? Why do people use them?

What is PI (1)

(2) Why use them?

Stylus, Sass, less difference

3. What is rearrangement and redraw

4. When will rearrangement occur?

5. How to reduce the impact of rearrangement on performance?

📏 6. Performance optimization

1. The difference between link and @import

📐 7. Layout related

1, CSS IFC

2. Say BFC of CSS

(1) What is BFC

(2) Five conditions for forming BFC (create rules)

(3) Characteristics of BFC

(4) The role of BFC

3. Does the BFC overwrite the float element? Why is that? For example

Float :left

5, two divs are arranged above and below, both set margin, what is the phenomenon?

6, what are the methods to clear the float?

(1) Consequences

(2) Methods

7. Talk about Flex properties

Know about box-sizing? Let’s talk about the box model of CSS

(1) CSS box model

(2) IE box model and W3C box model

(3) Box-sizing attribute

9. Css3’s Flexbox

10, say CSS horizontal and vertical center

(1) Horizontal center method

(2) Vertical center method

11. Write vertical center and horizontal center using CSS2 and CSS3 respectively

(1) CSS2 method

(2) CSS3 method

(3) Code implementation

ⅰ. Given width and height, center horizontally and vertically

ⅱ. The width and height unknown, such as inline elements, horizontal and vertical center

ⅲ. Absolutely positioned div is centered horizontally and vertically

Display: table-cell; display: table-cell; Center vertically

ⅴ. Use Flex layout for horizontal and vertical center

12. CSS implements adaptive squares and rectangles with equal aspect ratio

(1) Method

(2) Code implementation

13. How to achieve a two-column layout

(1) What is the two-column layout