On CSS Box model

The "abstract" box model is an important concept in CSS, although the CSS does not have a single Property object, but it is an important part of the ubiquitous CSS. Mastering the principle of the box model and how to use it can greatly enrich the performance of HTML elements, and also greatly help and promote the layout of the whole HTML document. This article attempts to introduce the basic concept of CSS box model and the composition of the elements of the basis, combined with individual learning experience on the actual application of the Web page to talk about their own superficial views and views.
"keywords" box model; performance effect; Web page layout;

CSS is cascading style sheets abbreviation, Chinese meaning is cascading style sheet, it is a definition of HTML, XHTML, XML language written in the Web document presentation layer of the standard. CSS to the various HTML elements in the font, color, border and other aspects of the performance of the effective supplement, is a very useful page element definition rules, Web page creators use CSS can effectively specify and improve the performance of Web content.
CSS assumes that all HTML document elements generate a rectangular element box that describes the space occupied by the element in the HTML document layout, which can be visualized as a box. CSS creates a "box model" concept around these boxes, which can greatly enrich and facilitate the performance and layout of individual boxes and even entire HTML documents by defining a series of box-related attributes.
Some HTML elements are boxes by default, such as Div, p, and others, which are not boxes by default, such as span, a, and so on. We can use the Display property in CSS to change the default not the box element, that is, by declaring it display:block make it a box. In an HTML document, the width of the information content that is not the width of the box's elements is displayed, and they are aligned from left to right in each other until the entire browser window is filled. For a box element, if there is no special setting, its default is always a separate line, the width of the browser window width, before and after the elements of the box can only be arranged above or below it, that is, stacked up and down.

Each box in the

       HTML document can be thought of as being made up of four parts from the inside to the outside, that is, the content area, fill, border, and white edges, as shown in the specific composition. CSS provides a series of related properties for four parts, which can enrich the actual performance of the box by controlling these properties. The following is a brief introduction to the four components of the box model and their respective properties from the inside to the outside. The
content area
       content area is the center of the box model, which presents the main information content of the box, which can be many types of text, pictures, and so on. The content area is a necessary part of the box model, and the other three parts are optional. The content area has three properties, width, height, and overflow. Use the width and Height properties to specify the height and width of the box's content area, which can be either a length measure or a percentage value. There are two main ways to represent space distances in CSS, one is the percentage and the other is the length unit of measure. Percent is the proportion of the length of the specified object relative to its ancestor object. CSS in the length of the unit of measurement is divided into two, one is relative units, commonly used to have EM (current font size) and px (pixels), one is absolute units, commonly used have PT (point) and so on. You can use the overflow overflow property to specify a processing method when there is too much content information to exceed the scope of the content area. When the overflow property value is hidden, the overflow part will not be visible, and for visible, the overflow content information is visible, but is rendered outside the box, and when it is scroll, the scrollbar is automatically added to the box, the user can scroll to display the content information; The browser will decide how to handle the overflow section.
       In the following example, we created two paragraph boxes in an HTML document called the box model example, and added the corresponding text in its content area. First we set the width of the 300px and the height of 50px, in order to show the scope of the box, set a thin black border, its CSS style code and in Microsoft's IE8 browser display as shown in the effect.

Fill
Padding is the space between the content area and the border, and can be thought of as the background area of the content area. There are five types of padding properties, namely Padding-top, Padding-bottom, Padding-left, Padding-right, and a quick fill attribute padding that combines the above four directions. Use these five properties to specify the distance between the content area information content and the border between the parties, with the property value type with width and height. At the same time, through the setting of the box background color property can make the fill part to render the corresponding color, play a certain effect.
To take the example above, we changed the font color to white and added a 20px fill to two paragraph boxes, with its color dimmed to highlight its CSS style code and its display in the browser as shown.

                            &NBSP
Border
    The     border is the boundary around the content area and padding. The properties of the border are Border-style, Border-width, and Border-color, as well as the shortcut border properties border that combine the three class properties. Border Style Property Border-style is the most important property of the border, and, according to the CSS specification, if no border style is specified, the other border properties are ignored and the border does not exist. CSS rules the dotted, doshed, solid and other nine kinds of border style, their respective performance effect. Use the border Width property border-width to specify a specific thickness for the border, whose property values can be length measures or CSS-defined thin, medium, and thick. Use the Border Color property to specify a color for the border, its property value can be an RGB value, or it can be the 17 color name specified by CSS. When you set the above three-type border properties, you can set the border in four directions as a whole, or you can set the specificity settings in four directions, such as Border-top-style:solid, border-bottom-width:10px, Border-left-color:red and so on.
       Let's continue to refine the example above. This time we added a black border of 20px thickness to the two paragraph boxes, the P.a box has a solid-style border style, and the P.b box has a double style. As the IE8 browser will automatically add a certain amount of white space to the box, in order to achieve the most realistic performance, we are here to clear the blank edge. The changed CSS style code and the display in the browser appear as shown.

Blank edges
The blank edge is at the outermost side of the box, and it is not an edge but adds space outside the bounding rectangle. Blank edges make it unnecessary for the element boxes to be tightly joined together, which is an important means of CSS layout. There are five properties of the blank edge, namely Margin-top, Margin-bottom, Margin-left, Margin-right, and the shortcut margin attribute margin which combines the above four directions, and its specific settings and usage are similar to the fill properties. For the two adjacent boxes that have blank edge values, the white edges of their adjacent portions will not be the sum of the two blank edges, but the overlapping of the two, and the larger value of the two adjacent blank edge values, if they are not equal in size. At the same time, CSS allows a negative value to be assigned to a blank edge property, and when a negative blank edge value is specified, the entire box moves in the opposite direction of the specified negative direction, which results in a box overlapping effect. It is an important method in CSS layout technology to use the method of specifying the positive and negative value of blank edge to move the elements in the Web page.
To take the above example, this time we add a blank edge to the two paragraph boxes. The P.a box has a 20px blank edge in all directions, and the P.B uses 40px. Based on the white edge overlap principle mentioned above, the blank edge between the two boxes will be 40px with a larger attribute value, with the final CSS style code and the display in the browser as shown.

The above is a brief introduction to the four components of the box model, and we see that using the relevant properties of the box model can make the content of the HTML document more expressive and more tedious than just using HTML tags.
In fact, the box model has other uses for enhancing the performance of HTML documents. In the past, most of the overall layout of the Web page uses tables, and the use of the CSS box model makes it easy to implement many layout effects, as illustrated by the example of centering the entire HTML document content. There are two main methods of using CSS box model to reach the center of layout object. The first method is to specify the width of the div that contains the entire page content first, and then set its left and right margin properties to auto values. Because most of the current browser to margin auto value is the default is centered processing, so the actual performance is the result of the request. The second method uses the absolute and negative margin values in the CSS, which is to first use absolute positioning left:50% to position the div containing the entire page content in the center of the browser window, and then set its margin-left value to a negative number half the width of the div. This pulls the DIV from the center of the browser window back to the general width, and the actual performance is centered. To take the example above we placed two paragraph boxes in two larger div boxes, respectively, with the CSS style code and the display in the browser as shown in the above two methods.

       in the near phase of learning and practice, I am increasingly aware of the CSS box model open and powerful. By applying a variety of related attributes and adding inspiration and creativity to graphic design, there are countless ways to make an HTML document a good performance. It is worth noting that different browsers support the box model differently, the same browser compatibility mode and the performance of the standard mode is different, I hope that you use the box model to pay attention to this, and constantly try and explore, to explore the box model of greater charm and use.