Webpage Design Code summary ----- layout (1), webpage design -----

Webpage Design Code summary ----- layout (1), webpage design -----

I have never forgotten how to organize the language since I wrote it for a long time, so I have registered this blog garden account. First, summarize the "pitfalls" you encounter in programming. Second, record your programming career for future review. The source of this article is a cloud platform project that you are responsible for recently. This is the first article about layout.

The traditional layout mode is usually a box model and relies on display, position, or float. However, position has the disadvantage that it cannot adapt to the internal height and requires a fixed container height. float has parent element collapsed and needs to be cleared and floating. It is also troublesome for some layout methods, for example, vertical center. If you use the traditional box model method, the code is generally:

 .mid{position:absolute;left:50%;top:50%;margin-top:-1/2*Height;margin-left:-1/2*Width;}

This method is not easy to maintain and requires a fixed height of the parent element. To solve this problem, flexbox (elastic layout) is introduced ). Using flex positioning on the parent element of. mid can easily solve this problem. Of course, to ensure browser compatibility, you need to add a private prefix for the browser.

1 .wrap{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}

In addition, when writing the banner at the top, you can make the parent element as follows:

justify-content:space-between;

Make the Website logo, option box, and login button layout more beautiful. However, after the flex layout is used, the float, clear, and vertical-align attributes will all be invalid.

Other flex attributes: 1. flex-direction: defines the arrangement direction of the project. 2. flex-wrap: defines whether elements on the spindle can wrap. 3. align-items: defines how the project is aligned perpendicular to the main axis. 4. align-content: defines the alignment of Multiple spindle. The above attributes are written in the parent element, and the child element also has some flex attributes:

1. order: defines the order of projects. 2. flex-grow: defines the project's amplification factor. If it is 0, it is not enlarged. 3. flex-shrink: opposite to flex-grow. 4. flex-basis: Set the space occupied by the project on the main axis. 5. align-self: Provides custom align-items attributes for the parent element.

Other layout experiences:

1. Do not use float and position layout at will to avoid high collapse.

2. When writing styles, it is best to use classes instead of IDs to facilitate code reuse.

3. determine the overall page structure and layout method before layout, so as to avoid the improper layout method discovered in the middle and late stages, resulting in the entire project being re-launched.

4. Pin footer to the bottom of the page: whether the height of the element stack in the body is smaller than the browser height or higher than the browser height, you only need to put other elements in the wrap and footer elements in two different Divs. Set the height of the first div to 100%, and set margin-bottom to the height of footer.

　　

<! DOCTYPE html> 
Do not smile.