10 days proficient in CSS3 (10)

Multi-Column Layout--columns

In order to make it easy to implement a multi-column layout like newspaper and magazine in a Web page, the CSS3 added a multi-column Layout module (CSS Multi. It is mainly used in the multi-column layout of text, this layout has been used in newspapers and magazines for decades, but it is quite difficult to achieve this effect on Web pages, fortunately, CSS3 's multi-column layout can be easily implemented. Next, let's learn more about multi-column layout-related knowledge.

Grammar:

columns:<column-width> | | <column-count>

Multi-Column Layout columns property parameters are mainly two attribute parameters: column width and number of columns.

Parameters	Parameter description
<column-width>	Used primarily to define the width of each column in multiple columns
<column-count>	Used primarily to define the number of columns in multiple columns

Example: To display the 2 column display, each column width is 200px, the code is:

columns:200px 2;

Most mainstream browsers have supported it so far:

Multi-Column Layout--column-width

The use of Column-width is the same as the Width property in CSS, except that the Column-width property can be used alone or in conjunction with other properties in a multicolumn property when defining the column width of the element. Its basic syntax is as follows;

Column-width:auto | <length>

Value Description

Property value	Description
Auto	If Column-width sets the value to auto or does not have an explicit setting, the column widths of the elements will be determined by other properties, such as the previous example being determined by the number of columns Column-count.
<length>	Use a fixed value to set the width of the element column, which is mainly composed of numeric and length units, although its value can only be positive and cannot be negative.

Multi-Column Layout--column-count

The Column-count property is primarily used to specify the desired number of columns and the maximum number of columns allowed for an element. Its syntax rules:

Column-count:auto | <integer>

Value Description:

Property value	Property Value Description
Auto	This value is the default value of Column-count, which indicates that the element has only one column, which relies primarily on the browser to calculate the automatic settings.
<integer>	This value is a positive integer value that is used primarily to define the number of columns of an element, which is an integer greater than 0, and the negative value is invalid.

For example: Divide the column into four columns, and the code is as follows:

Column-count:4;

Column Spacing Column-gap

The column-gap is used primarily to set the spacing between columns, with the following syntax rules:

column-gap: normal || <length>

Value Description

Property value	Property Value Description
Normal	The default value is 1em (if your font size is PX, its default value is your Font-size value).
<length>	This value is used to set the distance between the column and columns, which can use any integer value of the Px,em unit, but cannot be a negative value.

For example, the content is divided into three columns, and the spacing between columns is 2EM, and the implementation code is:

Column-count:3;column-gap:2em;

List Border Column-rule

Column-rule is primarily used to define the border width, border style, and border color between columns. Simply put, it's a bit like the usual border property. However, Column-rule does not occupy any spatial position, and changing its width between columns and columns does not change the position of any columns.

Syntax rules:

Column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

Value Description:

Property value	Property Value Description
Column-rule-width	Similar to the Border-width property, which is used primarily to define the width of the column border, the default value is "Medium", and the Column-rule-width property accepts any floating-point number but does not receive a negative value. But also like the Border-width property, you can use keywords: medium, thick, and thin.
Column-rule-style	Similar to the Border-style property, which is used primarily to define the column border style, with the default value "None". The Column-rule-style property value is the same as the Border-style genus, including none, hidden, dotted, dashed, solid, double, groove, Ridge, inset, outset.
Column-rule-color	Similar to the Border-color property, which is used primarily to define the column border color, whose default value is the value of the foreground color, which is equivalent to Border-color. The Column-rule-color accepts all colors. If you don't want the color to appear, you can also set it to transparent (transparent color)

For example: In order to effectively distinguish between column columns, you can set a column border, the code is:

column-rule:2px dotted green;

Cross-column Settings Column-span

Column-span is used primarily to define how many sub-elements in a column element can span columns. Column-width, Column-count and other attributes allow one element to be divided into multiple columns, regardless of how the elements are emitted in order, they are left-to-right content, but sometimes we need a piece of content in the base or a title not to be broken down, that is, across all the columns, Column-span can be easily implemented at this point, and the syntax for this property is as follows.

Column-span:none | All

Value Description

Property value	Property Value Description
None	This value is the default value of Column-span, which means that no columns are spanned.
All	This value is exactly the opposite of the none value, which means that the element spans all columns and is positioned above the z axis of the column.

For example: The first heading spans all columns, code:

Column-span:all;

The effect is as follows:

Box model

CSS has a basic design pattern called box model, the box model defines how the elements in the Web page are parsed. Each element in the CSS is a box model, including HTML and body tag elements. In the box model mainly includes the width, height, border, background, padding and margin these attributes, and their hierarchical relationship can affect each other, to see a box model 3D display:

(Click to enlarge)

You can see that the Padding property and the Content property Cascade Background-image Properties, Cascade Background-color Properties, which are present, and they form the z-axis (vertical screen coordinates) of the multiple cascade relationships. But the border attribute and the margin attribute, the padding attribute should be the level of the relationship between the plane, and does not constitute the z-axis cascade relationship.

Box-sizing:

In CSS, the box model is divided into two kinds, the first is the standard model of the world, and the other is the traditional model of IE, the same is the model of the dimensions of the elements, specifically not the width of the element, height, padding and border, and the actual size of the elements of the calculation relationship, They differ in that the computational methods of the two are inconsistent, in principle the box model is very finely divided, and what is seen here are mainly the outer box model and the inner box model, as shown in the following formula:

1. Standard box model

Outer box dimension calculation (element space size) element space height = content height + padding + border + outer element space Width = content width + padding + border + outer margin inner box dimension calculation (element size) Element height = content Height + padding + border (height is content height) Element width = Content width + padding + border (width is content width)

2.IE Traditional lower box model (below IE6, not including IE6 version or "Quirksmode ie5.5+")

Outer box dimension calculation (element space size) element space height = content height + outer distance (height contains element content width, border, padding) the width of the elements = content width + outer margin (width contains the element content width, border, Inner box size calculation (element size) Element height = content Height (height contains element content width, border, padding) element width = content width (width contains element content widths, borders, padding)

The new box-sizing attribute is added in CSS3 to define the dimensional resolution of the box model in advance, with the following grammatical rules:

box-sizing: content-box | border-box | inherit

Value Description

Property value	Property Value Description
Content-box	The default value, which allows the element to maintain the standard box model of the Width/height, that is, the width and height of the element (+/-) equals the element border width (border) plus the element padding (padding) plus the element content width or height (content width/height), Element width/height = border + padding + content Width/height
Border-box	Redefine the pattern of box models in CSS2.1, allowing elements to maintain the traditional box model of IE (IE6 the following versions and ie6-7 quirks), meaning that the width or height of the element is equal to the width or height of the element content. From the box model above, we know that the content width or height contains the element's border, padding, width or height of the content (the width or height of the contents = width or height of the box-border-padding).
Inherit	To enable an element to inherit the box model pattern of a parent element

One of the most critical is the difference between Content-box and Border-box in box-sizing, the difference between them can be demonstrated by the different analysis of the box model:

(Click to enlarge)

Telescopic layout (i)

CSS3 introduces a new layout pattern-theflexbox layout , the retractable layout box model (flexible box), which provides a more efficient way to formulate, adjust, and distribute the layout of a project in a container, Even if their size is unknown or dynamic, this is referred to as Flex.

Flexbox layouts are often used to design more complex pages, which can be easily implemented to maintain the relative position and size of elements while changing the size of the screen and browser window, while reducing the definition of the location of elements dependent on the floating layout and the size of the reset element.

Flexbox layouts in defining scaling items large hours the telescopic container will reserve some free space, allowing you to adjust the relative size and position of the scaling items. For example, you can make sure that the extra space in the telescopic container is evenly distributed across multiple scaling items, and of course, if your telescopic container does not have enough space to place the scaling items, the browser will reduce the size of the scaling item to a certain scale so that it does not overflow the scaling container. In general, the Flexbox layout function mainly has the following points:

First, the Screen and browser window size changes can also be flexibly adjusted layout;

Second, you can specify the scaling items to be proportionally allocated along the spindle or side axis (additional space in the telescopic container) to adjust the size of the scaling project;

Thirdly, you can specify that the telescopic project will allocate additional space of the telescopic container along the spindle or side axis, before, after, or between the telescopic projects;

IV, you can specify how the extra space perpendicular to the element's layout axis is distributed around the element;

Five, you can control the layout of elements on the page direction;

Six, you can reorder the elements on the screen in a way that differs from the sort specified by the Document Object Model (DOM). This means that you can rearrange the order of the items in the browser rendering without following the document flow order.

There are many versions of the Flexbox specification, and browsers have different support degrees for this syntax, and the following is an example of the latest syntax version:

1. Create a Flex container

The first step in any Flexbox layout is to create a flex container. Set the Display property value to flex for this element. In Safari, you still need to add the prefix-webkit,

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex Project Display

Flex projects are child elements of a flex container. They are positioned along the main and transverse axes. The default is to arrange a row along the horizontal axis. You can change the spindle direction by flex-direction to column, whose default value is row.

3.Flex Project Column Display

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex Project Move to top

How to move a flex project to the top depends on the direction of the spindle. If it is perpendicular to the direction through the align-items setting, if it is in the horizontal direction through the justify-content setting.

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

Telescopic Layout (ii)

There are many versions of the Flexbox specification, and browsers have different support degrees for this syntax, and the following is an example of the latest syntax version:

5.Flex item moves to the left

Flex projects that move to the left or right also depend on the direction of the spindle. If Flex-direction is set to row, the Justify-content control direction is set, and if set to column, the Align-items control direction is set.

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

6.Flex project move to the right

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

7. Horizontal Vertical Center

It is negligible to make horizontal vertical centering in the Flexbox container. Set justify-content or Align-items as center. In addition, the flex-direction is set to row or column according to the direction of the spindle.

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

Automatic scaling for 8.Flex projects

You can define a flex project and how to automate scaling relative to the flex container. You need to set flex properties for each flex project to set the values that need to be scaled.

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }

10 days proficient in CSS3 (10)