When we write web code, the first thing we should do is to design the layout of the page, and then fill it with content. The layout of the web page is good or bad, directly determines the final display effect of the web page. PC common web page layout form has two column layout, three column layout, etc. In CSS, float, position, and display attributes are used together to achieve the desired effect.

A document flow

Document flow is an HTML document in which all the elements are arranged and displayed in a certain order.

CSS document flows can be divided into three types: standard flow, floating flow, and location flow.

1. Standard flow

By default, HTML elements are rendered and displayed in standard flow. We’ve divided elements into block-level elements, in-line elements, and in-line block-level elements, which have the property that the block-level occupies a row, that in-line and in-line block-level can coexist on a row, all of which are specific to the standard flow. To summarize, elements in a standard flow can only be typeset horizontally or vertically. If the element is a block-level element, it is formatted vertically, and if the element is an inline/inline block-level element, it is formatted horizontally.

2. Floating flow

Floating flow has only one layout, horizontal layout. It can only set an element to be left or right aligned within the parent element. An element that is set to float is removed from the standard stream, after which it ignores the element’s display attribute and is treated as a block-level element.

1 div{ 2 float:left; /* Specifies that the element floats to the left */ 3 /*float:right; Specifies that elements float to the right */ 4}Copy the code

Note that the floating float property has no center value, and if the float property is set, you will not be able to use margin:0 auto; Attribute centers the element.

3. Location flow

Both standard and floating flows can only lay out elements horizontally or vertically, but the reality is that we may need to offset elements in several directions at once, up, down, left, and right, and positioning flows are designed to solve this problem. You can place an element in a set stream by setting its position attribute, and set its specific offset by setting the left, right, top, and bottom attributes.

There are four types of streams:

In fact, all elements are static by default, i.e. in a standard stream.

A) relative B) relative C) relative D) relative That is, although the element is no longer in its original position, the space previously occupied is not released to other elements in the standard flow.

The element is removed from the standard stream. Browsers treat it as a block-level element. Whatever element it was before it was positioned, other elements ignore it. The absolute positioning offset is relative to the first ancestor element for which it has the positioning attribute.

D) Fixed location is similar to absolute location, but its offset is fixed relative to the browser window.

Two floating

When an element is floated, it is removed from the standard stream, and elements in the standard stream ignore the floating element and may be overwritten by the floating element.

When multiple elements float, they have the following characteristics:

A) Elements that float in the same direction are shown first.

.brother1{ float:left; } .brother2{ float:left; } /* Brother1 will show up on the left of Brother2, if both are set to right float, then Brother1 will show up on the right of Brother2 */Copy the code

B) Floating elements in different directions will try to find and stick to the elements in front of it with the same floating direction. If there is no other floating element in front of it, it will stick to the boundary of its parent element

.son1{ float:left; } .son2{ float:right; } .son3{ float:left; } /* SON1 and son3 are displayed to the left of the parent element, and SON3 follows son1. Son2 appears to the right of the parent element, close to the parent element */Copy the code

C) If there is an unfloated sibling element, the element will be displayed in line based on its position in the standard flow after being floated.

.brother1{ background-color:red; float:left; } .brother2{ background-color:blue; } .brother3{ background-color:yellow; float:left; } /* The final effect is: Brother1 and Brother2 are shown in the first line, but brother1 covers brother2 and Brother3 is shown alone in the second line */Copy the code

Floating elements have another feature: floating elements do not block text in unfloating elements, and unfloating text automatically gives space to floating elements. That’s what floats are designed for.

Float causes two problems. First, it causes the height of the parent element to collapse, and the padding and margin are invalid. The second is ignored by other elements, the phenomenon of elements covering each other. So how do you eliminate the effects of float on other elements? We clean up the effects of the float in the following way.

A) Set a fixed height for the parent element (solve problem 1).

1 father{ 2 heigth:100px; 3 } 4 son{ 5 float:left; 6}Copy the code

B) Set the float for the parent element (solve problem 1).

1 father{ 2 float:left; 3 } 4 son{ 5 float:left; 6}Copy the code

C) Set the clear attribute. The function of the clear attribute is to eliminate the influence of the floating element on other floating elements by preventing the floating element from looking for adjacent floating elements (solve problem 2).

1 father::after{ 2 content:''; 3 display:block; 4 height:0; 5 clear:both; 6} 8 son{9 float:left; 10}Copy the code

D) Set overflow:hidden for the parent element; Properties (Solve problem two).

1 father{ 2 overflow:hidden; 3} 4 /* 5 son{6 float:left; 7}Copy the code

* * three positioning

1. Relative positioning

By setting the element to position:relative; Property sets the relative positioning of elements.

1 .box{ 2 position:relative; 3 top:50px; 4 left:50px; 5} 6 /* The box element will be offset 50px to the right and down from its original position. Note that positioning attributes in the same direction can only be used once */ in positioning streamsCopy the code

Note that the coordinate system in the browser is not the same as the normal coordinate system. If you are not sure, see section 4.3 of CSS Basics.

In relative positioning, the element does not actually depart from the standard flow, so the browser still distinguishes whether it is block-level or some other type of element. In addition, set the margin attribute of the element. In fact, the margin area will appear before the element positioning.

2. Absolute positioning

By setting position:absolute; Property sets the absolute location of the element.

1 .box{ 2 position:absolute; 3 top:50px; 4 left:50px; 5} 6 /* The box element is offset 50px*/ downward to the right relative to the left vertex (the origin of the coordinates) of the parent elementCopy the code

If no offset is set, the default top and left offsets are 0. If all of the element’s ancestors have no positioning attributes, the element is offset relative to the body element.

There are two caveats when using absolute positioning: the first is if the page width is large (larger than the viewable width of the browser) and the element ends up positioned relative to the body, which is actually only offset relative to the width of the browser’s first screen, not the width of the entire page. The second is that absolute positioned elements automatically ignore the padding attribute of the ancestor element that has the positioned attribute.

Absolute positioning is usually used in conjunction with relative positioning. The parent element sets the relative positioning, but does not set the offset (default is 0). The child element sets the absolute positioning, so that the offset of the child element is controlled within the parent element.

1 .father{ 2 position:relative; 3 } 4 .son{ 5 position:absolute; 6 left:50px; 7 top:50px; 8} 9 /* The child element is offset from the parent element, and the second parent element is not affected */Copy the code

3, fixed positioning

The fixed positioning of the element is similar to the correlation of the background image, and you can control whether or not the element scrolls along the scroll bar.

1 div{ 2 position:fixed; 3 top:100px; 4 left:50px; 5}Copy the code

Fixed positioned elements are offset from the browser viewport, as are absolutely positioned elements, which are removed from the standard document flow, and are consistently treated as block-level elements by the browser.

4. Z-index attribute

By default, all elements have a Z-index attribute that defines their coverage relationship.

2 z-index:999; 3}Copy the code

In general, elements have a z-index value of 0, and elements in the location stream overwrite elements in the standard stream, and elements written later in the location stream overwrite elements written earlier.

In a set stream, if you want to adjust their coverage relationship, you can set their Z-index property, and whoever has a larger value has a higher display priority.

It should be noted that if the parent element of the positioned element also sets the Z-index attribute, the z-index attribute of the child element will be invalid, and the overlay relationship will be determined according to the z-index attribute of the parent element.

Four centered with Flex

1, horizontal center

If the element is an inline element such as text or image, set text-align:center in the parent element to achieve horizontal center of the inline element. If the child element is an indefinite block element, set the display of the child element to inline-block to make the child element become an inline element, and achieve horizontal center of the block element.

p{ text-align:center; }. Father {text-align:center; } .son{ display:inlin-block; /* Display mode is changed with text-align attribute to center it */Copy the code

If the child element is a fixed-width block-level element and you don’t want to change the display mode, you can center it horizontally by setting the margin attribute.

1 div{ 2 width:500px; 3 height:300px; 4 margin:0 auto; 5 /*auto, let the browser decide */ 6}Copy the code

2, vertical center

First, if the parent element is of a certain height, and the child element is an inline element, such as text or images, whose height is supported by content, you can use the line-height attribute to center it vertically.

.father{
    height:100px;
}
.son{
    font-size:20px;
    line-height:100px;
}
Copy the code

If the child element is block-level element of variable height, we can set display:table-cell to the parent element; And the vertical – align: middle; Property to resolve.

.father{ height:100px; display:table-cell; vertical-align:middle; } .son{ display:block; height:? ; } /* The principle of vertical centering is that the parent element is presented in the form of a table, and the vertical-align attribute is used to set the vertical alignment of cell contents in the table, so as to achieve the effect of block level elements being vertically centered. * /Copy the code

Note that margin values are ignored when dispaly:table-cell is set. Also, if you set absolute positioning or floating, this property will be broken.

If the child element is fixed height, then you can simply use the margin attribute to center the element vertically.

.father{
    height:200px;
}
.son{
    height:100px;
    margin-top:50px
}
Copy the code

3, horizontal and vertical center

By combining the above methods, you can achieve the effect that the elements are centered horizontally and vertically.

.father{
    width:800px;
    height:600px;
    text-align:center;
}
.son{
    width:600px;
    heigth:400px;
    margin:100px auto;
}
Copy the code

Or use absolute location + relative location.

.father{
    width:600px;
    height:800px;
    position:relative;
}
.son{
    width:400px;
    height:600px;
    position:absolute;
    top:100px;
    left:100px;
}
Copy the code

4, flex

Flex stands for elastic layout and is used to provide maximum flexibility for box models. Note that float, clear, and vertical-align attributes are disabled when the element is laid out with Flex. Flex is an optional value for the display property, not position.

.box{ display:flex; /* Set the elastic layout for block level elements */}. Inline-box {display:inline-box; /* Set an elastic layout for inline elements */}Copy the code

A box with an elastic layout is called a Flex box, or container. If you place an elastic box as a complete engineering (project), then we can put the elastic element of the inside of the box as a single module project (module item), these modules will comply with the specification of elastic box, by setting some properties, automatically adjust itself to adapt to the size of the elastic changes in the available space in the box.

There are two axes in the elastic box by default, the horizontal axis and the vertical axis (cross axis). The intersection of axis and box frame is the beginning position and the end position.

Container properties:

.box{ display:flex; flex-direction:row; /* This property determines the orientation of the main axis, that is, the direction in which items are arranged. Row, default, landscape from left to right; Colum, displaying items vertically from top to bottom; */ flex-wrap:nowrap; */ flex-wrap:nowrap; /* This property defines how to wrap a line if an axis does not fit. Nowrap, default, no line breaks; Wrap, wrap */ context-content :flex-start; /* This property defines the alignment of items on the main axis. Flex-start, the default, starts alignment (for example, left alignment if items are aligned horizontally left to right, or right alignment if row-reverse is set above). This property also has several optional values: flex-end, ends alignment; Center, center aligned; Space-between, both ends are aligned; */ align-items:stretch; /* This attribute defines the alignment of items on the cross axis. "Stretch", the default value, will fill the entire container if the item has no specific height; Center, project center line alignment; Flex-start, start alignment; Flex-end, end alignment; Baseline, line 1 of items */}Copy the code

For a project to automatically resize itself to accommodate changes in the available space in the elastic box, it depends on some of the attributes of the project itself.

.item{ order:1; /* Set the order of the items, the higher the number, the farther back, if confiscate the Settings, the first person in the row first. */ flex-grow:1; The default is 0 for no magnification, 1 for 1x, 2 for 2x, and so on. If all items are set to the same number, the available space of the container is divided equally by items. * / flex - the shrink: 1; /* Defines the scale that can be shrunk. The default is 1, which means that it can be shrunk by 1, 2, which means it can be shrunk by 2, and so on. 0 indicates no shrinking. If all items are set to the same number, the available space of the container is divided equally by items. */ flex-basis:auto; /* Defines the length of the main axis that the item occupies. It can be a value like width or height. Like percentages, PX, em, etc. Two special values: auto (the default), which represents the size of the box itself; 0 represents only the size of the project content area () */}Copy the code

Scaling and sizing can be abbreviated.

1 .item{ 2 flex:1 1 auto; 3 /* Indicates flex-grow,flex-shrink,flex-basis*/ 4}Copy the code

When using abbreviations, note that if there is only one numeric value, it represents flex-grow; If there is only one width value (with units), it represents flex-basis; If the value has two values, the first must be a number, representing flex-grow, the second can be a number or width, and the sub-table represents flex-shrink or Flex-basis.

Five two column layout

There are several common ways of two-column layout with fixed width on the left and adaptive width on the right:

1. Leave the standard flow on the left and offset it with the margin attribute on the right

.left{
    width:200px;
    float:left;
    /*
    position:absolute;
    left:0;
    */
}
.right{
    margin-left:200px
}
Copy the code

2, calc ()

.left{ width:200px; display:inline-block; } .right{ display:inline-block; width:calc(100% - 200px); } /* Another form is to float left and right, and then use calc() to dynamically calculate the width on the right */Copy the code

3, float + landing

.left{ width:200px; float:left; } .right{ overflow: auto; } /* Float left, but right box through overflow: auto; Form a BFC so that the right box does not ignore floating elements */Copy the code

4, flex

.wrap{
    display:flex;
    aligin:items:flex-start;
}
.left{
    width:50px;
    flex:0 0 auto;
}
.right{
    flex:1 1 auto;
}
Copy the code

Six three column layout

General 3-column layout requirements are: adaptive width in the middle, fixed width on the left and right sides. To meet this requirement, we generally have two layouts, the Grail layout and the twin wing layout.

1. Grail layout

HTML part:

2     <div class="center">center</div>
3     <div class="left">left</div>
4     <div class="right">right</div>
5 </div>
Copy the code

The CSS part:

.wrap{
    width: 50%;
    height:400px;
    margin:50px auto;
    position: relative;
}
.wrap .center{
    width: 100%;
    height:400px;
    float: left;
}
.wrap .left{
    width:100px;
    height: 400px;
    float: left;
    margin-left: -100%;
    position: relative;
    left:-100px;
}
.wrap .right{
    height: 400px;
    width:100px;
    float: right;
    margin-left: -100%;
    position: relative;
    right:-100px;
}
Copy the code

Principle: The left, middle and right blocks are all set to float, the width of center is 100%, the left and right are in the same line with center by setting negative margin value, and then use relative positioning to distribute them on both sides of center.

2, double wing layout

HTML part:

<div class='wrap'>
    <div class="center">
        <div class="content"></div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
Copy the code

The CSS part:

.wrap{
    width: 50%;
    height:400px;
    margin:50px auto;
}
.wrap .center{
    width: 100%;
    height:300px;
    float: left;
}
.wrap .center .content{
    margin:0 100px;
}
.wrap .left{
    width: 100px;
    height:300px;
    float: left;
    margin-left: -100%;
}
.wrap .right{
    width: 100px;
    height:300px;
    float: right;
    margin-left: -100%;
}
Copy the code

Principle: The left, middle and right blocks are set to float, and the width of center is 100%. The left and right are in the same line with center by setting the negative margin value. In this case, the left and right actually cover part of center, so the content in Center needs to set margin.

The difference between the Holy Grail layout and the Twin Wings layout: Apart from the structure of the HTML code, the Center width of the Holy Grail layout is the width of the content area, with left and right on either side. The center width of a twin-wing layout is equal to the width of the content area plus the left and right widths. Since its left and right are actually occupying the center space, we need to add a.content div to the center and set its margin to leave out the left and right positions.

The advantage of the Grail and wing layouts is that the center area can be rendered by the browser before the left and right sides. But modern browsers generally perform well, and this priority is not at all noticeable to users.

3, calc ()

Through calc() function, we can also easily meet the requirements of fixed width on both sides and self-adaptation in the middle.

HTML part:

1 <div class="wrap"> 2 <div class="left">left</div> 3 <div class="right">left</div> 4 <div class="center">center</div> 5  </div>Copy the code

The CSS part:

.wrap{ width:80%; margin: 0 auto; background-color: #ccc; /*position: relative; */ } .wrap .center{ background-color: blue; margin-left:200px; width:calc(100% - 400px); } .wrap .left{ background-color: red; width:200px; float:left; /*position: absolute; left: 0; top:0; */ } .wrap .right{ background-color: yellow; width:200px; float:right; /*position: absolute; right: 0; top:0; */} /* You can use both float and position to achieve the effect of both sides fixed. Note that using float requires the center area to be placed after the left and rightCopy the code

4. Flex layout

The HTML part is the same as calc().

The CSS part:

.wrap{
    width:80%;
    margin: 0 auto;
    background-color: #ccc;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.center{
    background-color: blue;
    flex:1 0 auto;
    order:1;
}
.left{
    background-color: red;
    width:200px;
    flex:0 0 auto;
    order:0;
}
.right{
    background-color: yellow;
    width:200px;
    flex:0 0 auto;
    order:2;
}
Copy the code