Summary of HTML and CSS layout skills

Summary of HTML and CSS layout skills

Many people are confused about the CSS layout. in actual application scenarios, it is difficult to choose a CSS layout because of its many layout types. Today, I spent some time summing up my understanding of CSS layout, analyzing the advantages and disadvantages of various la S, and hope to share some of my la s experience with my friends at the front end, if you have any questions, please let us know. Now, let's unveil the secrets of various la S.

Single Column Layout

Horizontal Center

Horizontal center layout is the most common one. It is often used for headers, content areas, and footers. Its main function is to control the display of the box in the horizontal center of the entire page.

Use margin: 0 auto to implement

.child{width:800px; margin: 0 auto;}

Advantages:Good compatibility
Disadvantages:Specify the box width

1. Use table to implement

.child{display: table; margin: 0 auto;}

Advantages:The parent container parent is not required. You only need to set the parent container parent.
Disadvantages:IE6 and 7 need to adjust the structure

2. Use inline-block and text-align to implement

.parent{text-align: center;}.child{display: inline-block;}

Advantages:Good compatibility
Disadvantages:Child and parent elements must be set at the same time.

3. Use absolute positioning absolute for implementation

There are two ways to use absolute positioning to achieve horizontal center layout: one seed container has no width and the other seed container has width. If there is no width, you can use the code below. If there is a width, you can set the negative value of margin-left to half the width of the container.

.parent{position: relative;}.child{position: absolute; left: 50%; transform: translateX(-50%);}

Advantages:You do not need to set the container width, which can be used on the Mobile Terminal
Disadvantages:Poor compatibility. Support from IE9 and later browsers is required.

4. Use the flex layout to implement

Flex has two ways to implement horizontal center. The parent container sets display: flex. One is to directly set the justify-content attribute value center in the parent container. Second, use margin: 0 auto in the sub-container.

.parent{display: flex; justify-content: center;}

.parent{display: flex;}.child{margin: 0 auto;}

Advantages:Easy to implement, especially in responsive Layout
Disadvantages:Poor compatibility. Using this layout in a large area may affect the efficiency.

Vertical center

Vertical center refers to the vertical center of the sub-container without height, rather than the vertical center line-height of a single line of text. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Authorization + aOpPC9wPg0KPHByZSBjbGFzcz0 = "brush: java;"> .parent{position: relative;}.child{position: absolute; top: 50%; transform: translateY(-50%);}

2. Use flex to implement

.parent{display: flex; align-items: center;}

3. Use display: table-cell to implement

.parent{display: table-cell;vertical-align: middle;height: 400px;}

Summary: The horizontal and vertical center layout methods can be combined to achieve the horizontal center layout. Here, we only use absolute positioning to implement horizontal and vertical center layout. You can try other methods by yourself. (The following describes the layout based on the above horizontal and vertical center methods, so that all the advantages and disadvantages of them will not be analyzed .)

.parent{position: relative;}.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

Multi-Column Layout

Multi-column layout is also very common, suitable for one side of the fixed width, the other side of the Adaptive Layout.

Floating Layout

I have summarized the two-column floating layout method some time ago. I will not summarize it again here. If you are interested, please refer to the floating Layout Method of the front-end time (summary ).

Multi-column Distribution

Multi-column distribution is often displayed in the content, most of which are side-by-side display of the same function and class content.

HTML code

    1

  2  3  4

1. Use flex to implement multi-Column Layout

.parent{display: flex;}.column{flex: 1;}.column+ .column{margin-left: 20px;}

2. Use table to implement multi-Column Layout

.parent{display: table; table-layout: fixed; width: 100%;}.column{display: table-cell; padding-left: 20px;}

3. Use float to implement multi-Column Layout

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

Prompt: When using table and float to implement multi-column layout, note that if you want to set the background color, you must set. the column box is used as the parent container to add a sub-container in it, and the background color is set. setting the background color in the column container will result in no spacing between boxes due to padding.

Jiugongge Layout

HTML code

1. Use flex to implement the nine cells Layout

.parent{display: flex; flex-direction: column;width: 300px;}.row{height: 100px; display: flex;border: 1px solid red;}.item{width: 100px; background-color: #ccc;border: 1px solid red;}

2. Use table to implement the nine squares Layout

.parent{display: table; table-layout: fixed; width: 100%;}.row{display: table-row;}.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

Full Screen Layout

HTML code

Full Screen layout with absolute positioning

html,body,.parent{height: 100%; overflow: hidden;}        .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}        .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}        .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}        .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

Responsive Layout

Use of meta tags

Use media queries

@ Media screen and (max-width: 480px) {/* style with screen smaller than 480px */}

Summary: These layout methods are often used, and some are rarely used in specific projects due to compatibility issues. However, for mobile terminals, the layout summarized above is practical. Today, I took some time to sort out these la S. One is to consolidate knowledge, and the other is to share these methods with beginners at the front end so that they can have a deeper understanding of the layout, of course, these are not all the layout methods in CSS. I will continue to update and share any layout that is not summarized in the future. If any of my colleagues supplement the layout method, you can also find problems in your blog.