Chapter 2 CSS3 multi-Column Layout-original of water

Chapter 2 CSS3 multi-Column Layout-original learning points of water:

1. Early multi-column Problems

2. attributes and versions

3. Attribute explanation

Lecturer: Li Yanhui

This chapter mainly discusses the multi-column layout provided by CSS3 in HTML5. Through multi-column layout, we can easily create a fluid multi-column layout.

I. Early multi-column Problems

We sometimes want to deploy multiple columns like newspapers and magazines (at least two columns, generally three or more columns), but the layout methods provided by CSS in the Early Days have great restrictions. If it is a solid layout, you can use floating or positioning layout. But for multiple columns of a fluid, such as three or more columns, the floating layout can only be used, and it has great restrictions. Because it is block-based, dynamic content cannot be scaled and adaptive, And it is basically incapable.

// The content of the fifth segment is divided into three columns

    
I copied a large number of texts in the content of the first paragraph...
    
I copied a large number of texts in Part 2...
    
I copied a large number of texts in the third section...
    
I copied a large number of texts in the fourth section...
    
I copied a large number of texts in part of the fifth paragraph...

// The content of the five sections with the title, which is divided into three columns

    
Title of the first paragraph
    
I copied a large number of texts in the content of the first paragraph...
    
Section 2 Title
    
I copied a large number of texts in Part 2...
    
Title of the third paragraph
    
I copied a large number of texts in the third section...
    
Title of Section 4
    
I copied a large number of texts in the fourth section...
    
Section 5 Title
    
I copied a large number of texts in part of the fifth paragraph...

There are two groups of content at home. If you want to use floating and positioning to implement three columns of fluid, it is basically impossible. In practice, the requirements may change to four or five columns? Therefore, CSS3 provides columns for multi-column layout to implement this dynamic transformation function.

Ii. attributes and versions

CSS3 provides seven attribute sets, including columns multi-column layout attributes, as follows:

Attribute	Description
Columns	Integrates two attributes: column-width and column-count.
Column-width	Defines the width of each column
Column-count	Define the number of sharded Columns
Column-gap	Define column spacing
Column-rule	Define column border
Column-span	Defines the cross-column effect of neutron elements in multiple column la s, which is not supported by firefox
Column-fill	Control the high effect of each column, not supported by mainstream browsers

Since the column attribute set has not yet been included in the standard, most browsers must use the vendor prefix to access it. Fortunately, mainstream browsers can support it well. The following describes the support and prefix of mainstream browsers.

	Opera	Firefox	Chrome	Safari	IE
Prefix required	11.5 ~ 29	2 ~ 40	4 ~ 45	3.1 ~ 8	None
No prefix is supported.	None	None	None	None	10.0 +

We can see from the above table that prefixes must be used for all the effects of the latest browsers.

// Complete Form

-webkit-columns: 150px 4;-moz-columns: 150px 4;columns: border-box;

Iii. Attribute explanation

To facilitate the demonstration, we tested the Firefox browser and used only the-moz-prefix for demonstration.

1. columns

Columns is a composite attribute that contains the columns-width and columns-count abbreviations. Specifies the number of columns and the width of the column. // It is divided into four columns and the width of each column is adaptive.

-moz-columns: auto 4;

2. column-width

The column-width attribute is used to set the width of each column.

// Set the column width

-moz-column-width: 200px;

200px is set here, which indicates the minimum width. When the browser scales to less than 200 hours, it will be displayed in 1 column. If it is auto, it will keep four columns.

Attribute	Description
Auto	Default Value: adaptive.
Length Value	Set the column width.

3. column-count

Column-count attribute, used to set the number of columns.

// Set the number of Columns

-moz-column-count: 4;

Attribute Value	Description
Auto	The default value is 1 column.
Value	Set the number of columns.

4. column-gap

Column-gap attribute, used to set the column spacing

// Set the column spacing

-moz-column-gap: 100px; 

Attribute Value	Description
Auto	The default value is 1 column.
Value	Set the number of columns.

5. column-rule

Column-rule attribute, set the split line in the middle of each column // set the column edge

-moz-column-rule: 2px dashed gray; 

Attribute	Description
Column-rule	<宽度> <样式> <颜色> Border.
Column-rule-width	Set the Border Width separately.
Column-rule-style	Set the border style separately.
Column-rule-color	Set the border color separately.

The column edge does not affect the layout. It automatically adjusts whether to display the column Edge Based on the layout scaling. If we scale the page to show only one column, it disappears automatically.

6. column-span

Specifies the column-span attribute and sets the cross-column title.

// Cross-column headers. Because Firefox is not yet supported, webkit is used.

-webkit-column-span: all; 

Attribute	Description
None	The default value does not span columns.
All	Indicates cross-column.