First, the surface was a problem

Issue 1, CSS3 animation, GPU acceleration, leading to a separate layer generated attribute?

CSS3's transform not trigger reflux, it will produce independent layers using GPU acceleration. There opacity, filter (filters) will trigger GPU acceleration

Question 2 Home white screen optimization

Style put head, asynchronous download, put the bottom of the script.

Question 3, seeking body height

html

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

style

    html{
        padding: 0;
        margin: 0;
    }
    div{
        height: 10px;
        border: 10px;
        padding: 10px;
        margin: 10px;
        border: 10px;
        background-color: green;
    }

Invalid border; body without padding and border, resulting in the body down margin becomes 2margin; div four vertically overlapping margin. So margin overall reduction of six. Thus:
body height = 10 . 5 . 5 - 10 * 6 = 190

If border: 10px solid red

body height = 10 . 5 . 7 - 10 * 6 = 290

Question 4, when compressed base64 pictures, if the picture size 1k, no optimization results

base64 increases volume css, css will block page rendering.

Issue 5, CSS layout description?

layout	Method to realize	advantage	Shortcoming
Static layout	Always write with the size of the dead px	Simple design, no compatibility issues. The most suitable for the PC	Do not adjust the screen size
Adaptive layout	Are different static design layouts for different screen sizes, different code loaded by media queries	Experience the best equipment within the scope of adaptation	Need to design a web page multiple layouts, large development work
Fluid layout (conventional)	Width percentage do adaptive, height, size of the text written with the dead px	The overall layout unchanged	Viewport makes small width is very narrow but constant height, poor visual experience
Elastic layout	Rem em unit provided with opposite, size, aspect ratio maintained; media access control with the font size of the root element	Keep the size ratio. Most suitable for mobile end	rem relative font size calculation trouble. chrome minimum font size is 12px.
Responsive layout	Flexible Fluid layout + Media + layout query	For pc and mobile terminal compatible	media inquiries limited. Heavy workload. chrome browser minimum font problems

Issue 6, display: there is a gap, between reason and solutions inline-block elements?

Cause: The line breaks and spaces will be a gap in the line of text
to address:

The parent element font-size: 0, and then re-set sub-elements
negative margin
父：table-cell; word-spacing:-em
On the same line

Second, code implementation

1, series-flow layout

Fixing (1) side, the other side of the adaptive

method:

Floating document flow from the left, the right side is formed BFC
Floating left and right overflow: hidden / scroll / auto
flex
Father and son nested. Margin-left parent element or padding-left, a negative margin-left sub-element.
absolute absolute positioning, from the document flow.

Fixing (2) on both sides, an intermediate adaptive

method:

flex
absolute absolute positioning, from the document flow, the formation of BFC.
First floating around, let the BFC intermediate form, or with a margin / padding
Flying wing or Grail layout, is the use of float

(3) cascade arrangement - not high width

flex achieved, Parent flex element, provided flex-wrap: wrap; wrap.

2, vertically centered series (parent element width and height unknown)

(1) variable width and height of the center element

父relative，子absolute + transform
父flex，justify-content:center, align-items:center

Method 3,

(2) centrally of the element's width and height

The above methods are available. Additional methods:

Replace transform the available margin
left / right / top / bottom are all 0, then margin: auto setting

(3) side by side vertical centering text and images

Parent elements: line-height = height; text-align = left: Center;
IMG: Vertical-align = left: text-bottom;

3, CSS Plot Series

(1) CSS realize the wide rectangular adaptive Higher proportions

padding realization

(2) css hand painted triangle

    <style>
    .f{
        width: 0;
        border: 20px solid transparent;
        border-left-color: red;
    }
</style>

(3) Write bubbles with css

+ Absolute pseudo-element

html

<div class="f"></div>

css

<style>
    .f{
        width: 100px;
        height: 40px;
        border-radius: 20px;
        background-color: pink;
        position: relative;
    }
    .f::after{
        content: '';
        display: inline-block;
        border: 6px solid rgba(0,0,0,0);
        border-left:14px solid pink;
        position: absolute;
        right: 0;
        transform: translateX(12px) rotate(-20deg);
    }
</style>

4, transitions, animation series

(1) to achieve a fade out effect