Day5 distal learning road - and floating box model

• Box model
• Float float

First, the box model

(1) content content area

widthAnd heighta display area frame content - including text box, and other boxes represent nested sub-elements, you can also use min-width, max-width, min-height, max-heightto set minimum / maximum limit of width and height. By default, widthand heightit includes only the width and height of the content area, not including the border, padding, margin. Use box-sizingcan to contain the content, padding, border

box-sizingValue:

/ * Default values, standard box model containing only the content area * /  
Box -sizing: Content- Box;
 / * width and height properties include the content, padding and border, but not margins * /  
Box -sizing: border -box;

If the content area is too large, it will overflow, then you can use overflow

overflow values:

/ * Default. Content will not be pruned, there will be an element outside the box   * /
overflow: visible;
/ * Content will be trimmed, and the remaining contents are not visible   * /
overflow: hidden;
/ * Content will be trimmed, the browser displays the scroll bar to see the rest   * /
overflow: scroll;
/ * Decided by the browser, if the content is pruned, it will display a scroll bar   * / 
overflow: Auto;

 

(2) margin outer border

Margins collapse: the block elements on the outside by the maximum pitch and the bottom margin may be consolidated (or collapsed) to a margins, which take the size of the

1. The combined margin adjacent siblings
2. Parent and first / last child
3. The combined margin empty block-level elements

(3) border border

(4) padding inside the borders

(5) block type

value	Explanation
block	Block block (block box) is defined as the stacking blocks in another frame (e.g.: its contents on a separate line), and can set its width and height, the box until all the applications for the model applies to the frame block (block box)
inline	Inline box (inline box) and the block box is the opposite, which along with the text of the document (for example: it will, and text, and other lines in the surrounding elements appear on the same line, and the same with its contents like a piece of text the text of the disrupted flow) of the line width and height is provided an invalid cartridge, the installation position of padding, margin, and updates the border surrounding the text, but to block surrounding the block (block box) will not be affected.
inline-block	Inline block frame (inline-block box) both set such: it does not re-start a new line but the same as the text to flow around the inner frame image row (inline box), and he can set the width and height, and like the block block block as maintaining the integrity of its properties, it does not disconnect the line in the paragraph.
table	Image processing table layout table as the non-processed elements, instead of abuse HTML <table>; tag to achieve the same purpose.
flex	CSS problems to deal with some long-standing traditional layout problems, for example, arranged a series of elasticity of tolerance or a vertically centered content.
grid	A simple way to achieve given CSS grid system, while it depends on the conventional CSS grid frame is difficult to handle some tricky

Second, the float (float)

(1) multi-column layout floating

• Two-column layout

• Three layout

(2) Clear float

 clear Attributes. When you put this application to an element, it essentially means "floating stop here" - this element and the back of the source elements will not float unless you later in a new floatdeclaration application to another next element.

clear You can take three values:

• left: Stop any activity left floating
• right: Stop any activity of floating right
• both: Stop any active floating around