DIV CSS layout rules are really weird_html/css_WEB-ITnose

I just came into contact with this thing today. After reading many web pages, I can’t explain it clearly. I summarized it through my own experiments. Of course it is not comprehensive, but it feels really strange:

In fact, the following attributes are the most important:

	float:left;	position:relative;	top:0px;	left:10%;	width:30%;

float: left is actually the reference point, which is the upper left corner. This should be more commonly used. In fact, this method can basically meet any requirement, but other methods may be more convenient in specific situations.

position:relative; Calculated relative to the parent or the upper left corner of the previous DIV.

top The Y coordinate of the upper left corner of this DIV relative to the previous DIV.
left has a strange calculation method. This value relative to the sum of the widths of the previous DIV is its own x coordinate, and the offset of the previous div is ignored. This means that you must know the x offset and width of the previous div to position it correctly.
The values ​​of right and bottom are ignored directly. So what do you need this attribute for? It's like a control panel. You don't know which button can be used and which button can't be used, but they are all there.

The width and height of the child div are the same as the parent div by default. Even with x and y offsets, they still stick out stubbornly. The parent cannot cover the child div at all.

Reply to the discussion (solution)

The poster is obviously studying DIV CSS with some emotion. What you said is weird. Of course, I don’t think that is the case. The calculation method of left is, of course, just counting its own coordinates. Why should it calculate the offset of its parent div? If you really do it like this, it would be really weird.
I think that the DIV CSS method will gradually become mainstream, and table layout will become increasingly rare

The poster is obviously studying DIV CSS with some emotion. Of course you are weird. I don't think that's the case. The calculation method of left is, of course, just counting its own coordinates. Why should it calculate the offset of its parent div? If you really do it like this, it would be really weird.
I think that the DIV CSS method will gradually become mainstream, and table layout will become increasingly rare

Not many people can accurately describe the div layout rules by visual inspection. Everyone is just debugging. Just use it once.

The poster is obviously studying DIV CSS with some emotion. What you said is weird. Of course, I don’t think it is like that. Of course, the calculation method of left only counts its own coordinates. Why do we need to calculate it? What about the offset of its parent div? If you really do it like this, it would be really weird.
I think that the DIV CSS method will gradually become mainstream, and table layout will become increasingly rare

The DIV CSS layout is flexible and more suitable for web design. What the poster said The code is often seen in its web pages and is often used.

The values ​​​​of right and bottom are simply ignored. So what do you need this attribute for? It's like a control panel. You don't know which button can be used and which button can't be used, but they are all there.


Why not? If there is no such attribute, then I want to put the background images of all buttons in one image. How do you set the background? Each of its attributes has its own meaning.

Now I don’t know what layout to use. I will study it later. Basically, the web page is a mess, which is really difficult for those who write browsers. .

Coupled with the incompatibility of various browsers, IE6 had a terrible share before, which made web programmers even more miserable.