1. Complete meta settings:

width=device-width constrained viewport is factory viewport
initial-scale=1.0 Default Viewport 1.0 times
minimum-scale=1.0 allows 1.0 times the smallest viewport
maximum-scale=1.0 allows 1.0 times the maximum viewport
user-scalable=no does not allow users to zoom in and out of the viewport
2. Percentage Layout:
1). The percentage of the child box to the parent box, regardless of the padding of the parent box
For example:

<div>
    <p></p>
</div>
div{width:600px;padding-left:100px;}
p{width:50%;}

The p should be 300px wide at this point, because the father's padding is ignored.
2). Padding, on the other hand, refers to his father's width.Note that the padding in the vertical direction is also based on the father's width, not height.
For example:

<div>
    <main></main>
</div>

div{
   width:800px;
   padding-left:400px;
   padding:153px 234px 341px;
}

What percentage of the width of the parent box is all padding

p{
   width:50%; //400px
   height:100px;   
   padding-left:10%;  //80px
   paading-right:10%; //80px
   padding-top:10%; //80px
   padding-bottom:10%;  80px
}

3). margin, always refers to the father's width, not his margin and height.
For example:

<div>
    <main></main>
</div>
div{
    width: 200px;
    height: 600px;
    border: 10% solid #000;
}
p{
    margin: 10%;
}

Summary:
Whether margin, padding, width, height, vertical or horizontal, the reference is the father's width.

4) Trouble caused by the border.
Borders are cumbersome because they cannot be written as percentages.

p cannot float successfully because the total width is already 100% more than four px.
At this point the border cannot be written as a percentage, so it cannot be subtracted!
div{
width: 80%;
height: 200px;
margin: 0 auto;
background-color: #eee;
}
p{
float: left;
width: 50%; 2px cannot be easily subtracted here
height: 200px;
background: orange;
border: 1px solid #000;
}

Solution: Add calc function in CSS3:

        div{
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #eee;
        }
        p{
            float: left;
            **width: calc(50% - 2px);→ CSS3 Added in calc function**
            height: 200px;
            background: orange;
            border: 1px solid #000;
        }

5). After the original box model was expanded with padding and margin, the new box model of css3 was added with box-sizing: border-box; attribute, the box model is subtracted from inside, which is compatible with IE8 and other advanced browsers.
6) New elastic box properties display:box; and display:flex;
When div sets display:box, the sub-boxes will automatically side by side!Don't write floating, write floating but make a mistake.
The browser automatically detects the total number of copies, how many copies each, and how many copies you own.There is no need to calculate 8.3333%, 16.666%.This property overrides percentage writing!There are no percentage signs in CSS.And this property is good enough that margin s can subtract automatically and border s can subtract automatically.
This property also has a branch display:flex; the property added to the parent box.
You can use flex-direction to set directions with four values: row, row-reverse, column, column-reverse;
Flex-wrap: wrap; to set the automatic line break;
Set alignment: justify-content:flex:end;justify-content:flex:space-between; justify-content:flex:space-around;
Set order:

<div>
    <p>A</p>  → order:5;
    <p>B</p>  → order:1;
    <p>C</p>
    <p>D</p>
    <p>E</p>
    <p>F</p>  → order:2
</div>

Flex-group attribute Whether spatial redundancy extends: 1 Yes 0 No (default)
flex-shrink attribute shrinks when space is insufficient: 1 Yes (default) 0 No
Use flex-basis:25%; attributes indicate how much area is occupied, consistent with width.
7) Solid ratio:
The three boxes are side by side to support the father, the boxes at both ends are fixed at 120px size, and the boxes in the middle are filled with the rest.
Method 1:

<div>relative positioning, carrying padding
    <p>A</p>Absolute positioning, top:0;left:0;
    <p>B</p>→ width:100%;
    <p>C</p>Absolute positioning, top:0;right:0;
</div>

Method 2: On display:-webkit-box;

<div>→ display:-webkit-box;
    <p>A</p> → width:120px; No, box-flex attribute
    <p>B</p>→  -webkit-box-flex:Any numerical value.
    <p>C</p>→ width:120px; No, box-flex attribute
</div>

8) Equal proportional changes in height:
a. Insert Picture Method:
Generally speaking, boxes that require equal-scale changes in height carry pictures because they do not want the pictures to be distorted, so the boxes have to change in equal-scale.
img tags are inherently proportional.The box constrains the width of the picture, which in turn affects the height of the box.
For example, now you want to make three 1:1:1 boxes side by side, and their aspect ratio is 1:1, or square.

<div>→ width:80%; overflow:hidden;
    <p>→ float:left;width:33.33%;
        <img src="images/yangyang.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/liyifeng.png" alt="">→ width:100%;height:auto;
    </p>
    <p>→ float:left;width:33.33%;
        <img src="images/xiaoming.png" alt=""> → width:100%;height:auto;
    </p>
</div>

The height s of the pictures will calculate decimals, but the boxes will not automatically fill up with decimals, and there will be white edges. The easiest way is to add a vertical-align: middle to the img; attribute and overflow:hidden;
b.padding method, place pictures in padding;

<div>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
        <p><img src="images/liyifeng.png" alt=""></p>
</div>

The padding in the vertical direction refers to the father's width, so the padding's reference is the same as the width's reference, so you can make a box of height proportional changes!
The height of the box is set to 0, width:33.3%;padding-top:33.3%; both refer to the width of the parent box, so the values are the same, then set width:100% for the child box; height:100%;

div{
width: 80%;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
div p{
float: left;
width: 33.333%;
padding-top: 33.333%;
height: 0px;
border: 1px solid #000;
box-sizing:border-box;
position: relative;
}
div p img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

c).CSS3 adds rem units, which are absolute units, representing how many times the font size of the html root element.
Use of rem: first increase the root font size

html{
 font-size: 20px;
 }

<script type="text/javascript">
    set();

    window.onresize = set;

function set(){
            //The width of the window at this time
var windowWidth = document.documentElement.clientWidth;
            //Multiple
var rate = windowWidth / 600;
            //Set the font size at this time
document.documentElement.style.fontSize = 20 * rate + "px";
}
</script>
<script type="text/javascript">
function setHTMLFontSise(){
var windowWidth = document.documentElement.clientWidth;
//Determine if the viewport width is greater than the maximum version center?
if(windowWidth > 540){
document.documentElement.style.fontSize = "20px";
}else if(windowWidth < 320){
document.documentElement.style.fontSize = 320 / 540 * 20 + "px";

}else{
document.documentElement.style.fontSize =  windowWidth / 540 * 20 + "px";
}

}

window.onresize = setHTMLFontSise;
setHTMLFontSise();
</script>

Background positioning, background-size can be written in rem:

.logo{
    border: 1px solid #000;
    width: 5rem;
    height: 4rem;
    background: url(images/icons.png) no-repeat -8rem -3rem;
    background-size: 15rem 10rem;
 }

9) Notes for moving end:
The pictures in your mobile phone should be reduced by two to three times, so that you can make full use of the high-definition screen of your mobile phone to make the pictures clearer.
10) Automatic ellipsis for text overflow
One-line ellipsis:

div{
            /*Overflow plus ellipsis*/
            text-overflow:ellipsis;
            /*Set text not to wrap, even if it overflows horizontally*/
            white-space: nowrap;
            /*hide*/
            overflow: hidden;
        }

Multiple line ellipsis, one of the five attributes is required:

section{
            /*Overflow plus ellipsis*/
            text-overflow:ellipsis;
            /*hide*/
            overflow: hidden;
            /*Must be an Elastic Box*/
            display: -webkit-box;
            /*Set the number of rows to 3*/
            -webkit-line-clamp: 3;
            /*Vertical Arrangement*/
            -webkit-box-orient: vertical;
        }