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

This article will explain in detail what common layouts there are in CSS. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Common single-column layout:

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

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

.header {

Margin:0auto

Max-width:960px

Height:100px

Background-color:blue

}

.content {

Margin:0auto

Max-width:960px

Height:400px

Background-color:aquamarine

}

.footer {

Margin:0auto

Max-width:960px

Height:100px

Background-color:aqua

}

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:0auto

Max-width:960px

Height:100px

Background-color:blue

}

.nav {

Margin:0auto

Max-width:800px

Background-color:darkgray

Height:50px

}

.content {

Margin:0auto

Max-width:800px

Height:400px

Background-color:aquamarine

}

.footer {

Margin:0auto

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 is the same 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:auto1fr

Grid-gap:20px

}

Third, three-column layout

Features: adaptive width of the middle column, fixed width on both sides, there are many ways to realize the three-column layout (several methods to realize the three-column layout). This paper focuses on the Holy Grail layout and double flying wing layout.

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:220px;// makes room for the 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

This is the end of this article on "what are the common layouts in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please 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.