The box model is an important concept in CSS. Only by understanding the box model can the layout be better. In fact, there are two types of box models: the IE box model and the standard W3C box model. They have different interpretations of the box model. Let's take a look at the familiar standard box model:
We can see that the range of the standard W3C box model includes margin, border, padding, and content, and the Content Part does not contain other parts. IE Box Model
We can see that the IE box model also has the range of margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and pading. For example, if the margin of a box is 20px, border is 1px, padding is 10px, content is 200px, and height is 50px, the location of the box is: width: 20*2 + 1*2 + 10*2 + 200 = 262px, height: 20*2 + 1*2*10*2 + 50 = pixel PX, the actual size of the box is: width: 1X2 + 10x2 + 200 = 222px; Height: 1X2 + 10x2 + 50 = 72px; if the IE box model is used, the location of the box is 20*2 + 200 = 240px, 20*2 + 50 = 70px, and the actual size of the box is Px in width and 50px in height. Which box model should be selected? Of course it's the standard W3C box model. How can we choose the "Standard W3C Box Model? Simply add the doctype statement to the top of the webpage. If the doctype statement is not added, Each browser will understand the webpage based on its own behavior, that is, ie will use the IE box model to explain your box, FF will use the standard W3C box model to explain your box, so the web page will be displayed differently in different browsers. Otherwise, if the doctype statement is added, all browsers will use the standard W3C box model to explain your box, and the web page will be consistent in each browser. Let's use the jquery example to confirm it. Code 1:
The preceding Code does not contain the doctype statement. The "ie Box Model" is displayed in the IE browser, and the "Standard W3C Box Model" is displayed in the FF browser ". Code 2:
The only difference between Code 2 and code 1 is that the doctype declaration is added at the top. The standard W3C box model is displayed in all browsers ". So in order to make the webpage compatible with various browsers, let's use the standard W3C box model. |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
