28. Front-end CSS box model and standard document flow

1. Box model

The term "box model" is used for design and layout, and then basically shows some square boxes in the Web page. We call this box a box model.

There are two types of box models: Standard Model and IE model. Here the emphasis is on the standard model.

Box Model:

Box Model properties:

Width : breadth of content

Height : How high the content is

padding: padding, border-to-content distance

border: The border is the width of the box

margin: The distance from the box border to the nearest box nearby

Basic wording:

<! DOCTYPE html>"en">"  UTF-8">    <title>Document</title>    <style>        div{            width: 100px;            height:100px;            padding:100px;            line-height:100px;            Text-align:center;            Margin-left:100px;            Margin-top:200px;            border:1px solid red;            Color:yellow;        }     </style>
Style:
Box model calculation:
The true width of the box =width+2*padding+2*border
The true width of the box =height+2*padding+2*border
1.1 Internal margin settings (padding)
The padding has four directions, describing padding in 4 directions respectively. Use the Fill property alone to change the padding around the top and bottom
padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;
Shorthand method:
/* upper Right lower left */padding:20px 30px 40px 50px; /* On the left/right  bottom/padding:20px 30px 40px; /* up or down */padding:20px 30px;             /* up or down */padding:20px;
Note: Some tags default to padding, such as the UL tag, with the default Padding-left value. Generally in the station, is to clear the page label default padding and margin so that we better to adjust the position of the element.
Here we need to use a wildcard selector:
*{  padding:0;  margin:0;    }
But this efficiency is not too high, we want to use the set selector to select the page should be the label, you can refer to the link https://meyerweb.com/eric/tools/css/reset/
1.2border Settings (Border)
border has three features: thickness linear style color
If the color is not written, the default is black. If the thickness is not written, the border is not displayed. If you write only a linear style, the default has a width of up and down 3px, solid style, and a black border
border:3px solid red; # or border-width:3px;border-style:solid;border-color:red; /*Border-width:5px 10px;border-style:solid dotted double dashed;border-color:red Green yellow; */
Note: Here the upper and lower left and right borders can also be set separately
Use border to make a small triangle:
# no transparent here will have black shadows on either side, transparent used to specify the full transparent color  div{            width:0;            height:0;            Border-bottom:200px solid red;            Border-left:200px solid transparent;            Border-right:200px solid transparent;        }
1.3margin settings (margin)
/* indicates that the outer distance of four directions is 20px*/margin:20px; /* Indicates that the box moves down 30px*/margin-top:30px; /* Indicates that the box moved to the right 50px*/margin-left:50px; /* Indicates that the box moved upward 100px*/margin-bottom:100px;
Box Center Application:
margin:0 Auto;
2. Standard document Flow
The phenomenon of standard document shedding:
1. Blank folding Phenomenon
Multiple spaces are merged into a single space to display in the browser page. IMG Label Wrap write. Will find a gap between each picture, if you write an IMG tag in one line, it solves this problem, but we do not write our HTML structure. This phenomenon is known as a white-space folding phenomenon.
2. The height is not aligned, the bottom is aligned
Text and the size of the picture, will make our page elements appear tall and uneven phenomenon, but in the browser to view our page always find the bottom of the alignment
3. Automatic line wrapping, a line of dissatisfaction, line-writing
If you write text in one line and there is too much text, the browser will automatically wrap it to show our text.
28. Front-end CSS box model and standard document flow