Shulou(Shulou.com)06/03 Report--

CSSBoxModel box model of how to use the margins, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

The box model consists of the following CSS attributes:

0. Content (content)

1.padding inside margin

2.border border

3.margin outer margin

Here is the most common example, where dotted lines are not part of the box model and are used to identify ranges.

CSS Code copies content to the clipboard

.box {

Width: 200px

Height: 200px

Background-color: green

Padding: 20px

Border: 5px solid red

Margin: 50px

}

Explicit effect:

You can view the box model using developer tools such as Chrome (Ctrl + Shift + j) or Firefox's firebug:

I made some simple marks, and the black box solid line, like the outermost dotted line, is for identification, not for the style set:

We can see that the content width and height of div are all 200px. Set the inner margin padding to a block or inline-box element, and the inner margin will affect some CSS elements. For example, the background will also be explicitly on the padding.

The red one is border, and the border element does not count as the element content, which means there is no way to get the background and so on.

Margin elements are generally invisible and cannot be colored, etc. Margin is often used to separate some distance from other elements.

Changing the size of the border through DOM, or explicit border, will change the size of the element and may disrupt the layout. CSS also has an attribute outline, which is similar to border and can also be used as a border, but unlike border, it is drawn on the content and does not change the size of the box. Outline is not supported in IE7 and earlier versions.

External data superposition

There is another special thing about the box model, that is, the adjacent outer edges will be superimposed according to the encounter, and the largest one will be taken as the final outer edge.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.