One picture helps you fully master all CSS properties!

CSS properties are divided into different types, such as font properties, text properties, border properties, margin properties, layout properties, positioning properties, print properties, etc. For beginners, the biggest obstacle to learning CSS is how to become familiar with and master the use of these properties.

Tips: Don’t rush to memorize every CSS property, don’t rush to understand their usage, and don’t memorize them mechanically. If you use the method of memorizing English words, Memory, the effect is bound to be very poor.

The best way is to learn and memorize at the same time, and make breakthroughs one by one in practice. When learning web page layout, you might as well focus on studying fonts and text properties. When learning about web page layout, it's worth studying several properties related to the box model and layout.

When memorizing these attributes, you must combine them with practice, keep trying and draw inferences. Only in this way can you fully master all CSS properties and be able to apply them skillfully. For example, when preparing to learn CSS layout, you might as well focus on memorizing the properties related to the CSS box model. At this time, you can draw a diagram, as shown in the figure below.

CSS attribute names are relatively regular, and the names are closely connected with their meanings. It is a good way to memorize attribute names based on their meanings.

The CSS box model means that any element in the web page will be displayed as a rectangular shape, which can include margins, borders, padding, width and height, etc. In English, they are: margin (outer margin, or border), border (border), padding (inner margin, or padding), height (height) and width (width), and the box also has background (background) .

The margin can include a total of 4 branch attributes: margin-top, margin-right, margin-bottom, and margin-left, which represent the top margin, right margin, bottom margin, and left margin respectively. Side margin.

In the same way, padding can also include padding-top, padding-right, padding-bottom, padding-left and padding attributes.

Borders can be divided into border type, thickness and color, so they can contain border-width, border-color and border-style properties. These properties can contain many properties in 4 directions, for example, border-width Properties are further divided into border-top-width, border-right-width, border-bottom-width, border-left-width and border-width properties.

Recommended learning: "web front-end"

The above is the detailed content of One picture helps you fully master all CSS properties!. For more information, please follow other related articles on the PHP Chinese website!