CSS3 (iii) layout style

One, multiple-column layout--columns: Most mainstream browsers have so far supported it:
In order to be able to easily implement the layout of multiple columns of newspapers and magazines in a Web page, the CSS3 added a multiple-column layout module (CSS Multi column Layout module). It is mainly used in the multiple-column layout of text
Grammar:

columns:<column-width> | | <column-count>//Column width and number of columns
columns:200px 2;            2 column, width of 200px per column

Note the compatibility of the browser in the application, try to write all the following code:

-webkit-columns:150px 3;
-moz-columns:150px 3;
-o-columns:150px 3;
-ms-columns:150px 3;
columns:150px 3;

You can also write the following two types on demand:
1, the use of column-width and the width of CSS in the same, but the difference is that the Column-width attribute when defining the width of the element column, can be used alone, but also with the other properties in the multiple-column properties. The basic syntax is shown below;

Column-width:auto | <length>
//auto: Multiple columns of column widths will be determined by other attributes, such as the number of columns Column-count.
-webkit-column-width:200px//At this time width is determined, the number of columns is unequal
-moz-column-width:200px;
-o-column-width:200px;
-ms-column-width:200px;
column-width:200px;

2 . The Column-count property is primarily used to specify the number of columns you want for the element

Column-count:auto | <integer>
//auto: This value is the default value of Column-count, which means that the element has only one column, which relies primarily on the browser to compute automatic settings. <integer> positive integer value, which is mainly used to define the number of-webkit-column-count:2 of the elements
;
-moz-column-count:2;
-o-column-count:2;
-ms-column-count:2;
Column-count:2;

You can also set column spacing:
3.column-gap column spacing is primarily used to set the spacing between columns, with the following syntax rules:

Column-gap:normal | | <length>
//normal: Default value of 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 column and column, it can use PX, Any integer value of the EM unit, but not a negative value.
Column-count:3;
Column-gap:2em;

  -webkit-column-count:3;
  -moz-column-count:3;
  -o-column-count:3;
  -ms-column-count:3;
  Column-count:3;
  -webkit-column-gap:3em;
  -moz-column-gap:3em;
  -o-column-gap:3em;
  -ms-column-gap:3em;
  Column-gap:3em;

4.column-rule List Border
Column-rule is primarily used to define border widths, border styles, and border colors between columns and columns. To put it simply, it's a bit like the common border attribute.
However, note that Column-rule does not occupy any space, and changing its width between columns does not change the position of any columns.
Syntax rules:

Column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
// For example: In order to effectively distinguish between columns of the relationship, you can set a column border, the code is:
column-rule:2px dotted green;

A complete small example:
Three column layout, column spacing 2em, set a 3px gray entity border line for column columns.

. columns {
  padding:5px;
  border:1px solid Green;
  width:900px;
  margin:20px Auto;

  -webkit-column-count:3;
  -moz-column-count:3;
  -o-column-count:3;
  -ms-column-count:3;
  Column-count:3;

  -webkit-column-gap:2em;
  -moz-column-gap:2em;
  -o-column-gap:2em;
  -ms-column-gap:2em;
  Column-gap:2em;

  -webkit-column-rule:3px solid gray;
  -moz-column-rule:3px solid gray;
  -o-column-rule:3px solid gray;
  -ms-column-rule:3px solid gray;
  column-rule:3px solid gray;

5.column-span settings across columns
Column-span is primarily used to define how many of the child elements in a single column element can span columns. Attributes such as Column-width and Column-count allow an element to be divided into columns, regardless of how the elements are emitted in the order they are placed from left to right, but sometimes we need a section of the base or a title not to be broken, that is, across all columns, Column-span can be easily implemented at this time, and the syntax for this property is as follows.

Column-span:none |
All//none: This value is the default value of Column-span, which means that no columns are crossed. All this value is just the opposite of the none value, which means that the element spans all columns and is positioned above the z axis of the column.

Column-span:all;  The effect is as follows

second, box model
In CSS, there is an underlying design pattern called the box model, which defines how elements in a Web page are parsed. Each element in a CSS is a box model, including HTML and body tag elements. In the box model, it mainly includes the properties of width, height, border, background, padding and margin.

However, the border property and the margin property, the padding attribute should be the level of the relationship between the plane, and does not constitute a cascade relationship of the z-axis.

Standard box model:
outer box: element space height = content height + Inner distance + border + outer
     element Space width = Content width + interior + border + outer
box:
     Element height = content Height + inner margin + border (height is content height)
     element width = content Width + inner margin + border (width is content width)
ie traditional down box model (IE6 below, does not contain IE6 version or " Quirksmode under the ie5.5+ "):
outer box: element space height = content height + outer margin (height contains element content width, border, inner distance) elements width
     between width = content width + outer margin (width contains element content widths,
inside Box: element height = content Height (height contains element content width, border, padding) element
     width = content width (width contains element content width, border, padding)

In CSS2, the inner margin (padding) and border (border) of elements (such as DIV) will support the element itself. Want a 100*100px div, all have to calculate beforehand, for example, content 80px + inner margin 15px + border 5px = 100px

In CSS3, the new Box-sizing property, if the element is set to Box-sizing:border-box, the inner margin (padding) and border (border) of the element will not hold the element itself larger. For example, set Div to 100*100px, then regardless of the div content, inner margin, border width of how the change, the size of Div is always 100*100px
The syntax rules are as follows:

Box-sizing:content-box | Border-box | Inherit

Content-box: The default value that enables elements to maintain the standard box model of the worldwide consortium, meaning that the width and height of the element (width/height) equals the element border width (border) plus the element's inner margin (padding) plus the element's content width or height Width/height)
Border-box: Let elements maintain IE's traditional box model (IE6 the following version and Ie6-7 weird mode), which means that the width or height of the element is equal to the width or height of the element's content. From the above box model, it is known that the content width or height contains the elements of the border, padding, the width or height of the content
Inherit: Box model pattern that causes elements to inherit from the parent element

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

Also be aware of browser compatibility:

  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -o-box-sizing:content-box;
  -ms-box-sizing:content-box;
  Box-sizing:content-box;

third, telescopic layout
CSS3 introduces a new layout pattern--flexbox layout, the Telescopic layout box model (flexible box), which provides a more efficient way to develop, adjust, and distribute a project layout in a container, even if their size is unknown or dynamic, and this is referred to as Flex.

Flexbox layouts are often used to design more complex pages, which make it easy to maintain the relative position and size of elements while changing the size of the screen and browser windows, while reducing the definition of where the floating layout implements the element and the size of the reset element.

The

Flexbox layout in the definition of telescopic project large-hour telescopic container will reserve some free space so that you can adjust the relative size and position of the telescopic project. For example, you can make sure that the excess space in the telescopic container distributes more than one telescopic project evenly, and of course, if your telescopic container does not have enough space to place the telescopic project, the browser will reduce the size of the telescopic item to a certain scale so that it does not overflow the telescopic container.