What file is box in css

Box in css refers to the CSS box model, that is, Box Model; in CSS, the term "box model" is used in design and layout; the CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include margins, borders, padding and actual content.

#The operating environment of this tutorial: Windows 7 system, css3 version, Dell G3 computer.

Tutorial recommendation: css video tutorial

What file is the box in css?

The box in css refers to CSS Box Model

All HTML elements can be regarded as boxes. In CSS, the term "box model" is used in design and layout.

The CSS box model is essentially a box that encapsulates surrounding HTML elements, including: margins, borders, padding, and the actual content.

The box model allows us to place elements in the space between other elements and the surrounding element's border.

The following picture illustrates the Box Model:

Explanation of different parts:

Margin (margin) - The area outside the border is cleared and the margins are transparent.

Border (border) - the border around the padding and outside the content.

Padding (Padding) - clears the area around the content and makes the padding transparent.

Content (content) - the content of the box, showing text and images.

In order to correctly set the width and height of elements in all browsers, you need to know how the box model works.

Element Width and Height

Remark Important: When you specify the width and height properties of a CSS element, you are only setting the width and height of the content area. Be aware that to fully size an element, you must also add padding, borders, and margins. .

The total width of the elements in the following example is 300px:

Example

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Running result:

Let’s do the math ourselves:

300px (width)

50px (left and right padding)

50px (left and right borders)

50px (left and right margins )

= 450px

Just imagine, you only have 250 pixels of space. Let's set the total width of the element to 250 pixels:

Example

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Running effect:

The final element's total width calculation formula It is like this:

Total element width = width left padding right padding left border right border left margin right margin

The final calculation formula of the total height of the element is like this:

Total element height = height top padding bottom padding top border bottom border top margin bottom margin

Browser compatibility issues

Once the appropriate settings are set for the page DTD, most browsers will render the content as shown above. However the rendering in IE 5 and 6 is incorrect. According to W3C specifications, the space occupied by an element's content is set by the width attribute, while the padding and border values ​​around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard models in weird mode. The width property in these browsers is not the width of the content, but the sum of the widths of the content, padding, and borders.

Although there are ways to solve this problem. But the best solution right now is to avoid the problem. That is, instead of adding padding with a specified width to an element, try adding padding or margins to the element's parent and child elements.

IE8 and earlier IE versions do not support setting the padding width and border width attributes.

To solve the incompatibility problem of IE8 and earlier versions, you can declare on the HTML page.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of What file is box in css. For more information, please follow other related articles on the PHP Chinese website!