I. Box model

1. Standard box model and IE box model

** Standard (W3C) box model: ** Content + padding+ border+ margin

Width and height refers to the width and height of content

** Low version IE box model: ** Content (+padding+border) + margin,

Width and height refers to the width and height of the Content +padding+border section

2. How does CSS set these two models

box-sizing : content-box  
box-sizing : border-box
Copy the code

3. How does JS set the width and height corresponding to the box model

dom.style.width/height;// Set to get inline style
dom.currentStyle.width/height;// Only IE is supported
window.getComputedStyle(dom).width/height;// Good compatibility
dom.getBoundingClientRect().width/height;// Apply to: calculate the absolute position of an element
Copy the code

4. Margin collapse/overlap

In standard document flow, the vertical margin is not superimposed, and only the larger value is taken as the margin(the horizontal margin can be superimposed, that is, there is no collapse in the horizontal direction).

PS: If it is not a standard flow, such as the boxes are floating, then there is no margin overlap between the two boxes.

Between sibling elements

The vertical margin does not stack. The larger margin prevails
Between parent and child elements

Margin essentially describes the distance between brothers. It’s best not to use marign to express the distance between father and son.

So, if we want to express the distance between father and son, we must be good at using father padding, not son margin.

5.BFC

BFC is Block Formatting Context, which belongs to the common flow of the above positioning scheme.

Elements with BFC characteristics can be viewed as separate containers, the elements inside the container do not affect the layout of the elements outside, and BFC has some characteristics 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.

1. How do I generate a 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 for visible (hidden, auto, scroll)

2.BFC principles /BFC layout rules

The margins of the child elements inside the BFC overlap vertically.
A BFC is a separate container within a page, and elements outside do not affect elements inside, and vice versa. (see laterFor example 1)
BFC area not with sidefloat boxRegional overlap. (Can be used to remove floating effects). (see laterFor example 2)
When calculating the height of the BFC, the floating child element also participates in the calculation. (see laterFor example, 3)

3. The application of landing

Resolving margin overlap

When margin overlap occurs between parent and child elements, the solution is to create a BFC for either child or parent elements
The BFC region does not overlap with the float region
Remove the floating

Reference link: CSS box model and BFC

10 minutes Understanding the PRINCIPLE of BFC

Second, selector

1. Common CSS selectors

Id selector (# myID)
Class selector (.myClass)
Tag selector (div, H1, P)
Wildcard selector (*)
Adjacent selector (H1 + P)
Child selector (UL > LI)
Descendant selector (Li A)
Attribute selector (a[rel=”external”])
Pseudo-class selectors (:link, :visited, :active, :hover, :before, :after)

2. Added pseudo classes to CSS3

:first-child Matches the first child of the parent element
:last-child Matches the last child of the parent element
:nth-child() matches the NTH child of the parent (n can be a number, a keyword, or a formula)
- All rows are selected with n
- If the parameter is n+ I, the following items are selected from the ith line. For example, if n+3 is selected from the third line, the following items are selected
- If the parameter is -n+ I, the first I elements are selected. For example, -n+6 indicates the first six elements
- 2n means multiples of 2 rows are selected, even rows are selected
- 2n+1 indicates that odd rows are selected
- 3n indicates that every three rows are selected once
- Odd means odd, even means even
:nth-last-child(n) matches the next-to-last sibling element
:nth-of-type(n) matches the NTH sibling of the same type
: root root element
:not(selector)

Three, style,

1. Priority calculation rules

The most recent ancestor style takes precedence over other ancestor styles
“Direct Style” takes precedence over “ancestor Style”
Inline style > ID selector (weight 100) > Class selector (weight 10) = Attribute selector = pseudo-class selector > label selector (weight 1) = pseudo-element selector
! Important has the highest priority

2. The way CSS is introduced in HTML

Inline: Directly add the CSS to the style attribute of the HTML tag

<div style="background: red"></div>

How to embed: Write CSS code under the

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>
Copy the code

Link: Use the tag in the HTML header to import external CSS files

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
Copy the code

Import mode refers to the use of CSS rules to import external CSS files
```
<style>
    @import url(style.css);
</style>
Copy the code
```

Compare link vs. import (link vs. @import)

Link is an HTML tag that can define things like RSS in addition to CSS styles. @import is provided by CSS and can only import CSS

Lilnk is loaded at the same time as the page loads, and the CSS referenced by @import is loaded after the page loads

Link is an HTML tag with no compatibility and @import can only be recognized at ie5 or above

3. Common units

Px: absolute units, pages are displayed in exact pixels
Em: relative unit. The reference point is the font size of the parent node. If the font size is defined by itself (the default font is 16px), 1em is not a fixed value for the entire page
Rem: relative unit, can be interpreted as “root em”, relative to the root node HTML font size to calculate, CSS3 new properties, Chrome/Firefox /IE9+ support
Viewpoint width: 1vw = 1% of the viewpoint width
Viewpoint height: 1vh = 1% of viewpoint height
Vmin: The smaller of VW and VH
Vmax: The larger of VW and VH
The percentage % :

Four, fonts,

1. How to use custom fonts

Add styles via @font-face

Supported font file types:

EOT
OTF
TTF
WOFF
WOFF2

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}
Copy the code

2. How to use font ICONS

Recommended: Alibaba icon Library

Find the website and search for the icon you want
Add the image to the shopping cart and click the shopping cart button in the upper right corner of the page to add all ICONS to your custom project.
On the page that pops up, click Download to local.

Unzip the downloaded folder, we need the fonts folder and style.css, put this file into your project,style.css file introduced the font file, so there will be a path, at this time you should pay attention to the path problem, the code is as follows :(here is a variety of font files for compatible browser)

@font-face {  font-family: 'icomoon';  src:  url('.. /fonts/icomoon.eot? snsrp8');  src:  url('.. /fonts/icomoon.eot? snsrp8#iefix') format('embedded-opentype'),    url('.. /fonts/icomoon.ttf? snsrp8') format('truetype'),    url('.. /fonts/icomoon.woff? snsrp8') format('woff'),    url('.. /fonts/icomoon.svg? snsrp8#icomoon') format('svg');  font-weight: normal;  font-style: normal; }Copy the code

On the page, we simply add the corresponding class name to an element, because the icon for the class name is already written in style.css.

.icon-account:before {
content: "\e900";
}
.icon-caifu:before {
content: "\e901";
}
.icon-edit:before {
content: "\e902";
}
Copy the code

<span class="icon-account"></span>
Copy the code

3. How to make the font on the page clearer and thinner with CSS?

– Smoothing does not work in the Windows system,

But when available on IOS devices, Antialiased, greyscale smoothing is best

5. Text attributes

1. Multiple lines of text omitted

text-overflow:ellipsis

To use text-overflow, you need to:

Block-level elements
Overflow: hidden (not visible)
< span style = “max-width: 100%; flex: available;
white-space:nowrap|pre; (No line folding)

2. What properties of the CSS can be inherited?

Font properties: font, font-family, font-size, font-weight, font-style
Text properties: color, text-indent, text-align, line-height, word-spacing
Element visibility: Visibility
Table layout properties: Caption -side, border-collapse, border-spacing, Empty-cells, table-layout
List attributes: list-style type, list-style image, list-style position, list-style
cursor

Reference link: What properties of CSS can be inherited

Sixth, basic visual formatting

1. What is the value of display

Inline (default) – inline
None – hidden
- Block – piece of display
- Table – Table display
- List-item – List of items
- The inline – block – inline blocks
- flex
- Grid – Grid layout

2. Display: inline-block generates spacing solution

Why spacing?

This is ultimately a question of typography in Western Languages. Here’s a very simple example:

I am very happy

Nanjing Yangtze River Bridge welcomes you

English has Spaces as word boundaries, while Chinese does not. (This leads to a Chinese word segmentation problem.)

The problem, which can be attributed to SGML and TeX, is essentially an inline problem caused by white space, line feeds, or carriage returns
The solution
- Change writing style: Remove white space from HTML
- Font-size :0 is used in the parent container
- Using margin negative values
- Use word-spacing or letter-spacing

3. What is the difference between display: None and visibility:hidden?

Does it take up space

Display: None. This element takes up no space and is rendered as if it does not exist (but still exists in the document object model tree). Visibility :hidden, the element space still exists. That is, one (display: None) will not appear in the rendering tree, and one (visibility :hidden) will.
Whether the rendering

Display: None, which triggers reflow to render. Visibility :hidden, will only trigger repaint because no position changes are found and will not be rendered.
Is it an inherited property

Display: None, display is not an inherited property, the element and its children disappear. Visibility :hidden, visibility is an inherited attribute. If a child element uses visibility:visible, it will not inherit and the child element will be visible again.
Whether the screen reader reads

Instead of reading the display: None element, the screen reader reads the visibility: hidden element.

4.visibility:collapse

For ordinary elements, it behaves the same as display:hidden.
The exception is that if the element is associated with a table, such as a table row, a table group, a table column, or a table column group, it behaves like display: None, that is, the space they occupy is also freed.

Differences in different browsers:

In Google Chrome, there is no difference between using collapse values and hidden values.
In Firefox, Opera, and IE11, using collapse values does exactly what it says: the rows of the table disappear, and the rows below it fill in its position.

5. What is the difference between rGBA and opacity?

Rgba () only works on the element’s own color or background color and has no effect on the element’s content.
Opacity functions on the element’s own color or background color, as well as the opacity of the content inside the element.

Seven, positioning

1. What are the values of position

Static: the default value. Without positioning, elements appear in normal document flow (ignoring top, bottom, left, right, or Z-index declarations)
Relative: Generates elements that are positioned relative to their normal position, not out of the document flow
Absolute: Generates an absolute position relative to the first parent element other than the static position
Fixed: Generates fixed positioned elements relative to the browser window. (Old IE not supported)
Inherit: Specifies that the value of the position property should be inherited from the parent element
Sticky: sticky location. It is used to monitor scroll events

2. The center of the

Absolute positioning techniques:

The width of the positioning reference object = left + right + margin-left + margin-right + the actual width of the absolute positioning element

Position the height of the reference object = top + bottom + margin-top + margin-bottom + the actual height of the absolute position element

1.1 How to center a div?

Reference link: blog.csdn.net/weixin_3758…

1.1.1 Level is in the middle

Inline element: The parent element is a block-level element, set to the parent elementtext-align:center, the parent element is not a block-level element, first set the parent element to a block-level element, then set the parent elementtext-align:center
Picture: Set the pictureclear:both; display:block; margin:auto;
Block-level elements

Scheme 1: (1) The width is fixed, and the center needs to be set margin:0 auto;

Display :inline-block; display:inline-block; display:inline-block Or display:inline converts it to an inline block-level element/inline element and sets the parent element text-align:center

Scheme 2: Use location attributes

Left :50%,margin-left:- Half of the width of the child element (width fixed), or transform:translateX(width variable)

Plan 3: Use Flexbox layout (variable width)

The parent element sets display:flex; justify-content:center;

1.1.2 Vertical center

Single-line inline elements: Set the line height = the height of the parent element
Display :table-cell; Vertical-align: bottom
Block-level elements:

Scheme 1: child element set absolute positioning, parent element set relative positioning, child element set top:50%; ‘ ‘margin-top:- half of the height of the child element, transform:translateY(-50%); (Highly variable)

Option 2: Flex layout, display:flex; align-items:center; (Line level, block level, picture all kill)

1.1.3 Horizontal and vertical center

An element whose height and width are known

Scheme 1: Child element set absolute positioning, parent element set relative positioning, child element set left:0; right:0; top:0; bottom:0; margin:auto;

Scheme 2: child element set absolute positioning, parent element set relative positioning, child element set top:50%; Margin-top :- half the height of the child element,margin-left:- half the width of the child element
An element of unknown height and width

Scheme 1: (positioning attributes) Absolute positioning of child elements, relative positioning of parent elements, top:50% of child elements; Left :50%(top left corner vertically centered), transform: 50%(-50%,-50%)

Option 2: (Flex layout) Parent element defines display:flex; justify-content:center; align-items:center;

1.2 How to center an absolutely positioned div?

1.3 How do I center a floating element?

Reference links: segmentfault.com/a/119000001…

Horizontal center
- Fixed width: relative + margin-left + left
Set position:relative to the floating element itself; left:50%; Margin-left :- Half the width of the float element
- Variable width: parent float + parent relative + child relative
To clear the float for the parent element, set float:left; , the parent element sets position:relative; left:50%; , the internal float element sets position:relative; left:-50%; Or right: 50%;
- Fixed or variable width: Flex
  
  The parent element sets display:flex; justify-content:center;
Vertical center
- Fixed height :(parent relative + child absolute + line-height) + top/bottom or margin-top

D: relative + absolute + line height + top/bottom #outer {position: relative; } #inner { line-height:100px; position: absolute; top: 0; bottom: 0; margin: auto; } 表 2: relative + absolute + line-height + margin-top #outer {position: relative; } #inner { line-height:100px; position: absolute; top: 50%; margin-top:-50px }<div id="outer" style="height:200px;">
  <div id="inner" style="float: left; height: 100px;">I am the vertical middle element</div>
</div>
Copy the code

General: flex

#outer {
    display:flex;
    align-items:center;
}

<div id="outer" style="height:200px;">
  <div id="inner">I am the vertical middle element</div>
</div>
Copy the code

Horizontal and vertical center
- flex
- The child element can set mairgin and word-wrap:break-word; Convenient effect

Eight, floating

1. Why does it float

The idea behind floating is to create an effect similar to the way words wrap around a picture in Word.

Normal document flow, because from top to bottom, left to right, is too prescriptive, each element is restricted in position. That’s why floating was introduced to create rich page effects.

The introduction of positioning has enhanced the possibility of page layout.

2. How floats work

Floating elements leave the document flow and do not take up space. The floating element touches the border that contains it or stays in the border of the floating element.

3. Problems with floating elements

The height of the parent element cannot be spread out, affecting elements at the same level as the parent element
Non-floating elements of the same class as floating elements follow
If the first element does not float, the elements preceding it need to float as well, otherwise the structure of the page will be affected

4. Clear the floating mode

The parent div defines height
- Principle: The parent div defines height manually, which solves the problem that the parent div cannot automatically get the height
- Advantages: simple, less code, easy to master
- Disadvantages: only suitable for fixed height layouts, give exact height, if the height is not the same as the parent div, this can cause problems
- Suggestion: Not recommended. Only recommended for a fixed height layout
Extra label method
- Principle: Add an empty div and use CSS’s improved clear: BOTH to clear the float so that the parent div can automatically get the height
- Advantages: Simple, less code, good browser support, not prone to strange problems
- The clear attribute applies only to block-level elements. This method adds extra tags and makes the HTML structure look less concise.
- Suggestion: Not recommended, but this method has been used primarily to clear floats before
The parent div defines overflow:hidden
- Principle: Width or zoom:1 must be defined, and height cannot be defined. When using Overflow: Hidden, the browser will automatically check the height of the floating area
- Advantages: Simple, less code, good browser support
- Disadvantages: Cannot be used in conjunction with position, because the size beyond the position is hidden
- Suggestion: Only recommended for those who do not use Position or have a deep understanding of Overflow: Hidden
The parent div defines pseudo classes :after and zoom
- Principle: IE8 above and non-IE browsers only support :after, principle and method 2 is somewhat similar, ZOOM (IE proprietary attributes) can solve IE6, IE7 floating problem
- Advantages: Good browser support, not easy to appear strange problems (currently: large websites are used, such as: Teng Xun, netease, Sina, etc.)
- Disadvantages: many code, many beginners do not understand the principle, to use two lines of code, to allow mainstream browsers are supported
- Suggestion: It is recommended that you define common classes to reduce CSS code
```
.clearfix:after{ content:"\0020"; // Put a blank at the end of the parent element height:0; Display :block; clear:both; // Make sure the whitespace character is a non-floating stand-alone block}. Clearfix {zoom:1; // Compatible IE6}Copy the code
```

5. What is the display value of the element after the float is set?

Automatically changes to display: block

Differences between Sass, Less and Stylus

1. What is a CSS preprocessor?

CSS preprocessor is a language used to add some programming features for CSS, without considering browser compatibility issues, for example, you can use variables in CSS, simple program logic, functions and other basic skills in the programming language, can make CSS more concise, more adaptable, more intuitive code and many other benefits

2. The difference between

Basic grammatical differences
- The Sass extension is. Sass, the Less extension is. Less, and the Stylus extension is. Styl
Difference of variables
- Sass variables must start with a $and then be separated from the value by a colon (:), just like CSS properties.
- The Less variable starts with @, and the rest of sass is the same.
- The Stylus has no setting for variables, which can start with a $or any character. Variables can be separated by colons or Spaces, but cannot start with an @ in the Stylus
All three types of preprocessors are available: nesting, operators, color functions, import, inheritance, and interfuse. The Stylus also has some advanced features. Examples are loops, judgments, and so on

Flex layout

1. Basic concepts

Flex layout elements are called Flex containers, or “containers” for short. All of its children automatically become container elements, called “items” for short.
The container has two axes by default: a horizontal main axis and a vertical cross axis. Spindle arrangement: from left to right; Arrangement of intersecting axes: from top to bottom;

2. Container properties

1.flex-direction

Attributes determine the direction of the main axis (that is, how items are arranged)

Row The main axis is horizontal and starts at the left end
Row-reverse The main axis is horizontal and starts at the end
Column The axis is vertical, and the starting point is at the top
Colunm-reverse The main axis is vertical, starting at the bottom

2.flex-wrap

Nowrap defaults to no line breaks
Wrap, the first line is on top
Wrap-reverse, the first line is at the bottom

3.flex-flow

Is a short form of the flex-direction and flex-wrap properties. The default values are row and nowrap

4.justify-content

Property defines the alignment of items on the main axis

Flex-start default, left-aligned
The flex – end right alignment
Center in the middle
The two ends of the space-between are aligned and the items are equally spaced
The space-around interval is half of the intermediate project
Spacing evenly between projects (including spacing with both ends)

5.align-items

Define how items are aligned on the intersecting axis (single line)

Flex-start cross axis start alignment
Flex-end crosses the axis end alignment
Center is vertically aligned and centered
Baseline Alignment of the first line text of the item
“Stretch” Default value. If the height of the project is not set or auto is set, it will occupy the entire height of the container

6.align-content

Multi-line axis alignment, use painful align-items

3. Project attributes

1.order

Defines the order of items, the smaller the value, the higher the value, the default is 0

2.flex-grow

Defines the project zoom scale, which defaults to 0

3.flex-shrink

Defines the project shrink scale. The default is 1, or if there is not enough space, the value 0 cannot be shrunk

4.flex-basis

Defines the size of the project itself, default auto

5.flex

The property is short for flex-grow, flex-shrink, or flex-basis. The default value is 0, 1, or auto

6.align-self

Project alignment

11. Page layout

Reference links: Common layouts for various pages

The page layout

1. Two-column layout

1.1 The width of the left column is fixed, and the right column is adaptive

1.2 The left column is adaptive and the right column is fixed width

1.3 One column is indeterminate and the other is adaptive

2. Three-column layout

2.1 Two columns have fixed width and one column is adaptive

2.2 Fixed width on both sides, adaptive in the middle

1. The floating

Set the left float on the left, set the right float on the right, and the middle will automatically adapt.


      
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .layout article div{
                height:100px;
            }
            .layout.float .left{
                float:left;
                width:300px;
                background-color:red;
            }
            .layout.float .right{
                float:right;
                width:300px;
                background-color:blue;
            }
            .layout.float .center{
                background-color:green;
            }
        </style>
    </head>
    <body>
        <section class="layout float">
        	<article class="left-center-right">
            	<div class="left">I was left</div>
                <div class="center">I am a center</div>
                <div class="right">I am right</div>
            </article>
        </section>
    </body>
</html>
Copy the code

2. Absolute positioning

Set the left to absolute position, left: 0px. Set the right to absolute position, right: 0px. Set the center to absolute position, left and right to 300px. The width in the middle will be adaptive.


      
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .layout article div{
                height:100px;
            }
             .layout.absolute .left-center-right {
            position: relative;
        }

        .layout.absolute .left {
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }

        /* Important: Position the middle area 300px on the left and 300px on the right. The width is self-used */
        .layout.absolute .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background: green;
        }

        .layout.absolute .right {
            position: absolute;
            right: 0;
            width: 300px;
            background: blue;
        }
        </style>
    </head>
    <body>
        <section class="layout absolute">
        	<article class="left-center-right">
            	<div class="left">I was left</div>
                <div class="center">I am a center</div>
                <div class="right">I am right</div>
            </article>
        </section>
    </body>
</html>
Copy the code

3. Flexbox layout

Set the left and right containers to display: flex, set the width of both sides, and set flex = 1 in the middle.


      
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            height: 100px;
        }

        .left-center-right {
            display: flex;
        }

        .layout.flex .left {
            width: 300px;
            background: red;
        }

        .layout.flex .center {
            flex: 1;
            background: green;
        }

        .layout.flex .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout flex">
        <article class="left-center-right">
            <div class="left">I was left</div>
            <div class="center">
                <h1>Flex layout solutions</h1>I am a center</div>
            <div class="right">I am right</div>

        </article>
    </section>

</body>

</html>
Copy the code

4. Table layout

Set the width of the entire container to 100%, set all three parts to be tables (display:table-cell), and then set the left cell to 300px and the right cell to 300px. The cell in the middle will be adaptive.


      
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout.table div {
            height: 100px;
        }

        /* Important: Set the container to a table layout with a width of 100% */
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;

        }

        .layout.table .left-center-right div {
            display: table-cell; /* Important: set three modules as units in the table */
        }

        .layout.table .left {
            width: 300px;
            background: red;
        }

        .layout.table .center {
            background: green;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }
    </style>

</head>

<body>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left">I was left</div>
            <div class="center">
                <h1>Table layout solution</h1>I am a center</div>
            <div class="right">I am right</div>

        </article>
    </section>

</body>

</html>
Copy the code

5. Grid layout

Set the container to a grid layout with a width of 100%, set the grid to three columns, and set the width of each column.

Method 1: Float:

Advantages: Good compatibility.
Disadvantages: Floats can deviate from the standard document flow, so floats need to be cleared. Let’s just work this out.

Method :2: absolute positioning

Advantages: Fast.
Disadvantages: Causes child elements to deviate from the standard document flow, poor usability.

Approach 3: Flex layout (as seen in CSS3)

Pros: The flex layout is perfect to address the shortcomings of the above two methods. Mobile basically uses Flex layout.

Method 4: Table layout

Pros: Tabular layouts are useful in many scenarios and very compatible. Since IE8 does not support Flex, try table layouts at this point
Disadvantages: Because all three sections are treated as cells, if the middle section becomes higher, it will be forced to adjust its height. However, in many scenarios, we don’t need to increase the height of the sides.

When to use Flex layout or table layout depends on the scenario. Both have no absolute advantage, also have no absolute deficiency.

Method 5: Grid layout

CSS3 introduced layout, very easy to use. The amount of code is much simpler.

PS: The grid layout mentioned in the interview shows that we are pursuing new technology.

Extension: If the height is removed from the problem, it is known

Problem: In the problem, if the height is known, we have to cram a lot of content into the middle module to make the middle module open. What’s going to change? Which layout doesn’t work?

Analysis: If you look at the animation above, what happens when the middle module becomes crowded? That’s the answer we’re looking for.

The answer is: The Flex layout and table layout are common, and the other three layouts are not.

3. Multi-column layout

3.1 Equal width layout

3.2 Nine-grid layout

3.3 Grid system

Methods for CSS optimization and performance improvement

Avoid over-constraining
Avoid descendant selectors
Avoid chain selectors
Use compact syntax
Avoid unnecessary namespaces
Avoid unnecessary repetition
It is best to use semantic names. A good class name should describe what it is, not what it looks like
Avoid!!! Important, you can select other selectors
Simplify rules as much as possible. You can combine duplicate rules from different classes
Fix parsing errors
Avoid using multiple class selectors
Remove an empty CSS rule
Use display properties. some style combinations are invalid due to display, which increases style size and affects parsing performance.
Display: Inline should not be used after width, height, margin, padding, or float.
Display: Float should not be used after inline-block.
Display: Vertical-align should not be used after block.
Margin or float should not be used after display:table-*.
Don’t abuse floats: While floats are inevitable, there’s no denying that many CSS bugs are caused by floats.
Don’t abuse Web fonts
Web Fonts may be unfamiliar to Chinese websites, but they are very popular in foreign countries. Web Fonts are usually bulky, and some browsers block page rendering when downloading Web Fonts and impair performance.
Don’t overstate font size: This is a design issue. Well-designed pages don’t overstate font size.
The main reason for not using ID identifiers in selectors is style reuse and coupling to the page.
Do not define excessive styles for h1 to H6 elements
Define the heading element once for the whole site. If you need to customize the heading element, use other selectors instead.
H1-h6 elements are not redefined
Zero does not require any units
Standardize various browser prefixes: usually put browser prefixes first and standard style attributes last, like:.foo{

-moz-border-radius: 5px; border-radius: 5px; } Duplicate codeCopy the code

To use advanced features such as CSS gradient, specify the prefix of all browsers
Avoid making selectors look like regular expressions
CSS3 adds some complex attributes, such as ~=, which are not supported by all browsers. Use them with caution.
Beware of broken box Models

13. Responsive design

Responsive design is a site that is compatible with multiple terminals, rather than a specific version for each terminal
The basic principle is to use CSS3 media query to adapt different styles for different sizes of devices

For earlier versions of IE, you can use JS to get the screen width, and then use resize method to achieve compatibility:

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class"."w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class"."w1400");
}
if(screenWidth > 1800){
  $("body").attr("class".""); }}Copy the code

CSS Interview summary