Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to solve the CSS value replication problem, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this CSS value replication problem. Let's take a look.

How to use value replication.

Occasionally, we enter some values over and over again:

P {margin: 0.5em 1em 0.5em 1em;}

After the value is copied, you probably type this pair of numbers without having to repeat them. The above rules are equivalent to the following delineation:

P {margin: 0.5em 1em;}

These two values can cover the next four values. How is this done? CSS defines rules that allow you to specify less than 4 values for the outer margin. Stipulate the following:

If the value of the left margin is short, the value of the right margin is used.

If the value of the bottom margin is missing, the value of the top margin is used.

If the value of the right margin is missing, the value of the top margin is used.

The following figure provides a more intuitive way to experience this:

In other words, if three values are specified for the outer margin, the fourth value (that is, the left margin) is copied from the second value (the right margin). If two values are given, the fourth value is copied from the second value, and the third value (bottom margin) is copied from the first value (top margin). At the end of a situation, if only one value is given, then the other three outer margins are copied from this value (upper outer margin).

To operate this simple mechanism, you can only specify important values, instead of applying all four values, such as:

H2 {margin: 0.25em 1em 0.5em;} / * equivalent to 0.25em 1em 0.5em 1em * / h3 {margin: 0.5em 1em;} / * equivalent to 0.5em 1em 0.5em 1em * / p {margin: 1px;} / * equivalent to 1px 1px 1px 1px * /

There is a drawback in this kind of doorway, and you are bound to encounter this problem at the end. If you wish to set the upper outer margin and left outer margin of the p element to 20 pixels, and the lower outer margin and right outer margin to 30 pixels. In such an environment, it is necessary to write:

P {margin: 20px 30px 30px 20px;}

This trick loses what you want. Sadly, in this environment, there is no way to reduce the number of values required.

Let's look at another example. If you expect all the outer margins except the left margin auto (the left margin is 20px):

P {margin: auto auto auto 20px;}

In the same way, this technique loses the grades you want. The title is that typing these auto is a bit troublesome. If you just want to discipline the outer margin on one side of the element, use the one-sided outer margin attribute.

This is the end of the article on "how to solve the CSS value replication problem". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to solve the CSS value replication problem". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.