Box model: a box divided into margins padding and border outside the border area content within the content from the margin
Box size = + content padding + border region
Border border:
border-width: 10px 20px 30px 40px are left on the lower right upper left 10 20 30 10 20 vertical
border-style: solid solid line dotted border dashed dotted broken line. border-color: the color of these three attributes is provided indispensable
borer: 10px red solid; width border color can be provided, while four borders, no sequence requirement
May be provided the parameters are set -top -bottom -left -right you may then simultaneously provided to a separate frame
Padding padding: refers to the distance between the border region and the contents of the box, the four directions, the influence of the size of the visible frame
Parameters -top -bottom -left -right
padding: 10px 20px 30px 40px are left on the lower right upper left 10 20 30 10 20 vertical
Margin margin: refers to the distance between the box and the other box, the box will not affect the size of the visible, but affect the position of the box
The horizontal direction is centered auto cassette
Vertical overlapping margins, two adjacent outer margin of siblings is made maximum, and not taking
Sons outer vertical distance if the neighboring elements, the outer sub-element to the parent element is passed from the
overflow: hidden; overlap solution
Clear the browser's default style: * {padding: 0 margin: 0}
Box model inline elements: inline elements not provided the width and height may be disposed in the horizontal direction of the padding and border, but does not affect the vertical support
Layout Margins only support horizontal direction
display: block type element to a predetermined line within a block element into the inline display the display elements block elements into line
inline-block row within the block width and height may be provided on a separate line is not
none does not display this element and it will not continue to occupy a position in the page
visibility: hidden specifies whether the element is visible but does not display this element occupies a position
overflow: You can set how to handle parent element overflowing content
Trim hidden content cut off invisible elements overlap can solve his son
scroll browser displays scroll bars to view the rest of the scroll bar on the right bottom of the display
Intelligent auto add scroll bars
Document flow: page = Document every page is a document page is a multi-layered structure we see is the top layer is document flow
The most basic elements of a layer created by default in the document flow block element will only be on a separate line width in the flow of the document default is the parent element of one hundred percent
Height is softened by the content.
Float: float: left; right; from the document stream when set to a floating element, the element or from the document flow element immediately below him move up
Only the parent element to the edge of the floating by the floating elements can block row sideways, if the upper float element is not a floating block that floating elements do not exceed
The upper block floating elements do not exceed a maximum flush with the upper side siblings
FIG text about: floating elements are not surrounded by automatically covered Text Text
Floating inline elements: inline elements disposed departing from the document flow are wide and high active content softened