search

Home >Web Front-end >Front-end Q&A >What is the difference between the two box models in css3

What is the difference between the two box models in css3

青灯夜游
青灯夜游Original
2022-02-28 14:10:593712browse

Difference: 1. The width and height of the standard box are the width and height of the content area, while the width and height of the weird model refer to the width and height of the "content area border padding"; 2. The standard box increases the content area Margins, borders, and margins don't affect the size of elements, while weird models do.

What is the difference between the two box models in css3

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

The box model includes content (content), padding (inner margin), border (border), and margin (outer margin)

There are two box models in CSS, namely W3C Standard Model and IE Weird Model.

Introduction: 

<!DOCTYPE html>  
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

8b05045a5be5764f313ed5b9168a17e6 Declares the parsing type of the document, so how important is it
Parsing type:
BackCompat: Weird mode , the browser's own mode
CSS1Compat: Standard mode, W3C standard parsing and rendering page
If no declaration is made, it will be rendered according to the weird mode. Different browsers render differently

1. Standard Model


W3C Standard Model

When we set the width and height of an element At that time, the standard box model only set the width and height for the content (blue part), then the real width and height of this element would also include its padding (inner margin), border (border), and margin (outer margin).

Formula:

  • width = width of content

  • height = height of content

2. Weird model


Weird model

When we set the width and width of an element height, the weird box model treats the entire box as a whole. Give the entire box a width and height. If you also set additional margins and borders to the box. Then the blue part of the content in the middle will be squeezed and become smaller.

Formula:

  • width = border padding The width of the content

  • height = The height of the border padding content

The main difference between the W3C standard model and the IE weird model is the width and height of the box.

①The width and height of the standard box represent the width and height of the content, width=width of content, heigth=height of content; increasing inner margins, borders and outer margins will not affect The size of the content area, but increases the overall size of the element box.

②The width of the weird box includes padding, content width, and border. height contains the height, border, and padding of the content

width=（border-left padding-left width of the content padding right border right）

height=(border-top padding-top height of the content padding-bottom border-bottom)

Summary:

1. Standard box model: only set the size of the content. IE box model: Treat the entire element as an overall set size.

2. The box model of css is composed of content, padding, border, and margin. But the size of the box is determined by the content padding and border parts, without adding margin.

3. When writing page code, we should try to use the standard W3C model (the DOCTYPE type needs to be declared in the page), so as to avoid the incompatibility of multiple browsers on the same page.

Because if the DOCTYPE type is not declared, the IE browser will interpret the box model as the IE box model, and FireFox will interpret it as the W3C box model; if the DOCTYPE type is declared in the page, all browsers will Will interpret the box model as the W3C box model.

(Learning video sharing: css video tutorial, web front-end)

The above is the detailed content of What is the difference between the two box models in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What are the methods to implement multi-column layout in css3Next article：What are the methods to implement multi-column layout in css3

Related articles

See more