This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Review a few knowledge points every day, in the usual code to write up will be more handy.

How does Chrome support text less than 12px

The minimum browser font is 12px. For the Google Chrome kernel, use the Transform property:

font-size:10px;    
-webkit-transform:scale(0.8); 
display:block;
Copy the code

PNG, JPG, GIF, and WebP image formats

  • PNG: Portable Network Graphics is a bitmap file format for lossless data compression. The advantages are: high compression ratio, good color. You can use it in most places.
  • JPG: a distortion compression method used for photos. It is a destructive compression method that does a good job of smoothing changes in tone and color. On the WWW, a format used to store and transfer photos.
  • GIF: a bitmap file format that reproduces a true color image in 8 bit colors. You can animate it.
  • Webp: An image format launched by Google in 2010, with two-thirds the compression of JPG and a 45 percent smaller size than PNG. On the downside, it takes longer to compress and is not compatible, currently supported by Google and Opera.

The difference between the style tag after the body and before the body

First in the page, loading is done from the top down, with the style loading first. After the body is written, the browser parses the HTML document line by line. When the style sheet is parsed to the end, the browser will stop rendering before and wait for the style sheet to be parsed before rendering again. In IE, the page flicker may occur due to the style failure.

The CSS property overflow property is used to handle the overflow of elements

Scroll: The scroll bar will appear. Auto: The scrollbar appears when the child element content is greater than the parent element; “Visunavailable” : overflow outside parent element; Hidden: Overflow content hidden;

Interpretation of Flex layouts and properties

  • Flex-direction: Controls the direction of the main axis
  1. Row horizontal left to right (default)
  2. Row-reverse horizontally from right to left
  3. The column goes vertically from top to bottom
  4. The column-reverse is vertical from bottom to top
  • Plug-content: controls how the child elements are aligned on the main axis
  1. Flex-start starts from the main axis to the main axis end
  2. Flex-end is from the main end to the beginning
  3. Center in the middle
  4. Space-between Indicates the distribution at both ends
  5. Space-around Indicates the distribution of the surround
  6. Space-evenly distributed
  • Align-items control how child elements are aligned on the side axis
  1. Flex-start starts from the side axis to the end
  2. Flex-end from the end of the side axis to the beginning
  3. Center in the middle
  4. Set the height of the child element when you want to stretch
  • Flex-wrap controls whether a child element is newline
  1. Nowrap default, no line feeds
  2. Wrap a newline
  • Align-content controls how child elements are aligned on the side axis (multiple lines)
  1. Flex-start starts from the main axis to the main axis end
  2. Flex-end: From the end to the start of the spindle
  3. Center: Center alignment
  4. Space-between Indicates the distribution at both ends
  5. Space-around Indicates the distribution of the surround
  6. Space-evenly distributed
  7. Do not set height for the children of the stretch effect

Dots and dots are displayed when text overflows

  • Single line:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Copy the code
  • Multiple lines:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // There is an ellipsis in the second lineoverflow: hidden;
Copy the code

CSS3 text properties

  • text-shadow:2px 2px 8px #000; : Parameter 1 is the offset to the right, parameter 2 is the offset to the left, parameter 3 is the gradient pixel, parameter 4 is the gradient color

  • Text-overflow: specifies what happens when a text overflow contains an element. Text-overflow :ellipsis

  • Text-wrap: specifies the rule for wrapping text

  • Word-break: Specifies a newline rule for non-CjK text

  • Word-wrap: Separates long, indivisible words and wraps them on the next line

  • White-space: Specifies how white space is handled in elements. White-space: Nowrap specifies that text in a paragraph does not wrap

CSS 3 gradient

  • Linear Gradients – down/up/left/right/diagonally
background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...) ;Copy the code

Gradient direction (optional, top to bottom by default) :(to bottom, to top, to right, to left, to bottom right)

  • Radial Gradients – defined by their centers
background-image: radial-gradient(position, shape size, start-color, stop-color);
Copy the code

  • Position: Defines the position of the center of the circle

  • Shape size: Consists of two parameters. Shape defines a circle or ellipse and size defines size.

    1. Shape it can be the value circle or ellipse. Where, circle means circle, ellipse means ellipse. The default is ellipse.
    2. The size parameter defines the size of the gradient. Closest side, spidery side, closest corner, spidery corner

  • Start-color: sets the start color;

  • Stop-color: Sets the end color.

  • Position and Shape Size Optional. If they are not set, the default values are used.

  • Start-color and stop-color are mandatory parameters, and radial gradiens can be set to multiple colors just like linear gradiens.

In the range of the box – shadow

Box-shadow Adds one or more shadows to a box. This property is a comma-separated list of shadows, each of which is specified by 2-4 length values, an optional color value, and an optional inset keyword. The value of the omitted length is 0.


box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px # 888888;
Copy the code

  • H-shadow: Required. The position of the horizontal shadow. Negative values are allowed.

  • V-shadow: Required. The position of the vertical shadow. Negative values are allowed.

  • Blur: This parameter is optional. Blur distance.

  • Spread: Optional. The size of the shadow.

  • Color: Optional. The color of the shadow. See CSS color values.

  • Inset: This parameter is optional. Change the outset shadow to the internal shadow.

CSS 3 transition

Transition in CSS3 allows CSS property values to transition smoothly over a period of time. This effect can be triggered by mouse clicks, getting focus, being clicked, or any changes made to an element, and smoothly animates CSS property values.


transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
Copy the code

Transition-property: Specifies the TRANSITION CSS property.

  1. None: No style is specified.
  2. All: The default value for all styles that support the transition-property attribute of the specified element.
  3. : Specifies one or more styles. Not all styles can be transition-property. Only styles with a mid-point value can have transition effects, such as color, length, gradient, etc.

Transition-duration: Specifies the time required to complete the transition.

Transition-timing: specifies the transition timing function.

  1. Ease: The default value, which gradually slows down as the element style transitions from the initial state to the end state.
  2. Linear: The element style transitions from the initial state to the end state at constant speed.
  3. Ease-in: The element style moves faster and faster from the initial state to the end state, in a state of acceleration. This effect is called a fading effect.
  4. Ease-out: The element style becomes slower and slower as it transitions from the initial state to the end state, in a deceleration state. This effect is called the fade effect.
  5. Ease-in-out: Element style speeds up and then slows down as it moves from its initial state to its final state. This effect is called the fade and fade effect.

Transition -delay: Specifies the delay for the transition to begin.

  1. It can be a positive integer, a negative integer, or a zero. Non-zero must be set in s(seconds) or ms(milliseconds).