twitter

CSS learning entry is easy, as long as 1 year or even half a year, we can quickly cut out the page according to the design drawing, can skillfully use some CSS hack, this stage of our growth is very fast, can learn new knowledge every day. This is actually a very preliminary stage of CSS, but also the majority of pages (including my own 😳) the most impetuous, the most self-righteous, the most think CSS is just such a stage. So we want to increase the depth of learning, in-depth grasp of details and principles, when we have a certain understanding of the underlying performance of CSS, encounter some seemingly strange problems, can be easily solved ~

layout

Before we dive into layout, we need to understand a few important concepts and attributes:

The document flow

Document flow refers to the automatic flow of elements from left to right and top to bottom during layout. Finally, the form is divided into rows from top to bottom, and elements are arranged from left to right in each row. All elements in HTML are box models, and box models occupy a certain amount of space and are sequentially arranged in THE HTML, forming the document flow.

Float, position: absolute | fixed is from the document flow. Out of document flow means that the tag is out of document flow management. No longer constrained by the layout of the document flow, and more importantly, when an element leaves the document flow, the space occupied by the tag in the original document flow is cleared away, and other elements still in the document flow ignore the element and fill its original space.

Block-level elements

• Each block-level element is on its own row, and the element that follows it can only be on another row. Two elements cannot share one row.
• The height, width, line height, and top and bottom margins of elements are all configurable.
• Element width, if not set, defaults to the width of the parent element
• Common block-level elements:<div>, <p>, <h1>... < H6 >, < OL >, <ul>, <dl>, <table>, <address>, <blockquote>, <form>

Row-level elements

• You can be on a line with other elements, you don’t have to be on another line.
• The height, width, and top and bottom margins of the element cannot be set.
• The width of an element is the same as the width of the text or image it contains.
• Common row-level elements:<span>, <a>, <strong>, <em>

Conversion of row-level elements to block-level elements

• You can set block-level elements to row-level elements in the CSS style using display:inline
• Similarly, you can use display:block to set row-level elements to block-level elements

display

Is the most important property in CSS for controlling layout. Each element has a default value, depending on its type. Their default values for most elements are usually block(block-level elements) or inline(inline elements).

Display: None and visibility are different. The display: None element does not occupy the space it should display, but is set to visibility: hidden; It takes up space.

Margin folding

If two adjacent elements have margins on them, and the two margins touch, the larger of the two margins remains and the smaller disappears

Position

• Static: the default value. The element box is generated normally. Block-level elements generate a rectangular box as part of the document flow; Inline elements create one or more line boxes and place them in their parent element.

• Relative: The element box is offset from the previous position in the normal document flow, and the original position is still occupied. When offset occurs, other elements may be overwritten.

• Absolute: The element box no longer occupies the position of the document flow and is offset relative to the containing block (the containing block is the element whose position is not static). If no parent node is found, the box is positioned relative to the browser window. If TRBL is not set, it floats by default in the content-box area of the parent node.
• Fixed: Elements with a fixed property are positioned relative to the window, and will remain in the same position even if the page scrolls. A fixed location element does not remain where it should be on the page (that is, out of the document flow), but mobile compatibility is poor.
• Sticky :(this is a new attribute value added to css3) sticky positioning, the official introduction is relatively simple. In fact, it’s a mixture of “relative” and “fixed”. It’s initially described as relative, as relative to its original position; Once the value exceeds a certain threshold, the device is regarded as fixed and positioned relative to the viewport.

Float

When floating was originally designed, it was not for layout, but for the effect of text wrapping. Like layers in Photoshop, floating elements are arranged on top of the floating layer, and the position of elements in the original document flow will be removed in some way, but it will still affect the layout, so remember to clear floating.

Why are floats used in layouts? This is because floating elements form a BFC (so that the inner element is not disturbed by the outside), and the element’s width no longer ADAPTS to the parent element’s width, but to its own content. This makes it easy to achieve a multi-column layout. Float is commonly used to create multiple column layouts and has been used for quite some time due to its good browser compatibility.

Flex layout

Flexible layout: Used to provide maximum flexibility for box models, elements that use Flex layout are called Flex containers. All of its child elements automatically become container members, called Flex items.

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

Items (Flex Items) are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

Attribute of container

flex-direction

Attribute determines the orientation of the main axis (that is, the orientation of items)

• Row (default) : The main axis is horizontal and the starting point is on the left.
• Row-reverse: The main axis is horizontal and the starting point is at the right end.
• Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
• Column-reverse: the main axis is vertical and the starting point is at the bottom.

flex-wrap

By default, items are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

• Nowrap (default) : no line breaks.

• Wrap: The first line is at the top.

• Wrap-reverse: newline with the first line at the bottom.

flex-flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap

justify-content

The context-content attribute defines the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

• Flex-start (default) : left-aligned
• Flex-end: right-aligned
• Center: a center
• Space-between: both ends are aligned with equal intervals between items
• Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

align-items

The align-items property defines how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

The exact alignment depends on the direction of the intersecting axis, which is assumed to run from top to bottom.

• Flex-start: Alignment of the starting point of the cross axes.
• Flex-end: alignment of ends of crossed axes.
• Center: Alignment of the midpoint of the cross axis.
• Baseline: The baseline alignment of the first line of text of the project.
• Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

align-content

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

• Flex-start: Element at the beginning of the container. Stack each line toward the starting position of the elastic box container. The lateral axis starting boundary of the first row of the elastic box container is close to the lateral axis starting boundary of the elastic box container, and each subsequent row is close to the previous row.
• Flex-end: Element at the end of the container. Stack each row toward the end of the elastic box container. The end boundary of the last line of the elastic box container is close to the end boundary of the elastic box container, and each subsequent line is close to the previous line.
• Center: The element is in the center of the container. Stack each row in the middle of the elastic box container. The two lines are closely aligned in the middle of the elastic box container, keeping the distance between the beginning content boundary and the first line of the elastic box container equal to the distance between the end content boundary and the first and last line of the container. (If the remaining space is negative, the rows spill out the same distance in both directions.)
• Space-between: Elements in containers with space between rows. The rows are evenly distributed in the elastic box container. If the remaining space is negative or there is only one row in the elastic box container, this value is equivalent to ‘flex-start’. In other cases, the side start boundary of the first row is close to the side start content boundary of the elastic box container, the side end boundary of the last row is close to the side end content boundary of the elastic box container, and the remaining rows are arranged in a certain way in the elastic box window to keep the space between the two pairs equal.
• Space-around: Elements in a container with white space before, between, and after each row. The rows are evenly distributed in an elastic box, with each end retaining half of the spacing between the child elements. This value is equivalent to ‘center’ if the remaining space is negative or there is only one row in the elastic box container. In other cases, the rows are arranged in an elastic box in such a way that the space between the two is equal, and the space in front of the first row and behind the last row is half the other space.
• Stretch (default) : Elements are stretched to fit the container. The rows will stretch out to take up the remaining space. If the remaining space is negative, this value is equivalent to ‘flex-start’. In other cases, the remaining space is bisected by all rows to increase their side-axis size.

Attribute of item

order

The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.

flex-grow

flex-growProperty defines the scale of the project, which defaults to 0, or no scale if there is any spare space. If all projects have a Flex-grow property of 1, they divide the spare space equally, if there is any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

flex-shrink

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property

flex-basis

The Flex-basis property is used to set or retrieve the elastic box scaling reference value. Defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

It can be set to a unit of length or a percentage that specifies the initial length of a flexible project.

div:nth-of-type(2) {
    flex-basis: 80px;
}
Copy the code

flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional. This property has two shortcut values: auto(1 1 auto) and None (0 0 auto).

It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.

align-self

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

This property may take six values, all identical to the align-items property except auto.

• Auto: default value. The element inherits the align-items property of its parent container. “Stretch” if there is no parent container.
• Stretch: Elements are stretched to fit the container. If the attribute that specifies the size of the side axis is ‘auto’, this value makes the size of the margin box of the project as close to the size of the row as possible, but follows the limits of the ‘min/max-width/height’ attribute.
• Center: The element is in the center of the container. The elastic box element is centered on the lateral axis (vertical axis) of the row. (If the size of the line is smaller than the size of the elastic box element, the same length will overflow in both directions).
• Flex-start: Element at the beginning of the container. The boundary of the starting position of the lateral axis (vertical axis) of the elastic box element is immediately adjacent to the starting boundary of the lateral axis of the row.
• Flex-end: Element at the end of the container. The boundary of the starting position of the lateral axis (vertical axis) of the elastic box element is immediately adjacent to the lateral end boundary of the row.
• Baseline: The element is at the baseline of the container. This value is equivalent to ‘flex-start’ if the inner and side axes of the elastic box element are the same. In other cases, this value will participate in baseline alignment.

Layout skills

Single row layout

Set width or max-width and margin:auto;

Two column & three column layout

The three-column layout is characterized by fixed width on the left and right sides and adaptive width on the middle column.

1.float + margin

Float the two sidebars left and right, creating a three-column layout by setting margins for them on the main sidebar in the middle

.left{
    float: left;
    width: 200px;
}
.right{
    float: right;
    width: 200px;
}
.main{
    margin-left: 220px; /* Set aside two columns */
    margin-right: 220px;
}
Copy the code

Just set a float to get a two-column layout

2.position + margin

The three-column layout can be achieved by setting position to Absolute for both sidebars, then setting left to 0 for the left column, right to 0 for the right column, and margin for the main column to leave space for the sidebar.

.left{
    position: absolute;
    left: 0;
    width: 200px;
}
.right{
    position: absolute;
    right: 0;
    width: 200px;
}
.main{
    margin-left: 220px;
    margin-right: 220px;
}
Copy the code

Also, changing the positioning element to a single one results in a two-column layout.

The holy grail layout

• All three are set to float left.
• Set the width of main to 100% and the width of the side columns.
• Set negative margin, left set negative left margin to 100%, right set negative left margin to negative width of itself.
• Set the padding of main to leave space for the left and right subpanels.
• Sets the two subpanels to be positioned relative to each other, with the left column having a negative self-width and the right column having a negative self-width.

 <div class="container">         
    <div class="main"></div>        
    <div class="left"></div>        
    <div class="right"></div>  
</div>
Copy the code

.main{
    float: left;       
    width: 100%;   
}
.left{     
    float: left;        
    width: 200px;        
    margin-left: -100%;               
    position: relative;  
    left: -200px; 
}
.right{
    float: left;        
    width: 300px;        
    margin-left: -300px; 
    position: relative; 
    right: -300px;  
}
.container {        
    padding: 0 300px 0 200px;   
}
Copy the code

Implementation method of two columns:

For a two-column layout with a sidebar on the left, remove right and leave the padding-right value of the main panel unset.

Twin wing layout

The twin wing layout is similar to the Holy Grail layout in that both use floating and negative margins, but the twin wing layout adds a div layer to the main column and sets margins to accommodate the sidebars. The negative margins of the two sidebars are relative to the outer div, so the margin of main does not affect the two sidebars. This omits relative positioning after the sidebar is pulled to the main row (because the white space for the wings layout is in the parent element’s content area, and the White space for the Grail layout is outside the parent element’s content area).

<div class="wrapper">
      <div class="main"></div>
</div>
<div class="left"></div>        
<div class="right"></div>
Copy the code

.wrapper {        
    float: left;       
    width: 100%;
}  
.main {    
    margin: 0 300px 0 200px;
}
.left {       
    float: left;        
    width: 200px;        
    margin-left: -100%;   
}   
.right {        
    float: left;        
    width: 300px;        
    margin-left: -300px; 
 }
Copy the code

• The grail uses padding, while the twin wings use margin, which solves the problem that the minimum width of the Grail layout main should not be smaller than the left sidebar. Dual wing layout does not set the relative layout, and the corresponding left and right values. Simply put, “The twin wing layout creates one more div than the Grail layout, but no relative layout”.
• If relative layout is introduced, various combinations of the three-column layout can be achieved. For example, position: relative is set to the right column. left: 200px; , can achieve left+right+main layout.

Implementation method of two columns:

If it is a two-column layout with a sidebar on the left, remove the right sidebar and do not set the margin-right value of the main-wrap. And vice versa.

Flex layout

Flex, short for Flexible Box, is used to provide maximum flexibility for boxed models. In addition to poor compatibility on the PC side, there are no major defects, mostly used for mobile layout.

.layout {
    display: flex;
}
.main {
    flex: 1;
}
.aside {
    width: 200px;
}
Copy the code

The center method is commonly used

margin: auto;

This is a very common way of centering, where the element takes up the width you specify, and then the remaining width is split into left and right margins. The problem, however, is that browsers display horizontal scrollbars when the browser window is narrower than the width of the element.

Using max-width instead of width in this case allows the browser to handle small Windows better. This is especially important on mobile devices

Centering is common in layouts. Let’s assume that the DOM document structure looks like this, with child elements centered in their parent:

<div class="parent">
    <div class="child"></div>
</div>
Copy the code

Horizontal center

• Text-align :center; text-align:center
• Child elements are block elements of fixed width: set left and right margin values to Auto;
• Set the child element to display:inline, and then set text-align:center on the parent element.
• Common solution: Flex layout, display:flex; justify-content:center;

Vertical center

Vertical centering is different for single-line inline text, multi-line inline text, and block elements.

• The parent element must be a single line of inline text: set the height of the parent element to the line height line-height
• If the parent element is certain, the child element is multiple lines of inline text: Set the display:table-cell or inline-block of the parent element and then set vertical-align:middle.
• Position :absolute and set top and bottom to 0. The parent element must be set to static. Margin :auto;
• Common solution: Flex layout, set the parent element {display:flex; align-items:center; }.