[Reprinted] CSS Box Model

 

The box model is a concept generated when CSS was born. For most objects in a webpage, the actual presentation form is a box-shaped object (Block object ), for this basic and important concept, as long as you master the size of the box model and the standard technical method of placeholder, You can flexibly control the box model!

  

CSS Box Model

Each element in the web design is a rectangular box.How can I accurately calculate the size of a box? See the following figure:

The distance from the content in the box to the box's border is the padding. The box itself has a border (Border), while there is a border (margin) between the outside of the box and other boxes ).

If you are a firebug user, you will be familiar with the following charts. This chart shows the values that act on any box on the page.

Note that in the above two examples, margin is white and margin is special. It does not affect the size of the box itself, but it will affect other content related to the box, therefore, margin is an important component of the box model.
The size of the box itself is calculated as follows:

Width	Width + padding-left + padding-right + border-left + border-Right
Height	Height + padding-top + padding-bottom + border-top + border-bottom

  

When the value is declared

If no padding or border is declared, the value is zero (when CSS reset is used) or the default value of the browser (probably not zero, especially those form elements that are normally not reset ).

If the width of the box is not declared (and the box is a block-level element), things will become a little weird. Let's take a look at this first, and then look at other excellent information about the box model.

  

Default block-level box width

If the width is not declared and the box is static or relative positioned, the width will be 100% and the padding and border will push inward rather than outward.

If it is determined that the width is 100%, the padding will expand outward.

From this example, we can see that the default width of the box is not 100%, or it may be other values. We should understand this particularly valuable situation, because in many existing situations, it is helpful for setting/not setting the width.

The biggest trouble I 've encountered is the textarea (text box) elements. They need to be set to the desired "Cols" attribute in width and cannot contain child elements. Therefore, it is usually necessary to explicitly set the textarea width to 100%, but when there is padding, it will be extended

The width of textarea. In a fixed-width environment, you can usually set the appropriate pixel value width, but it is not so lucky to increase the width.

  

Absolute positioning box without width

The absolute positioning of a box without a specified width is a little different. Their width only needs to fit the content they contain. Therefore, if there is only one word in the box, the box will be as wide as the word. If it is changed to two words, the width of the box will also increase accordingly.

In this case, the box will continue until the width of the box reaches 100% of the width of the parent element (the parent element or browser window that is relatively located recently), and then the line is broken.
For the box, vertical expansion is natural to adapt to the content contained. It is worth noting that not only does the text on different platforms behave differently, but there are also many quirks when different browsers handle this problem.

  

No-width floating box
The same is true for an absolute positioning box with no width. The width of the box only needs to be extended to the width of the contained content until the width of its parent element (the parent element does not have to be relatively located ). Due to the vulnerabilities of these non-width boxes, we need to learn that they are not dependent on the key task mode, such as the overall page layout. If a floating column is used as the sidebar and you expect the internal elements (slices) to include the width of the package, you are in trouble.

The Inline element is also a box
We have been focusing on the box of block-level elements. It is easy to think of block-level elements as boxes, but inline elements are also boxes. You can think of them as very long and narrow rectangles. They can also have margin, padding, and border like other boxes.

 

It seems a little hard to understand. The left margin shown above pushes the box to the right, but it is valid only in the first line because it is the starting point of the box. Normally, the padding is applied to the upper or lower part of the text. When it is folded, it ignores the padding of the above row and uses the position required by the line-height as the starting point. The transparent background is used to make the effect clearer.

  

With your own eyes

do you want to see each separate "box" that makes up the page? Try to put the Code in the style sheet temporarily:

  *{Border:1px solid red! Important; }
 

 

 

The CSS Box Model
Chinese original: CSS Box Model