Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the css layout". In the daily operation, I believe many people have doubts about what the css layout is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is the css layout?" Next, please follow the editor to study!

I. single-column layout

There are two common single-column layouts:

Single-column layout with equal width of header,content and footer

Single-column layout with equal width of header and footer and slightly narrower content

1. How to realize

For the first, first set width:1000px; or max-width:1000px on header,content,footer (the difference between the two is that when the screen is smaller than 1000px, the former will appear scroll bar, the latter will not show the actual width), and then set the margin:auto implementation to center.

For the second, the content width of header and footer is not set, and block-level elements fill the entire screen, but the content area of header, content, and footer sets the same width and is centered through margin:auto.

.header {margin:0 auto; max-width: 960px; height:100px; background-color: blue;} .content {margin:0 auto; max-width: 960px; height: 400px; background-color: aquamarine;} .footer {margin:0 auto; max-width: 960px; height:100px; background-color: aqua;}

Second, two-column adaptive layout

Two-column adaptive layout refers to the layout in which one column is supported by the content and the other column is full of the remaining width.

1.float+overflow:hidden

If it is an ordinary two-column layout, the margin of floating + ordinary elements can be implemented, but if it is an adaptive two-column layout, it can be achieved by using float+overflow:hidden, which mainly triggers BFC through overflow, while BFC does not overlap floating elements. Because setting overflow:hidden does not trigger the haslayout property of the IE6- browser, you need to set zoom:1 to be compatible with the IE6- browser. The specific code is as follows:

Left

Right

Right

.parent {overflow: hidden; zoom: 1;} .left {float: left; margin-right: 20px;} .right {overflow: hidden; zoom: 1;}

Note: if the sidebar is on the right, pay attention to the rendering order. That is, in HTML, write the sidebar first and then the main content

2.Flex layout

Flex layout, also known as elastic box layout, can achieve the layout of various pages in just a few lines of code.

/ / html part as above .parent {display:flex;} .right {margin-left:20px; flex:1;}

3.grid layout

Grid layout, is a grid-based two-dimensional layout system, the purpose is to optimize the user interface design.

/ / html part is the same as above. Parent {display:grid; grid-template-columns:auto 1frr; grid-gap:20px}

Third, three-column layout

Features: adaptive width of middle column, fixed width on both sides of the side

1. Holy Grail layout

Characteristics of ①

The special three-column layout is also fixed width on both sides and adaptive in the middle. The only difference is that the dom structure must first write the middle column, so that the middle column can be loaded first.

.container {padding-left: 220pxSpacer / make room for left and right columns padding-right: 220px;} .left {float: left; width: 200px; height: 400px; background: red; margin-left:-100%; position: relative; left:-220px;} .center {float: left; width: 100%; height: 500px; background: yellow;} .right {float: left Width: 200px; height: 400px; background: blue; margin-left:-200px; position: relative; right:-220px;} Holy Grail layout

② implementation steps

All three parts are set to float to the left, otherwise the contents on the left and right sides cannot be on the same line as the middle column. Then set the width of the center to 100% (for middle column content adaptation), and the left and right sections will jump to the next line

Return the left and right parts to the same line as the center section by setting margin-left to a negative value

Leave a gap between the left and right sides by setting the padding-left and padding-right of the parent container.

Move the left and right sections to both sides by setting the relative positioning.

Shortcomings of ③

The minimum width of the center section cannot be less than the width of the left section, otherwise the left section will fall to the next line

If one of the columns is highly elongated (shown below), the backgrounds of the other two columns are not automatically filled. (it can be solved with contour layout, positive padding+ and negative margin, which will be described below)

two。 Double wing layout

Characteristics of ①

It is also a three-column layout, which is further optimized on the basis of the Grail layout, solves the problem of confusion in the Grail layout, and realizes the separation of content and layout. And any column can be the highest column, there will be no problem.

.container {min-width: 600pxbank / make sure the intermediate content can be displayed, twice the width of left + right} .left {float: left; width: 200px; height: 400px; background: red; margin-left:-100%;} .center {float: left; width: 100%; height: 500px; background: yellow } .center .inner {margin: 0200px; / / New section} .right {float: left; width: 200px; height: 400px; background: blue; margin-left:-200px;} double wing layout

② implementation steps (the first two steps are the same as the Grail layout)

All three parts are set to float to the left, and then the width of center is set to 100%. In this case, the left and right sections jump to the next line.

Return the left and right parts to the same line as the center section by setting margin-left to a negative value

Add an inner div to the center part, and set margin: 0 200px

Shortcomings of ③

Add an extra layer of dom tree nodes to increase the computational complexity of rendering tree generation.

3. Comparison of two layout implementation methods:

Both layouts put the main column at the front of the document stream so that the main column loads first.

The implementation of the two layout methods also have something in common, both let three columns float, and then form a three-column layout through negative outer margins.

The difference between the two layouts lies in how to deal with the position of the middle main column: the Grail layout uses the left and right inner margins of the parent container + the relative positioning of two slave columns.

The double wing layout is to nest the main column in a new parent block to adjust the layout by using the left and right outer margins of the main column.

Fourth, contour layout

A contour layout is a layout in which child elements are of equal height in the parent element. Next, let's introduce several common implementations:

1. Using positive padding+ and negative margin

We can solve the second disadvantage of the Grail layout by waiting for the layout, because the background is displayed in the padding area, set a large value of padding-bottom, then set the same value of negative margin-bottom, and add a container to all columns, and set overflow:hidden to cut off the overflow background. This is possible to achieve multi-column contour layout, and can also achieve column-to-column separation line effect, simple structure, compatible with all browsers. The new code is as follows:

.center, .left, .right {padding-bottom: 10000px; margin-bottom:-10000px;} .container {padding-left: 220px; padding-right: 220px; overflow: hidden;// cut off the overflow background}

two。 Use background pictures

This method is one of the earliest methods we use to realize the contour column, that is, we use the background image to lay the Y axis on the parent element of the column, so as to realize the illusion of the contour column. The implementation method is simple and compatible, and it can be easily implemented without too many css styles, but this method is not suitable for high-column layouts such as fluid layout.

Before making a style, you need a background image similar to the following:

.container {background: url ("column.png") repeat-y; width: 960px; margin: 0 auto;}. Left {float: left; width: 220px;} .content {float: left; width: 480px;} .right {float: left; width: 220px;}

3. Imitate table layout

This is a very simple and easy to implement method. However, the compatibility is not good, and it will not work properly in ie6-7.

.... ... table {width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display: table;}. TableRow {display: table-row;}. TableCell {display: table-cell; width: 33%;} .cell1 {background: # f00; height: 800px;} .cell2 {background: # 0f0 }. Cell3 {background: # 00f;}

4. Use borders and positioning

This method uses borders and absolute positioning to achieve the effect of a fake column of equal height. The structure is simple, compatible with various browsers and easy to master. Suppose you need to implement a two-column isometric layout with the sidebar height equal to the height of the main content.

# wrapper {width: 960px; margin: 0 auto;} # mainContent {border-right: 220px solid # dfdfdf; position: absolute; width: 740px; height: 800px; background: green;} # sidebar {background: # dfdfdf; margin-left: 740px; position: absolute; height: 800px; width: 220px;}

5. Adhesion layout

1. Characteristics

There is a piece of content, when the Gaokang is long enough, the following element will follow the element.

When the element is short (for example, less than the height of the screen), we expect the element to "stick" to the bottom of the screen.

The specific code is as follows:

Main footer * {margin: 0; padding: 0;} html, body {height: 100% min-height: 100% / height inherited layer by layer} # wrap {min-height: 100%; background: pink; text-align: center; overflow: hidden } # wrap .main {padding-bottom: 50px;} # footer {height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top:-50px;}

two。 Implementation steps

(1) footer must be an independent structure without any nesting relationship with wrap.

(2) the height of the wrap area is changed to the height of the viewport by setting min-height

(3) footer should use negative margin to determine its position.

(4) padding-bottom needs to be set in the main area. This is also to prevent negative margin from causing footer to overwrite any actual content.

At this point, the study on "what is the layout of css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.