Technique one
In some cases the width of the child element can be greater than the width of the parent element
In the case, the width of ul is greater than the width of the plate center, and does not affect the layout
Technique two
How to make fixed positioning elements close to the center of the board?
Answer: Use fixed positioning, the value of left:50% margin-left is equal to half of the center of the board plus its own width, pay attention to the negative value
Technique three
How to align the child elements in the parent element (for inline and inline block elements)
Answer: Ensure that the child element must be an inline block element or an inline element and text text-align:center.
Technique Four
: The focus pseudo-class selector is used to obtain the focus element and generally refers to the focus element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
border: 1px solid red;
background-color: red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
Character abbreviation
Single-line text omission
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
Multi-line text omitting method
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;