CSS Box Model

CSS Box Model
The box model is an important concept in CSS. It is the cornerstone of the CSS visual formatting system. The box model can be used for element locating and webpage layout. According to the CSS box model, each element (whether embedded or block-level) will generate a Rectangular Box centered outside the element content. This box is called an element box. Of course there are other boxes. Here we mainly talk about element boxes. We can easily see that a complete box includes content, padding, border, and margin. Let's talk about these four parts separately. The first is content. As the name implies, it is the content in the box. For example, for a p tag, the text in it is its content. This is well understood, followed by filling padding. We can understand this by adding something around the content. It can be said that if our content is fragile, we often add shock-absorbing materials around it, and then the border is border. This is the border of the box model. As for the border (margin), it is the gap or gap between the box and the box. Although we can use boxes in our life to compare them with our element boxes, they are quite different. That is, the capacity of the box in our reality is fixed, but the box in our CSS is elastic. When the content in our box exceeds the capacity of our box, it can still be installed, and it will automatically hold the box large. But when we give the width and height, the part that exceeds the limit will overflow our box. The overall size of a box includes content, outer margin, inner margin, and border. Content, padding, border, and border margin have their own attributes. The content has the attributes of width and height. For example, we usually set the height and width for the div. In fact, we set the width and height for the content in our content area (of course, this is incorrect in IE6 ). If we do not set it, it will be the default value and adapt according to the content. Fill only has the width and height attributes. According to CSS2.0 padding: length Value composed of floating point numbers and unit identifiers | or percentage. The percentage is based on the width of the parent object. Negative values are not allowed. See length unit description: search for or set the patch on the four sides of the object. For td and th objects, the default value is 1. The default value of other objects is 0. If all four parameter values are provided, the top-right-bottom-left parameters are added to the four sides. If only one edge is provided, all four edges are used. If two are provided, the first is used for top-bottom, and the second is used for left-right. If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom. In IE5.5 +, this attribute supports inline objects. In earlier versions, to use this attribute for inline elements, you must first set the height or width attribute of the object, set the position attribute to absolute, or set the display attribute to block. This attribute is read-only for currentStyle objects. Other objects can be read and written. The corresponding script feature is padding. Border. This attribute is a composite property. We can set the border style, color and width. In CSS3, we can also set border background images. When using border, we should pay attention to the following three points 1. The border is painted on the background of the element; 2. the border of the non-replaceable embedded element has no effect on the Row Height of the element; 3. The border of the replaceable element will affect the Row Height. Finally, we can use a negative value in margin. We should note that 1. The outer margin is always transparent, 2. The element can have a negative margin. When the margin of an element is set to a negative value, the element breaks through the box model of the parent element. 3. The vertical (top and bottom) margin of adjacent block-level elements in the normal Document Stream will overlap. That is, the blank space between two adjacent block-level elements is the larger margin of the two elements, rather than the sum of the two margins. 4. For floating elements, absolute positioning elements, and embedded elements, the vertical margin does not overlap. 5. In CSS2, the horizontal margin does not overlap. 6. For Embedded elements of <span> and other text types, setting the top and bottom margin does not affect the Row Height, when the left and right margins are set, a certain amount of space is reserved before and after the first character of the embedded element. 7. For Embedded elements such as graphics and form input elements, setting the top and bottom margins will affect the Row Height.