CSS3 Knowledge Point Finishing (iv)----layout style and other

Includes CSS3 multi-column layout styles, Flexbox-flex layouts, box models, and more. This paper focuses on the various property usages of the Flexbox telescopic layout.

one, multi-column layout

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.

1) columns

Grammar:

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

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

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

columns:200px 2;

Most mainstream browsers support it, but you need to add private prefixes for each browser, such as:-moz,-mebkit,-ms,-O, and so on.

2) 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>

1. 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.

2. Use a fixed value of length 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.

3) 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>

The 1.auto 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.

A value of 2.integer 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.

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>

1.normal is the default value, and the default value is 1em (if the font size is PX, it defaults to font-size value)

The 2.length 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.

5) 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>

1.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.

2.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.

3.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)

6) Cross-column setup Column-span

Column-span is used primarily to define how many sub-elements in a column element can span columns.

Attributes such as Column-width, Column-count, and so on, allow one element to be divided into multiple columns, regardless of the order in which the elements are emitted, they are left-to-right, but sometimes we need a piece of content or a title that is not broken down, that is, across all columns, Column-span is now easy to implement, and the syntax for this property is as follows:

Column-span:none | All

The 1.none value is the default value of Column-span, which means that no columns are spanned.

The 2.all 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.

second, 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, the properties of width, height, border, background, padding, and margin are mainly included, and the hierarchical relationships between them can affect each other.

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): Elements 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 + borders (width is content width)

2.IE Traditional Lower Box model

Outer box dimension calculation (element space size): Elements Space height = content height + outer (height contains element content width, border, padding) element wide width = content width + outer margin (width contains element content width, border, Inner box size calculation (element size): Elements 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:

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:

For example, explain box-sizing:

1. In CSS2, the inner margin (padding) and border (border) of an element (such as a DIV) will make the element itself larger.

Want a 100*100px div, need to calculate beforehand, for example, content 80px + inner margin 15px + border 5px = 100px

2. CSS3, add the Box-sizing property, if the setting element is Box-sizing:border-box, then the element's inner margin (padding) and the border (border) will no longer hold the element itself large.

For example, if the div is set to 100*100px, the size of the div will always be 100*100px, regardless of the content in the Div, the padding, and the width of the border.

three, telescopic layout

CSS3 introduces a new layout pattern--flexbox layout, the Telescopic layout box model (flexible box), to provide a more efficient way to formulate, adjust, and distribute the layout of items in a container, even if their size is unknown or dynamic.

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.

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models, with specific syntax:

1)

Any container can be specified as a flex layout:

. Box {  display: flex;}

Inline elements can also use the Flex layout:

. Box {  display: inline-flex;}

The WebKit kernel browser must be -webkit prefixed with:

. Box {  display: -webkit-flex/**/  display: Flex ;}

Note: After you set the flex layout, the, and properties of the child elements float clear vertical-align are invalidated.

2) Basic Concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start , the end position is called main end ; the start position of the intersection axis is called cross start , the end position is called cross end .

The project is arranged by default along the spindle. The main spindle space occupied by a single item is called the main size occupied cross-axis space cross size .

3) Container Properties

The following 6 properties can be set on a container:

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content

1. Flex-direction Properties

flex-directionProperties determine the direction of the spindle (that is, the direction in which the item is arranged)

{  flex-direction: row | row-reverse | column | Column-reverse;}

4 values are:

• row(default): The spindle is in the horizontal direction, starting at the left.
• row-reverse: The spindle is in the horizontal direction, starting at the right end.
• column: The spindle is in the vertical direction and the starting point is in the upper edge.
• column-reverse: The spindle is in the vertical direction and the starting point is in the lower edge.

2. Flex-wrap Properties

By default, items are lined up in a line (also known as the "axis"). flex-wrapproperty Definition, how to wrap a line if one of the axes does not fit.

. Box {  flex-wrap: nowrap | wrap | wrap-reverse;}

3 values are:

• nowrap(默认值)：不换行
• Wrap: Line wrap, first row above
• Wrap-reverse: Line break, the first line is below

3. Flex-flow Properties

flex-flowProperties are flex-direction flex-wrap shorthand for properties and properties, and the default value isrow nowrap

{  flex-flow: <flex-direction> | | <flex-wrap>;}

4.justify-content Property

justify-contentproperty defines how the item is aligned on the spindle.

{  justify-content: flex-start | flex-end | center | space-between | Space-around;}

Can take 5 values, the specific alignment with the direction of the axis. The following assumes that the spindle is from left to right.

• flex-start(default): Align Left
• flex-end: Align Right
• center: Center
• space-between: Justified, the interval between items is equal.
• space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

5.align-items Property

align-itemsproperty defines how the item is aligned on the intersection axis.

{  align-items: flex-start | flex-end | center | baseline | stretch;}

A value of 5 may be taken. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom.

• flex-start: The starting point of the intersection axis is aligned.
• flex-end: The end alignment of the intersection axis.
• center: The midpoint of the intersection axis is aligned.
• baseline: The baseline alignment of the first line of text for the item.
• stretch(default): If the item is not set to height or set to auto, the height of the entire container will be filled.

6.align-content Property

align-contentProperties define the alignment of multiple axes. If the item has only one axis, this property does not work.

{  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

This property may take 6 values:

• flex-start: Aligns with the start point of the intersection axis.
• flex-end: Aligns with the end point of the intersection axis.
• center: Aligns with the midpoint of the intersection axis.
• space-between: aligned with the intersection axis, evenly spaced between axes.
• space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
• stretch(default): The axis fills the entire cross axis.

4) Properties of the project

The following 6 properties can be set on a project:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order Properties

orderproperty defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.

{  order: <integer>;}

2.flex-grow Property

flex-growproperty defines the magnification of the item, by default, that is 0 , if there is space left, do not zoom in.

{  flex-grow: <number>/**}

If all items have flex-grow properties of 1, they will divide the remaining space (if any). If an item has a flex-grow property of 2 and the other item is 1, the former occupies more than the remaining space.

3.flex-shrink Property

flex-shrinkProperty defines the scale-out for the project, which defaults to 1, that is, if there is not enough space, the item shrinks.

{  flex-shrink: <number>/**}

If all items have a flex-shrink property of 1, they will be scaled down when there is not enough space. If an item has a flex-shrink property of 0 and the other items are 1, the former does not shrink when there is not enough space.

A negative value is not valid for this property.

4.flex-basis Property

flex-basisproperty defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is the auto original size of the project.

{  flex-basis: <length> | auto/**/}

It can be set to width height the same value as a property (such as 350px), then the item will occupy a fixed space.

5.flex Properties

flexThe property is flex-grow , flex-shrink and shorthand for, flex-basis the default value 0 1 auto . The latter two properties are optional.

{  flex: None | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]}

This property has two shortcut values: auto ( 1 1 auto ) and None ( 0 0 auto ).

It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.

6.align-self Property

align-selfproperty allows a single item to have a different alignment than other items, overriding the align-items property. The default value auto , which represents the property that inherits the parent element align-items , is equivalent to if there is no parent element stretch .

{  align-self: Auto | flex-start | flex-end | center | baseline | stretch;}

This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

CSS3 Knowledge Point Finishing (iv)----layout style and other