Introduction to CSS Box model and example tutorial

CSS Box Model (Box Model)

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for 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 box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:

Description of different parts:

Margin-Clears the border area. Margin has no background color, it is completely transparent

Border-padding and content around the border. The border is affected by the background color of the box

Padding-Clears the area around the content. Is affected by the background color of the fill in the box

Content-The contents of the box, displaying text and images

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

The width and height of the element

Important: When you specify the width and height properties of a CSS element, you simply set the width and height of the content area. To know that full-size elements, you must also add padding, borders, and margins ...

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

width:250px;padding:10px;border:5px solid gray;margin:10px;

Let's figure it out for ourselves:
250px (Wide)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

Imagine that you only have 250 pixels of space. Let's set an element with a total width of 250 pixels:

Instance

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

The formula for calculating the total width of the final element is this:

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

The final formula for the total height of the element is this:

Height of total element = height + top padding + bottom padding + upper border + lower border + top margin + bottom margin

Browser compatibility issues

Once the appropriate DTD has been set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct. According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately. Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border.

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

IE8 and earlier versions of IE do not support padding width and border Width property setting.

Resolve IE8 and earlier incompatibility issues can be declared on an HTML page <! DOCTYPE html> can be.

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial