1 Selector classification

  • Element selectora{}
  • Pseudo element selector::before{}
  • Class element selector.link{}
  • Property selector[type=radio]{}
  • Pseudo class selector:hover{}
  • The ID selector#id{}
  • Combinatorial selector[type=checkbox] + label{}
  • Negative selector:not(.link){}
  • Universal selector* {}

2 Selector weight (1)

  • ID selector # ID {}+100
  • Class attribute pseudo-class +10
  • Element pseudo-element +1
  • Other selectors +0
#id. Link. Active ————————————————100
.link +10
.active +10Results:120
Copy the code

A number that does not carry

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>CSS selectors</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">blue</div>
    <div class="test2">blue</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">red</div>
</body>
</html>
Copy the code

3 Selector weight (2)

  • ! Important has the highest priority
  • The element attribute has a high priority
  • The value written after the same weight takes effect
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>CSS selectors</title>
    <style>
        .test1{
            color: red;
        }
        .test1{
            color: blue;
        }
        .test2{
            color: red! important;
        }
        .test2{
            color: blue;
        }
        #test3{
            color: red;
        }
    </style>
</head>
<body class="body" id="body">
    <div class="test1">blue</div>
    <div class="test2">red</div>
    <div id="test3" style="color: blue;">blue</div>
</body>
</html>
Copy the code

4 Non-layout styles

4.1 the font

Font families such as Serif, monospace (without quotation marks) serif fonts

  • Multi-font fallback examples: “Monaco”, “Microsoft Yahei”, “PingFang SC”
  • Network fonts, custom fonts
  • iconfont

4.2 Line height (Classic problem)

  • Line-height composition (line-box, line-box inline-box)
  • Phenomenon and scheme of row height correlation (vertical center effect can be achieved by setting line-height)
  • Row height adjustment

There is a deviation between the baseline and the baseline. The deviation is based on the font size. If the font size is 12px, the space between the image is about 3px. This is the classic picture 3px gap problem.

Solution:

  • Since the default alignment is baseline, you can set vertical-align to bottom.
  • Setting display:block will solve this problem, but will monopolise a line, as shown below:

4.3 background

Background color Gradient background multi-background overlay

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Gradient background (linear gradient)</title>
    <style>
        .div1{
            height: 90px;
        }
        .div2{
            height: 90px;
            /*background: linear-gradient(to right,red,green); * /
            /*background: linear-gradient(180deg,red,green); * /
            /*background: linear-gradient(135deg,red 0,green 15%,yellow 50%,blue 90%); * /
            
            /* Grid line */
            background: linear-gradient(135deg,transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(45deg,transparent 0,transparent 49.5%,red 49.5%,red 50.5%,transparent 50.5%,transparent 100%);
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>
Copy the code
background: linear-gradient(to right, red, green);
Copy the code

background: linear-gradient(180deg, red, green);
Copy the code

background: linear-gradient(135deg, red 0, green 15%, yellow 50%, blue 90%);
Copy the code

background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%), linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
Copy the code

Background image and Properties (Sprite)

background-repeat: no-repeat;
background-size: 30px 30px; // Offset relative to the containerbackground-position: 30px 30px;
Copy the code

Sprite image is to splice many images into one image, and then offset them through background-position and other attributes to get the corresponding image in the web page, so as to reduce HTTP requests

Base64 and performance optimization

  • After the image is base64 encoded, it is a character text. One drawback is that the size of the image will increase by about 1/3, and the image will be placed in the CSS file, which also causes the CSS file to become larger. In addition, although it can reduce HTTP requests, it increases the decoding overhead. It is suitable for small ICONS, such as loading files. Finally, direct Base64 encoding of images is generally not used in development environments, because for collaborative development, there is no way to know what the image is, just one text.
  • Typically, small images are base64 encoded by packaging in a production environment.

4.4 Frame (classic problem)

Border properties: line size color

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A border</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 1px solid red;
            /*border: 5px solid red; * /
            /*border: 5px dotted red; * /
            /*border: 5px dashed red; * /
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
Copy the code

Border background

Classic problem: nine grid problem, such as the following picture, if we want to achieve 9 different forms, and then put content in the middle, if the original 9 div method, then it will be very troublesome, and CSS3 provides the border way to solve the above problem.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>A border</title>
    <style>
        .c1{
            width: 400px;
            height: 200px;
            border: 30px solid transparent;
            border-image: url(./xx.png) 30 round; /*round Round round */
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
Copy the code

Border connection (triangle)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width.initial-scale=1.0"> < span style>.c3{
            width: 0px;
            height: 200px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="c3"></div>
</body>
</html>
Copy the code

4.5 the scroll

Why scrolling occurs: Scrolling is needed when there is more content than the container can hold. Rolling mainly includes the following aspects:

Overflow sets the difference between auto and scroll. Auto means that if there are more contents than the container, the scroll bar will be displayed. Scroll is always displaying the scroll bar

4.6 Text Folding (Classic problem)

  • Overflow-wrap (word-wrap) Generic line wrap control
  • Word-break for multi-byte text (Chinese words are also words)
  • White-space Specifies whether the white space is broken

Classic question: How do I make a long text line free?

Set the above properties to NowRap

white-space: nowrap;
Copy the code

4.7 Decorative Attributes

  • Font weight (bold) font weight
  • Italic font – style: itatic
  • Underline text – decoration
  • Pointer cursor

5. CSS Interview Questions

5.1 Priority of CSS styles (selectors)

  • Calculate weight determination
  • ! important
  • Inline style
  • The value written after has a high priority

5.2 Function of Sprite diagram

  • Sprite image is a combination of many images into one image, and then offset by background-position and other attributes to get the corresponding image in the web page, so as to reduce HTTP requests and improve page loading performance.
  • There are cases where you can reduce the image size (e.g. PNG images, where each image has the same color, and the total image size may be less than the sum of the images)

5.3 Use scenarios of customized Fonts

Publicity/brand/banner and other fixed copywriting font ICONS (turn text into ICONS)

5.4 Functions of Base64

After the image is base64 encoded, it is a character text. One drawback is that the size of the image will increase by about 1/3, and the image will be placed in the CSS file, which also causes the CSS file to become larger. In addition, although it can reduce HTTP requests, it increases the decoding overhead. It is suitable for small ICONS, such as loading files. Finally, direct Base64 encoding of images is generally not used in development environments, because for collaborative development, there is no way to know what the image is, just one text.

  • Used to reduce HTTP requests
  • Good for small images
  • Base64 is about 3/4 of the size of the original

5.5 What is the difference between pseudo-classes and pseudo-elements?

  • Pseudo-class table state (an element is a link state)
  • Pseudo-elements are real elements (::before{}, which will display content in the page)
  • The former uses a single colon, while the latter uses a double colon

5.6 How can I Beautify the CheckBox

  • Label [for] and id
  • Hide native input (all styling is done by label)
  • :checked + label

6 CSS layout

The most important part of CSS architecture knowledge

  • In the early stage, table was the main (simple)
  • Later to technical layout (difficult)
  • Now there’s Flexbox/Grid

6.1 Common Layout Modes

  • Table layout
  • Float Float + margin
  • The inline – block layout
  • Flexbox layout

6.2 Layout (Table)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The table layout</title>
    <style>
        .table{
            margin-top: 20px;
            width: 500px;
            height: 100px;
            display: table;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
        .left{
            background: red;
            vertical-align: middle;
        }
        .right{
            background: blue;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">left</div>
            <div class="right table-cell">right</div>
        </div>
    </div>
</body>
</html>
Copy the code

6.3 Display/position (Classic problem)

  • Display common attribute values: block (block level)/inline (inline)/inline-block (inline)
  • Position Common attribute values: static/relative/absolute/fixed

Classic problem: Absolute is located, and the parent is identified as absolute or relative. If the parent is not identified, the parent will be identified as absolute or relative. Then the parent will be identified according to the body, which is also separated from the document stream like fixed.

Fixed Indicates the location relative to the screen

  • In this case, you can solve the problem by designing z-index. The heavier the weight is, the better the display is.

6.4 Flexbox (Holy Grail Layout)

  • Elastic box
  • The boxes are side-by-side
  • Specify the width
  • Commonly used on mobile terminal

(The reason why it is not very hot at present is that although it is simple and convenient, there are some compatibility problems)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Grail layout - Flexbox</title>
    <style>* {margin: 0;
        }
        .container{
            min-height: 200px;
            display: flex;
        }
        .left{
            width: 200px;
            display: flex;
            background: red;
        }
        .center{
            background: yellow;
            flex: 1;
        }
        .right{
            width: 200px;
            display: flex;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>
Copy the code

6.5 float

  • Element “float”
  • Out of the document flow (does not affect the layout of other elements)
  • But not out of the text stream

6.6 Impact of Float (Classic Question)

How float affects itself:

  • Form a block (BFC, which allows inline elements to set the width of a span element, for example, in the previous code, the width of a SPAN element can not be set, but by setting a float layout it can be set)
  • Get as far up as you can
  • Keep the container to the left (right) as much as possible. (For the above explanation, if the container is wide enough, go up and left as much as possible. If not, go down.)

  • How the float feature affects siblings:
  • Paste non-float elements above
  • Paste the float element next to it
  • Does not affect other block-level element positions (does not leave the document flow)
  • Affects text inside other block-level elements (outside of the text stream)

The float feature affects the parent:

  • “Disappear” from layout (parent doesn’t care about width and height)
  • Classic questions: Height collapse (let’s say the float element is 100px high and the parent is expected to spread 100 pixels, but because float is set, the parent disappears and doesn’t care about the 100 pixels, so if there is no other element to support the height, the parent’s height will be set to 0. This is height collapse)

6.7 Know the floating mode

7 Effect Properties (the best part of CSS)

7.1 box – shadow

Attribute value introduction: the first two are offset, the third is fuzzy area degree, the fourth is extended area degree, the fifth is color (the last is transparency)

box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .2);
Copy the code

7.2 the text – shadow

Three-dimensional printing texture

7.3 border – the radius

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>border-radius</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
Copy the code

8 the CSS animations

The principle of animation visual retention: that is to say, when you see a picture, you will keep a fragment of the picture in your mind gradually changing

8.1 The role of animation

  • pleasure
  • attention
  • Feedback (Login box shakes when entering wrong password)
  • hide

8.2 Types of animations in the CSS

  • Transition tween animation (moving from one state to another with animation)
  • Keyframe animation (each state specified is a keyframe)
  • Frame by frame animation (jump)

8.3 Transition Tween Animation

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Transition Tween animation</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            transition: width 1s, background 2s;
        }
        .container:hover{
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
Copy the code

8.4 Keyframe animation

  • Equivalent to multiple tween animations
  • Has nothing to do with changes in element states
  • More flexible definitions
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Keyframe Animation of the keyframe</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s;
            animation-direction: reverse;
            animation-iteration-count: infinite;
            /*animation-fill-mode: forwards; * /
            /*animation-play-state: paused; * /
        }
        @keyframes run {
            0%{
                width: 100px;
            }
            100%{
                width: 800px; }}</style>
</head>
<body>
    <div class="container"></div>
</body>
</html>
Copy the code

8.5 Frame-by-frame animation

  • Belongs to a special kind of keyframe animation
  • Suitable for animations that cannot be tween computed
  • Resources is bigger
  • Use steps() to set several frames between keyframes, usually set to 1, or remove the tween between keyframes.