The full text summary

1 Web Layout

A web layout describes how the browser arranges the elements of a web page. At present, there are three front-end layout schemes:

  • Traditional layout scheme (standard flow, floating flow, positioning flow)
  • Flex layout Scheme
  • Grid layout scheme

2 standard flow

2.1 understand

  • Standard stream is also called normal stream.
  • Elements in a standard stream are automatically arranged from left to right and from top to bottom.
  • It is mainly divided into two plates, one is block-level element, the other is inline element.
  • Block-level elements occupy a single row, arranged horizontally until the row is full and then wrapped.

2.2 Classification of elements

According to the layout characteristics of elements, they can be divided into three types: block-level elements, in-line elements and in-line block elements.

2.21 Block-level elements

  • Exclusive row (width defaults to 100%, height to 0)
  • Wide, high, inside and outside margins can be set
  • Common block-level elements: div H1-H6 ul OL Li DL dt DD form P

2.22 Inline elements

  • Width and height depend on the content of the open, a row can be put more than one
  • You can’t set the width and height, like a rubber band around the word
  • Common inline elements: SPAN a B strong I em ins del U

2.23 Inline block elements

  • Width and height depend on the content of the open, a row can be put more than one
  • Wide, high, inside and outside margins can be set
  • Common inline block elements: Img input A

Note: When inline elements and blocks are arranged horizontally, there is approximately 6px space between them. This is due to white space characters (newlines, Spaces, or tabs) between the elements.

3 float flow

3.1 understand

  • Semi-detached from the standard flow of typesetting
  • Mainly used for horizontal layout of web pages
  • After the element Settings are floated, the width and height Settings take effect, defaulting to the upper left row of the current containing block, or below the element if there are block-level elements in front of it
  • Flaot :left float:right float:right float:right

3.2 the characteristics of

  1. Float: Element boxes float, floating on top of other standard boxes
  2. Leakage: The original position of the floating box leaks to the standard flow box
  3. Special note: floating boxes need to be used with their parent boxes first. In fact, it is important to note that floating allows element display patterns to be represented as inline block properties

3.3 Arrangement Mode

3.31 The first box floats

<head>
<meta charset="utf-8">
<title>First box float - sub case</title>
<style>
.son1{
    width: 200px;
    height: 100px;
    background-color: pink;
    float:left;
}
.son2{
    width: 200px;
    height: 100px;
    background-color: aquamarine;
}
</style>
</head>
<body>
    <div class="son1"></div>
    <div class="son2"></div>
</body>
Copy the code
  • The two boxes are the same width and height. The first box floats and only the first one can be seen

  • The two boxes are different in width and height, the first box floats, the first box width and height > the second box, only the first box can be seen

  • Second box width height > first box, you can see the overflow of the second box

3.32 The second box floats

The first box has a row, and the second box has a row

<head>
    <meta charset="utf-8">
    <title>The second box floats</title>
    <style>
    .son1{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .son2{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        float:left;
    }
    </style>
</head>
<body>
    <div class="son1"></div>
    <div class="son2"></div>
</body>
Copy the code

4 Clearing floats

4.1 Why do I want to clear floats?

If SON1 and son2 float, the floating element doesn’t have position, the parent doesn’t have height, and then the following element will come up.

4.2 nature

  • The main reason for clearing floats is to solve the problem of the parent element having an internal height of 0 due to child floats.
  • To clear the float is to circle the float box inside and make the parent box close the exit so that they do not come out and affect other elements.
  • Essence: Closed float

4.3 Clearing floating methods

4.31 Pseudo-element cleanup float

Give all floating element parents a clearFix class name. When an element needs to be cleared of floating, set the clearFix class name

Representative websites: Baidu, Taobao, netease, etc

.clearFix::after{
    content:"";  /* Must have the content attribute. The content is empty */
    display: block; /* Must block label to clear float */
    clear: both; /* Clear float */
    height: 0;/* A height of 0 takes up no space */
}
/ * compatible with ie * /
.clearFix{  
    *zoom:1; 
}
Copy the code

4.32 Double pseudo-element clear float

Representative websites: Xiaomi, Tencent

.clearfix::before..clearfix::after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
/* IE6 7 specifically clears floating styles */
.clearfix {
	*zoom:1;
}
Copy the code
  • Advantages: Consistent with semantic structure
  • Disadvantages: complex writing method, need to be compatible with IE

How does the clear property clear floats? The Settings element prevents floating elements from appearing on its left, right, or even both sides

4.33 Set Overflow: hidden to Parent

  • Advantages: simple writing, good compatibility
  • Disadvantages: Contents or elements hidden outside the parent element

Add an empty tag to the end of the float element

  • Advantages: simple writing, good compatibility
  • Disadvantages: increased structural burden, code redundancy

There are two float cases that do not need to be cleared:

  1. The parent box itself has height
  2. The parent box itself has a float property (parent element BFC)

5 positioning flow

Float is multiple block-level elements displayed on the same line, and positioning is primarily a concept of cascading.

5.1 Application Scenarios of Positioning

  • Shuffling figure
  • Click on the qr code to hide the effect
  • Type outside advertising
  • The drop-down menu

5.2 classification

5.21 Relative Positioning

  • Placeholder positioning is not off – scale
  • Reference point: self position

Often used on floating elements to allow a placeholder float to overflow the parent box, adjusting one or two pixels above and below the float.

5.22 Absolute Positioning

  • Completely off scale without occupying
  • Reference point: The parent element closest to itself that is set (absolute, relative, fixed)
  • The parent element has no location and the default reference point initially contains the block
  • Inline elements with fixed and absolute positioning are converted to blocks

The initial contains block – a transparent rectangle of the same height and width as the viewport provided by the browser manufacturer, but not the viewport, which visually can be understood as the four corners of the first screen of the browser.

5.23 Securing the Location

  • The reference point is always the browser window
  • Completely off scale without occupying

5.3 Hierarchy of Positioning

  • The positioning hierarchy is determined by the parent element, and the last parent element, along with its children, is written on top of the first element and its children
  • When the parent element does not have a hierarchy, the height of the child element determines whether it overwhelms other elements and children.

conclusion

This article ends here, because my experience level is limited, unavoidably will have the flaw, welcome to correct this. Writing is not easy, behind the continuous output is the accumulation of countless days and nights, your praise is the power to continue writing, thank you for your support!