Standard CSS box model concept
in CSS, CSS is assumed that all of the HTML document element generates a description of a rectangular box element of the elements in an HTML document layout space occupied, you can vividly see it as a box. CSS had a concept of a "box model" around these moments boxes, by defining a set of attributes associated with the box, can greatly enrich and promote the effectiveness and performance of each box and the whole layout of the HTML document. For an element of the box, without special settings, the default is always accounted for on a separate line, the width is the width of the browser window, the element before and after the box or not, can only be arranged on top of it or below, i.e., the accumulated sequentially arranged vertically. HTML documents each box can be seen as composed of four parts from the inside to the outside: the content area (content), the inner edge (padding), the border (border) and margins (margin). CSS defines a set of related properties into four parts, by setting these properties can be rich and expressive effect of the box. FIG model as follows: the whole box by the content area (content), the padding (padding), the border (border) and margins (margin) adding the composition.
Standard CSS box model composition
Content area (content)
content area is the center of the box model, which presents the main content of the box, the content can be text, images and other types. Content area has three attributes, width, height and overflow. Uses width and height attributes to specify the width and height of the box content area, when too much information content, content within a range outside the zone can be used to specify a property overflow overflow processing method. When the attribute property is hidden overflow, the overflow portion will not be visible; when visible, visible overflow content information, only to be presented on the outside of the box; When in Scroll, scroll bar is added automatically to the box, the user you can display the content information by pulling the scroll bar; when to auto, the browser will decide how to handle the overflow section.
Padding (padding)
Padding is the space between the content area and borders. There are five filling properties, namely padding -top, padding -bottom, padding -left , padding-right combination of fast and filling directions above four attributes padding. Use these five attributes can specify the distance between the information content of each content area and direction of the border. When setting the background color attributes box, the background color can extend into the fill area.
Border (border)
border around the content area is filled and a boundary. Border of the property there are border-style, border-width and border-color and combination of fast border attribute more than three properties. Border-style property which is the most important property of the border, if no border style, the other border properties are ignored, the border does not exist. CSS predetermined dotted line (dashed), the solid line (Solid), etc. nine kinds of border styles. Using border-width attribute specifies the width of the border, which may be the length of the attribute value measurement value may be a predetermined CSS thin, medium and thick. Using the border-color property to specify the appropriate color for the border, its property values can be RGB values can be defined 17 CSS color names, it can be English words color words. When setting the above three properties border, the border may be performed four directions integrally quick setting, it can also be designed to set the four directions, such as border: 1px solid #ffffff; or border-top-style: solid; , border-left-color: yellow ;, border-lright-width: 10px; like.
Margins (margin)
margins i.e., the outermost margins, located in the outermost periphery of the box, is added in the space around the outside of the border. Margin between not make a compact box connected together, is a common means of CSS layout. There are five blank side of the property, that margin-top, margin-bottom, margin- left, margin-right as well as a combination of the above four kinds of shortcuts outside direction away from the property margin, the specific set up and use the fill properties similar. For two (horizontal or vertical), and provided adjacent to the boundary box blank, adjacent to their outer portion from both sides of the gaps will not be summed, but both union. If the values of both the adjacent margins of varying sizes, both in a large value is taken. Meanwhile, CSS allowing negative value to specify margins attribute, when outside the specified negative value, the specified whole box will move in the opposite direction a negative direction, this effect can produce overlapping boxes. Using the method specified margins can be positive or negative element in the mobile web, which is an important method of CSS layout techniques.
Use standard CSS box model
Padding (padding) Usage
1: padding is inside the box, between the box and the content.
2: The effect of padding: controlling the positional relationship between the child within a parent element inside.
3: padding box will stretch.
4: If you want to maintain the original size of the box: the aspect on the basis of the subtracted (if a content element is stretched, there is no set width and height, padding directly distraction not have to cut.)
5: if the Add a direction padding, i.e., padding-top / bottom / left / right and down about
6: padding disposed characteristics:
padding: 30px; right lower left
padding: 10px 30px; up and down
padding: the upper left 30px 50px 10px
padding: 10px 30px 50px 100px on the right lower left
7: padding will not affect the position of the background image.
Margins (margin) Usage
1: margin at the periphery of the element, the size of elements does not stretch
2: action: to control the spacing between elements and element.
3: adding to a single direction margin
margin-left / right / Top / bottom
. 4: margin setting method:
margin: 30px; right lower left
margin: 10px 30px; vertical and horizontal
margin: 30px 50px left under the 10px
margin: 10px 30px 50px 100px on the right lower left
5: margin: 0 auto; let the current element is centered around the parent element inside.
6: bug margin often appear
1): margin values of two vertically adjacent elements superposed in accordance with the larger value is not set.
2): If the parent element and the case where no floating of the first subelement, the first subelement added to marginTop, incorrectly placed on top of the parent element.
Borders (border) Usage
1: border is a border element to change the size of the original elements of
2: Role: to elements plus a border.
3: a single direction to add border
border-left / right / Top / bottom
. 4: border attribute border-color / style / width Border Color / Style / width
5: border setting method:
border-Top / right / bottom / left-style :; right lower left border style
border-top / right / bottom / left-width:; left border width on the lower right
border-top / right / bottom / left-color:; right lower left border color
border-top / right / bottom / left: red solid 1px; upper / right / lower / left border color red solid line 1 pixel property value, regardless of the order of four vertical and horizontal directions has
border: red solid 1px; solid line border color red pixel property values order alphabetical order up and down four directions
