About CSS3 layout and typesetting

Prerequisites

Before we introduce the layout, we first introduce a unit of dimension, which is the new one in CSS3, which is REM, and all the font sizes that reference the REM definition are relative to the size of the root element text, which frees us from the tedious process of manually calculating the font size relative to the use of EM.

Effect One

Demo01.png

As long as we take advantage of the new attributes provided by CSS3, we can easily make such an effect. The following are some of the main attributes that we use to explain.

• Column-width: Used to specify the width of the column, once a value is specified, the browser dynamically decides how many columns to divide the content according to the width of the current browser.

• Column-rule: This attribute is a shorthand, in fact it contains three different properties, namely Column-rule-width, Column-rule-style, Column-rule-color, What is accomplished is to add a split line between the columns, and the settings for the border property are the same.

• Column-gap: Used to set the Gap property of the column, which is divided by the sides of the column.

If you want to implement a column, we can take advantage of column-width, or we can use the Column-count property, but we don't usually do this because it means you have to divide the content into three columns, regardless of the width of the current browser, which is a very unfriendly design.

After knowing the above attributes, I believe you can quickly put the effect of our image in the implementation, here we do not paste the source code, you can click this download. Here we need to take a look, we have some good-looking fonts in the page, if you want to use it, you need to paste the following line of code under your tag.

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

Effect Two

Demo02.png

This effect we make use of Flexbox implementation, the following for the use of several properties to explain.

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

• Flex-flow: This property is actually an abbreviation for two properties, one of which is The flex-direction is used to set the direction of the spindle, if set to row is a horizontal direction for the spindle, if the column is vertically oriented to the spindle. Another property is Flex-wrap, which sets the element wrapping and wraps the element when it exceeds the width of the parent element, which allows for an adaptive screen effect.

• Flex: This property is typically set in the set display to flex child elements, There are three parameters, which are not explained in detail here, because I am not very able to organize the language to explain it, Baidu can look at the use of this property.