Home > Developer > Web Develop
DIV + CSS two box models (W3C box and IE box), cssw3c
Before analyzing the two box models, let's briefly describe what the box model is.
Principle:
First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes. These attributes can be transferred to the boxes in our daily life for understanding. The boxes we see in our daily life are a kind of boxes that can hold things. They also have these attributes, so it is called the box mode. Features: each box has four attributes: border, border, fill, and content. Each attribute includes four attributes: Top, right, bottom, and left. These attributes can be set at the same time, you can also set the thickness of the anti-seismic auxiliary materials, and the border is divided into large and small colors. We can also understand the thickness of the box seen in life and what color material the box is made, the boundary is the distance between the box and other things. ( The above principles and features are summarized in Baidu)<Html>
Running result:
This figure only shows the content and border. If you do not see the specific demarcation line, you do not know the specific layout of the padding and content.
Here I will introduce the debugging tool No. 1, firebug in the firefox browser, which is of great help for debugging webpage layout.
The debugging interface is like this. When you select the <div> label, the image changes and the overall layout is clear. (For example)
This is clear. The W3C box contains three parts: content, padding, and border.
The IE box won't be written. If you need it, you can try it on your own. Currently, most web pages use W3C boxes, which have excellent compatibility, so they are the best choice.
CSS + DIV write box model DiagramThere are two web box models:
1: Standard W3C box model; 2: IE box model (default model of IE browser ).
In the two different model Web pages, the display effects of elements defining the same CSS attributes are different. The following uses a formula to distinguish the two different box models.
1: Standard W3C Box Model
Width = width + (padding-left) + (padding-right) + (margin-left) + (margin-right) + (border-left) + (border-right)
Height = height + (padding-top) + (padding-bottom) + (margin-top) + (margin-bottom) + (border-top) + (border-bottom)
2: IE Box Model
Width = width + (border-left) + (border-right)
Height = height + (border-top) + (border-bottom)
This model is the default box model of IE browser. You can also change it. Add the following code at the top of the page:
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
What is the difference between the IE box mode and the W3C box mode (HTML, css)The standard W3C officially defined box model only contains the width and height of the content and border, and does not include the internal and external margins, while the IE box model calculates both the internal and external margins of the content border.
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
