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

Most people don't understand the knowledge points of this article "What are the differences between the two css3 box models", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "What are the differences between the two css3 box models".

Differences: 1. The width and height of the standard box refer to the width and height of the content area, while the width and height of the strange model refer to the width and height of the "content area +border+padding";2. Adding margins, borders and margins to the standard box will not affect the size of the element, while the strange model will.

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

Box model includes content, padding, border, margin

CSS has two box models, the W3C standard model and the IE weird model.

Introduction:

Document

Declare the parsing type of the document, so how important is it?

Resolution Type:

BackCompat: Weird mode, browser's own mode

CSS1Compat: Standard mode, W3C standard parse rendering page

If you don't make a declaration, render in weird mode. Different browsers render differently.

I. Standard Model

W3C standard model

When we set the width and height of an element, the standard box model only sets the width and height of the content(blue part), so the true width and height of the element are added to its padding(margin)border (margin).

Formula:

width = width of content

height = height of content

2. Weird model

weird model

When we set the width and height of an element, the Weird Box model treats the box as a whole. Give the whole box a width and height. If you add extra 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 + width of content

height = border + padding + height of 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 the content, height = height of the content; increasing the padding, border and outer margin will not affect the size of the content area, but will increase the total size of the element box.

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

width= border-left+padding-left+ width of content +padding+right+border+right

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

The above is the content of this article about "what are the differences between the two css3 box models". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge, please pay attention to the industry information channel.

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.