An explanation of CSS3 layout and typesetting

Premise

Before introducing layout and typesetting, we first introduce a size unit, which is newly introduced in CSS3 , it is rem, all references to rem The defined font sizes are relative to the size of the root element text. Compared to using em, this method frees us from the tedious process of manually calculating the font size.

Effect 1

## demo01.png

As long as we use the new attributes provided by CSS3, we can easily create such an effect. Below we will explain some of the main attributes used.

• column-width: used to specify the width of the column. Once a value is specified, the browser will dynamically decide to divide the content according to the width of the current browser. for how many columns.

• column-rule: This attribute is an abbreviation. In fact, it contains three different attributes, namely column-rule-width, column-rule-style, column-rule-color, anyway, what they achieve is to add a dividing line between columns, which is the same as the setting of the border attribute.

• column-gap: used to set the gap attribute of the column. This value is evenly distributed on both sides of the column.

If we want to achieve column separation, we can use column-width or column-count attribute, but we usually don't do this because it means that the content must be divided into three columns regardless of the width of the current browser, which is a very unfriendly design.

After knowing the above properties, I believe you can quickly realize the effect in our diagram. We will not paste the source code here, you can click here to download . What needs to be mentioned here is that we have quoted some good-looking fonts on the page. If you also want to use them, you just need to paste the following line of code under your tag.

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

Effect 2

## demo02.png

We use Flexbox to achieve this effect. The following will explain the several properties used.

• Display: If you want to use Flexbox layout, then we must first set the value of this property to flex.

• Flex-flow: This property is actually the abbreviation of two properties, one of which is flex-direction, which is used to set the direction of the main axis. If it is set to row Then the horizontal direction is the main axis, and if it is column, the vertical direction is the main axis. Another attribute is flex-wrap, Used to set element wrapping. When the element exceeds the width of the parent element, it will automatically wrap. This can achieve the effect of adapting to the screen.

• 　flex: This property is usually set when display is set to flex Set in the child element, there are three parameters. I will not explain them in detail here, because I can't organize the language to explain it. You can check the usage of this attribute on Baidu.

The above is the detailed content of An explanation of CSS3 layout and typesetting. For more information, please follow other related articles on the PHP Chinese website!