CSS box model
****** a box is composed of the following parts:
1, the contents of the box ---- Content
2, the box border ---- border
between 3, the content of the box border distance, called the filling ---- padding, padding (the patch)
the distance between the 4, when the presence of a plurality of boxes, the box and the box, called the boundary ---- margin, from the outside (outer patch)
***** where the actual width of the box as an example left and right boundaries + = left + right and left borders filled
****** CSS box correlation properties
[1], the content attribute: width = width of the content itself, the content itself high = height
[2], the filling property: the distance between the content and the boundary padding
***** when defining the width of the box, taking into account, the filling frame, boundaries exist
if the increase of the packed, the value of the entire width of the box, subtract again, you increase the value of the packed
***** future in the use of margins, pay attention to the browser compatibility issues
****** zero except in the case of All non-zero values should add units
****** Since each tour is there, inside and outside the margin, defaults, Not the same as
we need to be the default browser for all internal and external margins are calculated from scratch.
In practice, do not use the * {margin: 0; padding: 0;}, but the least efficient
so we are used which elements, put the default value which elements of zero.
css properties, although there are inherited characteristics, but not all properties are inherited
The W3C recommends s for all images on the page are placed in a box (box), a box model ------
designers can customize to control the properties of the box by creating these objects include paragraphs, lists, title , and image layer <div>
main box model defines four regions: the content (content), filler (padding), the border (border) and a border (margin)
border here we also call: an outer frame, an outer patch; filled also known as: padding, inside patch
The entire width of the page box model is occupied by the
left border left border + padding + left + right + content + padding + right border right border
Pile out of the box by the page layout
CSS control element size
set width of the element width: 100px;
setting height of the element height: 100px;
element is set in one direction from the outer margin-top / right / bottom / left: 10px;
number notification parameter does margin: 10px; four vertical and horizontal directions
with the set of elements margin: 10px 20px; vertical and horizontal
margins margin: 10px 20px 30px; on the left
margin: 10px 20px 30px 40px; left and right lower
element is set within the frame padding: left and right lower