CSS Box model

CSS is an important technology of web design, and box model is the core content of CSS. Therefore, the correct understanding of the box model plays an extremely important role in the design of the Web page.

1. Classification

First box model is divided into elements box, EM box, line box, bcf,haslayout these types;

1.1 Element Box

CSS box mode has properties for the element box: content, padding (padding), Border (border), border (margin). ：

1.2 Em Box

EM box: In CSS, the EM box is a square unit equal to the element font size.

1.3-ROW box

This is a bit like the four-wire format written in English, dividing a line with four lines,

The first line is the top line, in order the midline, the baseline, the bottom line, the general our text, the content is on the baseline, if you want to adjust the location of the combination of vertical-align attributes can be;

1.3 BCF (Block Format Content)

BFC Layout Rules:

1. The inner box is placed vertically, one by one.
2. The vertical distance of the box is determined by margin. The margin of two adjacent boxes that belong to the same BFC overlap
3. The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right). This is true even if there is a float.
4. The BFC area does not overlap with the float box.
5. BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.
6. When calculating the height of the BFC, floating elements are also involved in the calculation

• BFC prevents vertical margins (margin-top, margin-bottom) from collapsing
  

  According to the definition of BFC, only the same belongs to a BFC, two elements can occur vertical margin overlap, this includes adjacent elements, nested elements, as long as they do not block (such as borders, non-empty content, padding, etc.) will occur margin overlap.

  So to solve the margin overlap problem, as long as they are not the same BFC on the line, but for the two adjacent elements, the meaning is not significant, there is no need to add a shell, but for nested elements is necessary, as long as the parent element is set to BFC can be. This way the margin of the element does not overlap with the margin of the parent element.

• BFC does not overlap floating elements
• BFC can contain floating

We can use BFC's third feature to "clear the float", here actually said that the float is no longer appropriate, it should be said to contain floating. That is, as long as the parent container form BFC can, simply see how to form BFC

• float to left | Right
• overflow for hidden| Auto| Scroll
• display for Table-cell| table-caption| Inline-block
• position for Absolute| fixed

1.4 Haslayout

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In InternetExplorer, an element either calculates the size and organization of its own content, or relies on the parent element to calculate dimensions and organize content. To adjust these two different concepts, the rendering engine takes the Haslayout property, which can be either true or false. When the Haslayout property value of an element is true, we say that the element has a layout haslayout Introduction

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In InternetExplorer, an element either calculates the size and organization of its own content, or relies on the parent element to calculate dimensions and organize content. To adjust these two different concepts, the rendering engine takes the Haslayout property, which can be either true or false. When the Haslayout property value of an element is true, we say that the element has a layout

To better understand CSS, especially the rendering of CSS under IE, Haslayout is a very necessary concept to be thoroughly understood. Most of the display error under IE, is originated from Haslayout. If it is set to true, it has to render itself, so the element has to be extended to contain its outgoing content. For example, a floating or long, long, non-truncated word, if haslayout is not set to true, then the element relies on an ancestor element to render it. This is the place where many ie bugs are born.

When an element has a layout, it is responsible for sizing and positioning itself and possible descendant elements. In short, this means that the element needs to spend more to maintain itself and its content, rather than relying on ancestral elements to do the work. Therefore, some elements will have a layout by default. When we say that an element "has layout" or "Get Layout", or an element "has layout", we mean that its Microsoft proprietary attribute Haslayout is set to true. A "layout element" can be an element that has layout by default or an element that gets layout by setting some CSS properties. Through IE Developer Toolbar can see whether the HTML element under IE has haslayout, under IE Developer Toolbar, have haslayout elements, usually displayed as "haslayout =-1".

The element that is responsible for organizing its own content will have a layout by default, consisting mainly of the following elements (incomplete list):

* Body and HTML

* table, TR, TH, TD

* img

* HR

* Input, button, file, select, textarea, fieldset

* Marquee

* Frameset, Frame, IFRAME

* Objects, applets, embed

For not all elements are laid out by default, Microsoft's main reason is "performance and simplicity." If all elements have layouts by default, they can have a detrimental effect on performance and memory usage.

How to inspire haslayout?

Most IE display errors can be corrected by firing the Haslayout attribute of the element. You can fire the haslayout of an element by setting the CSS Dimension property (Width/height), so that it "owns the layout." You can do this by setting the following CSS properties, as shown below.

* Display:inline-block

* Height: (any value except Auto)

* Float: (left or right)

* Position:absolute

* Width: (any value except Auto)

* WRITING-MODE:TB-RL

* Zoom: (any value except normal)

Internet Explorer 7 also has some additional attributes (not a complete list):

* Min-height: (any value)

* Max-height: (any value except none)

* Min-width: (any value)

* Max-width: (any value except none)

* Overflow: (any value except visible)

* Overflow-x: (any value except visible)

* Overflow-y: (any value except visible)

* position:fixed

Overflow-x and overflow-y are attributes in the CSS3 box model and are not widely supported by browsers.

For inline elements (the default is inline elements, such as span, or display:inline; elements),

Width and height only trigger haslayout under ie5.x and IE6 or later in quirks mode. For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot be ordered in this case to have layout of the element.

Zoom can always trigger haslayout, but it is not supported in IE5.0.

If the element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: in the same way as normal text in the paragraph, the horizontal and continuous arrangement, affected by vertical-align, And the size can be adjusted according to the content adaptive. This can also explain why inline elements in Ie/win alone can contain block-level elements that are less problematic, because Display:inline is inline in other browsers, unlike Ie/win, which becomes inline-block once inline elements have layout.

the debugging and solving of haslayout problem

When the Web page in IE has abnormal performance, you can try to fire haslayout to see if the problem lies. A common method is to set zoom:1 for an element of CSS. Zoom:1 is used because, in most cases, it can fire the haslayout of an element without affecting the existing environment. And once the problem disappears, that's basically the reason why you can judge Haslayout. You can then fix the problem by setting the appropriate CSS properties. The first thing to consider is the Width/height attribute of the set element, followed by other attributes.

For IE6 and earlier, the usual method is known as the Holly Hack (Holly hack), which sets the height of the element to 1% (height:1%;). It is important to note that this method is invalidated when the overflow property of this element is set to visible. Or use the conditional comment of ie.

For IE7, the best way is to set the element's minimum height to 0 (min-height:0;).

Common bugs caused by haslayout problems

Double blank Edge floating bug with IE6 and lower versions

Bug fix: display:inline;

Ie5-6/win 3-pixel offset bug

Bug fix: _height:1%;

IE6 's hiding Cat (Peek-a-boo) bug

Bug fix: _height:1%;

Ie6/7 negative margin hidden bug:

Bug fix: Remove haslayout of parent element, or assign haslayout to child element and add position:relative;

It is important to note that the Haslayout attribute is an obsolete attribute that is unique to Microsoft, and in IE8, IE9, the haslayout attribute has been deprecated. The InternetExplorer above refer to IE7, IE6, and the following versions.

CSS Box model