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

This article mainly introduces the box model of css, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

There are two kinds of css box models, which are: 1, W3C standard box model (standard box model), width and height refer to the width and height of content area; 2, IE standard box model (weird box model), width and height refer to the total width and height of content area, border, inner margin.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Box model

CSS box model is a kind of thinking model used by CSS technology which is often used in web design. The box model (Box Modle) can be used to lay out elements, including inner margins, borders, outer margins, and actual content.

The area in the box

There are five main properties in a box: width, height, padding, border, and margin. As follows:

Width and height: width and height of the content (not width and height of the box).

Padding: inside margin.

Border: border.

Margin: outer margin.

Schematic diagram of the box model:

Code demonstration:

The box above, width:200px; height:200px;, but the real width and height is 302 to 302. This is because padding and border are also added.

Note: width and true possession of width are not a concept! Take a look at the following example.

Standard box model and IE box model

There are two types of box models:

The first is the W3C standard box model (standard box model).

The second IE standard box model (weird box model)

In the knowledge we have learned so far, the standard box model shall prevail.

Standard box model:

IE box model:

The above figure shows:

The CSS box model (Box Model) specifies several ways in which elements deal with elements:

Width and height: width and height of the content (not width and height of the box).

Padding: inside margin.

Border: border.

Margin: outer margin.

The difference between CSS box model and IE box model:

In the standard box model, width and height refer to the width and height of the content area. Increasing the inner, border, and outer margins does not affect the size of the content area, but increases the overall size of the element box.

In the IE box model, width and height refer to the width and height of the content area + border+padding.

Note: Android also has the concept of margin and padding, the meaning is similar, if you know a little Android, it should be easier to understand it. The difference is that there is no such thing as border in Android, and in Android, margin is not part of the control, which I think is more reasonable, hehe.

The tag also has margin.

The label needs to be emphasized. Many people think that the tag occupies the whole area of the page, but it is wrong. The correct understanding is this: the biggest box of the whole page is the browser. It's Donovan's son. The default margin size given by the browser is 8 pixels, which occupies a large part of the entire page, not all. Let's look at a piece of code.

Documentdiv {width: 100pxposition height: 100pxposition border: 1px solid red;padding: 20pxash margin: 30px;} meet each other in your lifetime

In the above code, we set the margins and other information on the div tag. Open the google browser and press and hold F12, and the display effect is as follows:

Know width and height

It is important to know that in the eyes of front-end development engineers, everything in the world is different.

For example, when measuring manuscript paper, the front-end development engineer will only measure the width of the content:

The following two boxes, which really occupy width and height, are both 302 to 302:

Box 1:

.box1 {width: 100px; height: 100px; padding: 100px; border: 1px solid red;}

Box 2:

.box2 {width: 250px; height: 250px; padding: 25px; border: 1px solid red;}

True possession width = left border + left padding + width + right padding + right border

The box models of the above two boxes are as follows:

If you want to keep the true width of a box unchanged, you have to subtract padding when you add width. When you add padding, you have to subtract width. Because it is disastrous for boxes to get fat, it will squeeze other boxes down.

Recognize that paddingpadding areas also have colors.

Padding is the inner margin. The area of padding has a background color, under the premise of css2.1, and the background color must be the same as that of the content area. That is, background-color will populate all areas within the border.

The effect is as follows:

Padding has four directions.

The padding is in four directions, so we can describe the padding in four directions respectively.

There are two methods, the first is to write small attributes, and the second is to write comprehensive attributes, separated by spaces.

How to write small attributes:

Padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px

The writing of comprehensive attributes: (top, right, bottom, left) (clockwise, separated by spaces. The same is true for margin)

Padding:30px 20px 40px 100px

If four values are written, the order is: top, right, bottom, and left.

If only three values are written, the order is: top, right, and bottom. ?? The same as on the right.

If only two values are written, for example:

Padding: 30px 40px

Then the order is equivalent to: 30px 40px 30px 40px

To understand, cascade big attributes with small attributes. For example:

Padding: 20pxt paddingMusi left: 30px

The box model for the padding above is:

The following is written:

Padding-left: 30pxposition padding: 20px

The small attribute of the first row is invalid because it is cascaded off by the big attribute of the second row.

Thank you for reading this article carefully. I hope the article "what are the box models of css" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.