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

This article mainly talks about "what are the box models of html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the box models of html"?

There are two kinds of box models of html: 1. The box model of W3C whose padding and border are not included in the defined width and height; 2. The box model of IE whose padding and border are included in the defined width and height.

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

I. introduction

In the production of a website, a complex page is divided into small pieces.

Through this division, the website development process is divided into parts and complexity into simplicity, so as to achieve the purpose of reducing the development work and reducing the maintenance pressure.

In the web page, the divided pieces are regarded as boxes one by one. Only by understanding the box model can we better typeset and write the website interface.

Second, the layout of the box

Think of the elements in HTML as a rectangular box (a container for content), each consisting of element content, padding, border, and margin.

Ps: the default margin value for browsers is 8px!

Three, two kinds of box models

W3C box model: padding and border are not included in the defined width and height. The actual width of the object is equal to the set width value and the sum of border and padding, that is, (Element width = width + border + padding) this property is represented as a box model in standard mode.

The box model of IE: padding and border are included in the defined width and height. The actual width of the object is equal to the set width value, and even if border and padding are defined, it does not change the actual width of the object, that is, (Element width = width).

Ps: the standard W3C box model is generally used. If you need to use IE's box model, you can use the box-sizing property to modify it.

The box model of W3C

.test1 {box-sizing:content-box; width:200px; padding:10px; border:15px solid # eee;}

The box model of IE

Test1 {box-sizing:border-box; width:200px; padding:10px; border:15px solid # eee;} so far, I believe you have a deeper understanding of "what is the box model of html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.