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

This article mainly explains "how to understand the CSS box model". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to understand the CSS box model.

Understand the CSS box model

If you want to implement cross-browser compatible CSS code that does not require a lot of Kit Kit obscene skills, a thorough understanding of the CSS box model is the first thing to do. The CSS box model is not difficult and supports almost all browsers, except IE browsers under certain conditions. The CSS box model is responsible for the following:

How much space is occupied by a blcok (block) level object in ◆

◆ the boundary of the object, leaving it blank

Dimensions of the ◆ box

The relative position of the ◆ box to other elements of the page

The CSS box model has the following guidelines:

◆ Block objects are rectangular (virtually all objects are)

The size of the ◆ is determined by width, height, padding, borders, and margins

If ◆ does not set the height, the height of the box will automatically adapt to its contents, plus blanks, etc. (unless float is used)

If ◆ does not set the width, a non-float box will fill its parent container horizontally (minus the white space of the parent container).

When working with block-level objects, ◆ must be aware of the following:

◆ if the width of a box is set to 100%, it can no longer set margins, padding, and borders, otherwise it will break its parent container.

The margin vertically adjacent to ◆ will cause complex collapse problems and lead to layout problems.

◆ has objects in relative and absolute positions, and has different behaviors

The box model displayed in the Firebug of Firefox

Understand the difference between block-and inline-level objects. This seemingly simple problem will benefit a lot if it is thoroughly understood.

The following figure illustrates the difference between block-level objects and inline-level objects:

Here are the basic differences between block-level objects and inline-level objects:

◆ Block-level objects naturally fill their parent containers horizontally, so there is no need to set 100% width properties for them.

The starting placement of a ◆ Block-level object is the upper-left boundary of its parent container and is arranged in sequence below the sibling Block object in front of it (unless float or absolute position is set).

◆ Inline-level objects ignore their width and height settings.

◆ Inline-level objects are typeset along with the text and are affected by typesetting attributes (such as white-space, font-size, letter-spacing).

◆ Inline-level objects can use the vertical-align property to control their vertical alignment, while block-level objects cannot.

The bottom of the ◆ Inline object retains some natural space to accommodate strokes such as the letter g that protrude downward.

◆ An inline object set to float becomes a block object that understands the Floating and Clearing properties.

The way to achieve multi-column typesetting is to use the float attribute, and float is also an attribute that will benefit you a lot. An float object can be left or right, and an object set to float moves left or right to the boundary of its parent container or to the boundary of the float object in front of it, while the non-float object or content immediately following it is surrounded in the opposite direction.

Here are some important guidelines for using the float and clear properties:

◆ A float object will jump out of the block-level non-float content stream in which it is located. In other words, if you want to float a box to the left, the block-level non-float object behind it will be displayed below, and the inline-level content will be surrounded by it.

◆ for a piece of content to surround a float object from one side, the content must be either inline-level or set to float in the same direction.

◆ a float object, if the width is not set, it automatically shrinks to the width of the content it contains, so * * explicitly sets the width for the float object.

◆ if a block object contains float sub-objects, the problems described in this article will occur.

◆ an object with the clear property set will not surround the float object in front of it.

◆ is an object with both clear and float properties set. Only the clear:left property takes effect, and clear:right does not work. First, use IE to test.

Although we all hate IE6 and IE7, when you start a new project, * * will test these two browsers first, otherwise, if you want to test against IE6 and IE7 later in the design, the following problems will occur:

◆ you will have to use some Kit Kat obscene tricks, or even use a separate IE6/7 CSS, resulting in bloated CSS files.

The layout of some parts of ◆ will have to be redesigned.

◆ increases the testing time.

◆ your layout in IE/6/7 is different from that in other browsers

If you are designing personal projects, Web programs, etc., it is not recommended that you do too much work on the old version of IE, while for some corporate sites, it has a large number of IE users, these techniques will allow you to avoid a lot of headaches. If the problem of IE is classified as IE's BUG without dealing with it, it will bring a lot of negative effects, and peaceful coexistence with IE is an inescapable reality for Web developers and designers.

Translator's note: in China, where IE6/7 still has a large user base (thanks to the websites of Bank of China, China Construction Bank, Agricultural Bank, ICBC, and governments at all levels), it is extremely unwise to ignore these two browsers. It is a good way to design for IE6/7 in the first place. Generally speaking, sites where IE6/7 passes the test will not have problems in front of standard browsers such as Firefox,Chrome,Safari,Opera. Your CSS design is based on W3C standards.

The most common problems in IE browsers

Do not abuse float in ◆ IE6, or it will lead to strange problems such as disappearance of content and repetition of text.

In ◆ IE6, the float object, on the other side of the float direction, will have double margin. Setting display to inline will solve this problem.

In ◆ IE6/7, a variety of bizarre problems can occur for an object that does not set hasLayout directly or indirectly.

◆ IE6 does not support attributes such as min-width, max-width, min-height, max-height.

◆ IE6 does not support fixed position background maps.

◆ IE6/7 does not support many display attribute values (such as inline-table, table-cell, table-row).

In ◆ IE6, only an object can be used: hover, a pseudo-class.

Some versions of ◆ IE have little support for some CSS selectors (such as property selectors, sub-object selectors).

◆ IE6~8 's support for CSS3 is limited (though there are some workarounds). Never expect to be exactly the same in all browsers.

It is possible for ◆ to experience the same functionality in different browsers, and it is possible to achieve a nearly pixel-level consistent look, but never expect to be exactly the same.

Form controls are always displayed differently in different browsers

The following is the select control in the Facebook home page, showing differences in 5 different browsers (based on Adobe's Browserlab screenshots)

Some Form controls, if required to be consistent across browsers, can find workarounds, such as using pictures instead of submit buttons, but some controls, such as radio,select, textarea, and file selection boxes, can never be exactly the same.

The performance of fonts is different.

Not to mention that some fonts do not exist in some systems, exist immediately, and their rendering effects are not exactly the same in different systems. For example, Windows ClearType supports IE7, but does not support IE6, resulting in a different appearance of the same font in IE7 and IE6.

Use CSS to clear zeros

Using CSS zeroing is a panacea for cross-browser compatibility. CSS zeroing can eliminate the default behavior of margin,padding properties in different browsers, and you can more easily control problems such as alignment, gaps, and so on.

At this point, I believe you have a deeper understanding of "how to understand the CSS box model". 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.