CSS box model details

The CSS box model is a professional term. But you should not be scared by it, but it is just the application of some basic CSS attributes.

CSS Box Model

WebpageDesignEach element in is a rectangular box.How to accurately calculate the size of the box, please refer:

If you are a firebug user (firebug-sugar and tomato will be used basically for front-end users), 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. Margin is special, it does not affect the size of the box itself, but it will

Affects 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 = self-width + left margin + right margin + Left Border + Right Border

Height = self height + top margin + bottom margin + TOP border + Bottom Border

The value is not declared.

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

Default block-level box width

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

However, if you explicitly set the box width to 100%, the padding will be extended.

The lesson here being that the default width of a box isn't really 100% but a less tangible "whatever is left ". this is particle ly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

Note that the default width of the box is not really 100%, but the remaining value (it should be said that the remaining actual width-sugar with tomato ). You should understand this special value, because in many cases, it is very useful 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 extend the textarea width. 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. Think of them as very long and narrow rectangles. They can also have margin, padding he 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

Would you like to see each separate "box" that makes up the page? Try to put this lineCodeTemporarily put into the style sheet:

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

Original English:The CSS Box Model