In the process of training div+css to the staff, they asked me a lot of questions, some of which I did not think I took some time to do some of my own experiments, all the experiments in IE7 and Firefox:
Experiment one, if a div does not specify the border attribute then will this div appear in the browser border?
Result: IE7: No. Firefox: No.
Experiment two: If a div only specifies the weight of the border attribute, will the div be a border in the browser?
Result: IE7: No. Firefox: No.
Experiment three, if a div specifies the weight value of the border property, and also specifies the color value of the border property, will the div appear in the browser border?
Result: IE7: No Firefox: No.
Experiment four, if a div only specifies the weight value of the border attribute, and the style then will this div appear in the browser border?
Result: IE7: Will, default color is black Firefox: Will, default color is black.
Experiment Five, if a div only specifies the style of the border attribute, will this div appear in the browser border?
Result: IE7: Will, default color is black Firefox: Will, default color is black.
Experiment six, if a div does not specify the width and height, then what shape will this div be in the browser?
Results: IE7: Width is 100%, height is 0, Firefox: Width is 100%, height is 0.
Experiment Seven, if a div specifies a width and does not specify a height, what shape will the div be in the browser?
Results: IE7: has a certain height; Firefox: height is 0;
Experiment eight, two parent-child Relationship Div Parent: #father Child: #son. The CSS code is as follows:
#father {
Border:solid Red 1px;
height:300px;
width:100px;
}
#son
{
BORDER:1PX Black Solid;
margin-right:100px;
width:100%;
}
So what is the actual width of the father in the browser?
Results: IE7: width is 100px; Firefox: Width is 100px;
Experiment nine, if a div does not specify its alignment in the page, what is its position on the page?
Result: IE7: Left-aligned, Firefox: left-aligned.
Experiment Ten, two parent-child relationship Div, #father, #son if you specify Text-align=center in father, what is son's position in the browser?
Result: IE7: relative Father center alignment; Firefox: left-aligned relative to father.
The performance of DIV+CSS in different browsers
