Laosheng talk about floating and positioning problems in CSS

1 box model

About the box model of knowledge, presumably everyone is very familiar with, is a chewed up topic, the concept of the box is very simple, but in-depth understanding of the box model and IE box model is necessary to pay attention, especially for the application of box model to achieve the precise layout of page elements, is also a major challenge.

The box model of 1.1

The scope of the standard box model includes the margin border padding content, and importantly, the content section here does not include border and padding, and the height and width of the box refers to the width and height of the content section.

1.2 IE Box model

Note that the height and width here include the sum of the border padding and the content section.

Well, here's an example to calculate the amount of space and the actual size that the different box models need to occupy.

Give a chestnut: a box set margin = 20px; border = 1px; padding = 10px; Height= 50px; Width= 200px.

So the position that this box needs to occupy in the standard box model is:

Width + 10*2 + 1*2 + 20*2 = 262px;

High + 10*2 + 1*2 + 20*2 = 112px;

The actual size of the box should be:

Width + 10*2 + 1*2 = 222px;

High + 10*2 + 1*2 = 72px;

So in the IE box model, this box needs to occupy the position:

width + 20*2 = 240px;

High + 20*2 = 90px;

The actual size of the box should be:

Width 200px;

Height 50px;

Here, we should know the difference between the two, in order to facilitate the calculation, unified box model, it is recommended to add doctype at the top of the page declaration, so that the browser to resolve the time will be unified in accordance with the standard box model to parse.

Here, there are two key questions: which box model is more reasonable, according to what criteria to parse

Rationality of 1.3 box model

In the content of 1.1 and 1.2, we know the definition of box size for the two box models. If the general to set, we will use padding to let the content and the border is too close, set magin let the box and the box between the gap. This is from the inside out, but if you need to design the size of the box at the outset, then there is a difference to understand. With the idea of a standard box model, it is difficult to control this demand because a given wide height is just the size of the content part, and we intuitively need to set the size position that the whole box needs to occupy. This time, it reflects the rationality of the IE box model, because the IE box model set in the width of the padding and border values, which can be very intuitive to the size of the box to set the corresponding padding border content parts of the size.

2 Float of the box

In the floating knowledge point, you need to pay attention to a few small problems: floating around the layout, clear floating, floating destructive. the meaning of floating is only used to wrap text around a picture, that's all. and we currently use floating to achieve the page layout is not floating to do things (this is Zhang Xin Xu classmate's blog mentioned in one of their own sentiment).

3 Positioning of the box

CSS positioning and box floating different, positioning is implemented with the Position property, position has four properties, respectively, absolute relative static fixed. The default is the static property value, fixed positioning is similar to absolute positioning, except that it is positioned in the browser window as a benchmark, while dragging the browser window scroll bar, still keep the object position unchanged.

So let's talk about the most interesting absolute and relative two attribute values.

3.1 Relative positioning relative

Using a relatively positioned box, you can reach a new position by offsetting the specified distance, relative to it in its original position.

A box that uses relative positioning is still in the standard flow, and it has no effect on the parent block and the sibling box.

3.2 Absolute Positioning Absolute

Use an absolutely positioned box to offset the baseline with its nearest, already positioned ancestor, and if there are no ancestor elements that have been positioned, the browser window will be used as the benchmark.

The absolutely positioned boxes are out of the standard document stream, which means they have an impact on the back of the box positioning, and the back of the box when the box does not exist, forward to the top position.

However, it is necessary to consider that the use of absolute positioning under the IE6 will have a bug, positioning to the left offset value, there will be the parent element's padding width value of the inherent error, the solution is to the already positioned base box added a CSS style height:1%;