Shulou(Shulou.com)06/03 Report--

This article introduces to you what are the methods of the new layout in CSS3, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. Common page layouts

When getting the design draft, as a front-end staff, the first thing we should do is to roughly divide the area for the design drawing, and then choose the most reasonable and well-structured layout. Let me first list several common page layouts based on some typical website cases.

1. T-shaped layout

This is our more common layout, the top of the page generally places horizontal website signs or Banner ads, the lower left is the navigation bar menu, the lower right is used to place the main content such as the body of the web page.

The home page of Segmentfault is a T-shaped layout. The bottom of the page was not intercepted because the page was too long.

2. The layout of Chinese characters

At the top of the Chinese character layout is the title of the website and banner banners, followed by the main internal mail of the website, with some small pieces of content separated around, and the middle question is the main part, listed together with the left and right to the end. at the bottom is some basic information of the website, contact information, copyright notice, and so on.

The picture of the case comes from a written question in the first paragraph of Tencent 11 years. Interested students can take a look at it. 2011 front-end interview draft of Tencent

3. POP layout

POP layout refers to the page layout like a promotional poster, with a beautiful picture as the design center of the page. Often used in fashion sites. The advantage is obvious: beautiful and attractive. The disadvantage is that it is slow.

The home page of the National people's Congress is similar to this layout.

4. Left and right layout type

As the name implies, the main body of the web page is divided into left and right parts, mostly for the background management system page. Generally, the left and right layout type of the page needs to be equal to two columns.

Such as:

5. Upper and lower layout type

See Apple's official website, similar to the full-screen display of the page is the top and bottom layout.

Second, how to achieve-- a common layout method

That's all we have to say about the types of layouts. Let's summarize how to implement the above layouts. Here are two layout methods that we should all be familiar with. Holy Grail layout and double flying swallow layout. In fact, these two methods are generally used in the layout of Chinese characters. It is for the layout of three rows and three columns. The corresponding transformation can also be used in the T-shaped layout. The problem of priority loading of the main part can be well solved by using these two methods.

1. The layout of the Grail

Basic layout:

XML/HTML Code copies content to the clipboard

Let's focus on the code in the main section.

CSS Code copies content to the clipboard

# main {

Overflow: hidden; / * fix the problem of height collapse caused by the floating of child elements * /

Zoom: 1 in the lower version of ie: trigger the haslayout attribute to fix the high collapse caused by the floating of child elements * /

/ * the left and right sides of the main body are reserved for a blank space of the size of the left and right sidebars * /

Padding: 0 300px 0 220px

}

.m _ content, .m _ leftside, .m _ rightside {

Float: left

/ * the purpose is to pull back the left and right sidebar * /

Position: relative

}

.m _ content {

Width: 100%

}

.m _ leftside {

Width: 220px

/ * since m_content takes up 100% of the space, you need to pull the left column back with a negative margin value * /

Margin-left:-100%

/ * fill in the left blank area reserved by the main body * /

Left:-220px

}

.m _ rightside {

Width: 300px

/ * pull the right column back to its own pixel unit with a negative margin value * /

Margin-left:-300px

/ * fill in the right blanking area reserved in the main body * /

Left: 300px

}

This is the main body.

This is the left sidebar.

This is the right sidebar.

The above is the Holy Grail layout method, the basic idea is to use floating plus positioning method, the disadvantage is that the code is more complex, can not simulate three columns and other high effects.

2. The layout of Shuangfei Yan

The effect of the layout is the same as that of the Holy Grail, and the code is different. The code for the layout of Shuangfei Swallow is simpler, but an extra div is added for layout.

Basic layout part of the code is the same.

Main section:

CSS Code copies content to the clipboard

# main {overflow: hidden;zoom: 1;} / * No need to add padding here * /

.m _ content, .m _ leftside, .m _ rightside {float: left;}

M _ content {width: 100%;}

/ * use the left and right margins to reserve the position of the left and right sidebar * /

.m _ c_wrap {margin-left: 220px

.m _ leftside {width: 220pxleft:-100%;}

.m _ rightside {width: 300pxleft:-300px;}

This is the main body.

This is the left sidebar.

This is the right sidebar.

After understanding the above two layout methods, many layouts can be written easily. But there is still some deficiency in dealing with multi-column and other high layout. So now let's talk about the method of multi-column and equal height layout.

3. Multi-column contour layout

Here a detailed summary of the eight methods of contour layout Click, I will talk about the actual project more commonly used, or relatively simple three methods.

Picture simulation

For example, if we need to make a layout of the image above, we need to capture a small picture on the side to tile the background of the elements wrapped in the side and the content, so as to simulate the visual effect that the height of the sidebar is highly consistent with the content.

4. Table layout

You only need to set the display property to table-cell; for several columns that need to be equal in height. If one of the columns wants the adaptive width, you also need to set the display of the parent element to table,width.

The code is as follows:

CSS Code copies content to the clipboard

# main {display: table;width: 100%}

.m _ content {display: table-cell;width: auto;}

M _ rightside {display: table-cell;width: 200px;}

5. Padding whitening

This is a method seen on the Internet not long ago, the essence is to add a large enough padding-bottom value for the column, spread the column open, and then add the same negative margin-bottom value to move the content back. Note that you add the attribute overflow: hidden to the negative box.

The code is as follows:

CSS Code copies content to the clipboard

# main {width: 100% investors: hidden;}

.m _ content {width: auto;float:left;}

.m _ rightside {width: 200pxash paddingmusic bottom: 10000pxTrachetion marginal horse bottom: 10000pxTran floatbank left;}

This is the end of the summary of CSS2's layout methods. Now let's take a look at the new layout method for CSS3.

I. Flex layout

Because the written explanation is more abstract, I will try to make it simple and popular here.

To make a flex layout, you need to define a flex container and then work on its subprojects. As long as a container is defined as a flex container, its child elements are called its child projects.

The basic idea of flex layout is to use the flex container to scale and control the width and height of the subproject, so as to completely fill the available space of the flex container. The width, height, arrangement, and so on of subitems are changed by setting relevant properties. Then it is much easier to lay out the above layouts in this way. The default arrangement of subitems is slightly similar to the floating layout.

1. Flex container

How the flex container is defined:

CSS Code copies content to the clipboard

Div {display:flex}

The flex container is divided into spindle and side axis. The principal axis determines the direction in which the container children are arranged. The side axis is perpendicular to the principal axis. The spindle can have both vertical and horizontal directions.

The flex container can manipulate the subitems as follows: (that is, the properties set in the container. This is very important! )

The arrangement direction of the subitems (that is, the definition principal axis just mentioned)-- flex-direction

The line wrapping of the child item (that is, whether the line break exceeds the span of the flex container). = how to change)-- flex-wrap

Set the arrangement direction and line wrapping mode of sub-items at the same time-- flex-flow

The alignment of subitems on the principal axis (imagine text alignment is easy to understand)-- justify-content

Alignment of subitems on the side axis-align-items

At the same time, set the alignment of the principal axis and side axis of the sub-project-- align-content

Let's take a look at the value and implementation effect of each attribute.

Flex-direction:

CSS Code copies content to the clipboard

Div {

Flex-direction: row / * arranged horizontally, default * /

/ * arranged horizontally, but subitems are arranged from the right * /

/ * arrange vertically * /

; / * arranged vertically, but the subitems are arranged from the bottom * /

}

In the test, I made the width of the flex container 100px, the height of the 200px, defined 5 undefined width and height of the sub-items, demonstrated the above four arrangements. Effect:

What needs to be noted here is that when the scaling mode of the subproject is not defined, the default is to render according to the size of the subproject itself.

Flex-wrap

CSS Code copies content to the clipboard

Div {

Flex-direction: nowrap

/ * when the total span of a subproject on the spindle is greater than the length of the spindle, the line wrapping is not performed, but the span of each subproject is reduced. Default * /

/ *-ditto-for line wrap display * /

/ * Wrap lines from the end of the side axis (the direction of the arrangement of the principal axis remains the same). It is not often used in practice * /

}

In the test, I defined whether the width of each subproject is 30px 100px flex container or the original width of the project. Effect:

Because the width of the subitem is set here, it has no effect on the container subitems whose principal axis is vertical.

Flex-flow

CSS Code copies content to the clipboard

Div {

Flex-flow: |

/ * is the abbreviation for the combination of the above two attributes. Default: flex-flow:row nowrap*/

}

Justify-content

CSS Code copies content to the clipboard

Div {

Justify-content: flex-start / * aligns to the end where items are arranged at the beginning, and defaults to left alignment * /

/ * align at the end of the project, right by default * /

/ * Center alignment, default horizontal center * /

/ * both ends are aligned and the spacing between items is equal (edge display) * /

/ * the space before the first element and the space after the last element are evenly distributed under half of other blank spaces * /

}

During the test, I set the width and height of the flex container to 200px, and the sub-items did not set the width and height. Effect:

When the principal axis is horizontal:

When the principal axis is horizontal and vertical:

Align-items

CSS Code copies content to the clipboard

Div {

Align-items: flex-start / * alignment of the starting point of the side axis * /

/ * alignment of side axis termination points * /

/ * alignment of the midpoint of the side axis * /

/ * baseline alignment of the first line of text of the project * /

/ * default value, if the project does not set width (height), it will occupy the entire container side axis span * /

}

The final baseline looks no different from flex-start because I set the height for each child. After setting the height:

Align-content

CSS Code copies content to the clipboard

Div {

Align-content: flex-start / * aligned with the starting point of the side axis * /

/ * align with the side axis termination point * /

/ * align with the midpoint of the side axis * /

/ * align with both ends of the side axis, and the sub-items are equally spaced on each axis * /

/ * the sub-items are equally spaced on each axis, and the item spacing is twice as large as the margin spacing * /

/ * the project occupies the entire side axis * /

}

As mentioned above, this property does not work for children of a single axis. By default, however, only subprojects are on one axis (flex-wrap defaults to nowrap), so for this property to see the effect, you must set flex-wrap.

There are several cases in which flex-wrap is wrap.

Subitem

The following properties are set on child items.

The manipulations of the child items are as follows:

The order of sub-items-order

Magnification of the sub-project-flex-grow

The default is 0, that is, if there is space left on the spindle, the children are not enlarged.

Reduction of subprojects-flex-shrink

The default is 1, that is, if there is not enough space in the spindle, the child is reduced.

Set the first three at the same time-- flex

Sets the alignment of a single project itself on the side axis-align-self

Then let's take a look at the value and implementation effect of each attribute ()

Order

This property can be used to solve the problem that a block loads first but is displayed later on the page.

CSS Code copies content to the clipboard

Div .item {order:}

/ * the higher the number, the lower the arrangement. The default is 0 percent /

Here I set the order of the first child to 1.

Flex-grow

If all items have a flex-grow property of 1, they will divide the remaining space equally, if any. If the flex-grow property of one project is 2 and all other projects are 1, the former will take up twice as much space as the other items.

CSS Code copies content to the clipboard

Div .item {flex-grow:}

Before setting up flex-grow:

After setting up:

The flex-grow of the second project is 2, and the other is 0:

Flex-shrink

If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space.

CSS Code copies content to the clipboard

Div .item {flex-shrink:}

I set the width of the 200px for each subitem, and the width of the flex container is 500px, so if you don't set flex-shrink, each project will reduce its size by the same proportion to fit the container.

At this point I set flex-shrink: 0 for the second project; the project remains the same size.

Flex-basis

This property sets the span of the subitem on the principal axis, simply setting the width and height.

CSS Code copies content to the clipboard

Div .item {flex-basis: | auto/*auto is the default value, which is the project size * /}

Flex

This is the combination of flex-grow, flew-shrink and flex-basis. =

CSS Code copies content to the clipboard

Div .item {flex:none | [? | |]}

Flex-grow must. The default is 0 1 auto.

Align-self

This property is used to individually set the alignment of a subitem on the side axis.

CSS Code copies content to the clipboard

Div .item {align-self:flex-start | flex-end | center | baselinebaseline | stretch}

So much for summarizing and introducing the methods of flex layout.

Chestnut (using flex to implement the above layouts)

Below, post the code that uses the flex layout to implement the above layouts (there are many ways to do it).

T layout

* {margin: 0 article padding: 0;} header, footer {background: sandybrown;height: 50px;} section {display: flex;align-items: flex-start;height: 500px;} article {order: 1 article flex: 3 article self: stretch;background: wheat;} aside {flex: 1 article background: seashell;height: 100px;}

Chinese character layout

* {margin: 0 article padding: 0;} header, footer {background: sandybrown;height: 50px;} section {display: flex;align-items: flex-start;height: 500px;} article {order: 1 article flex: 3 article aside: stretch;background: wheat;} aside {flex: 1 X background: seashell;height: 100px;} section.sidebar {order: 2 X flex: 1 x height: 100px background: seashell;}

Contour layout

It's really simple.

* {margin: 0 aside padding: 0;} html,body {height: 100%;} section {display: flex;height: 100%;} article {order: 1 aside: wheat;} aside {flex: 1 aside background: seashell } about the new layout of CSS3 methods to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.