??
During the process of training DIV CSS to employees, they asked me a lot of questions. Some of them I didn’t even think of, so I took some time to conduct some experiments myself. All The experiment was conducted in IE7 and Firefox:
Experiment 1. If a div does not specify the border attribute, will this div have a border in the browser?
Result: IE7: No. Firefox: No.
Experiment 2: If a div only specifies the thickness value of the border attribute, will this div have a border in the browser?
Result: IE7: No. Firefox: No.
Experiment 3: If a div specifies the thickness value of the border attribute and also specifies the color value of the border attribute, will this div have a border in the browser?
Result: IE7: No Firefox: No.
Experiment 4: If a div only specifies the thickness value and style of the border attribute, will this div have a border in the browser?
Result: IE7: Yes, the default color is black Firefox: Yes, the default color is black.
Experiment 5: If a div only specifies the style of the border attribute, will this div have a border in the browser?
Results: IE7: Yes, the default color is black Firefox: Yes, the default color is black.
Experiment 6. If a div does not specify width and height, what shape will the div look like in the browser?
Result: IE7: width is 100%, height is 0; Firefox: width is 100%, height is 0.
Experiment 7. If a div has a specified width but no height, what shape will the div look like in the browser?
Result: IE7: has a certain height; Firefox: the height is 0;
Experiment 8. Two divs with parent-child relationships. Parent: #father and 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 father in the browser?
Result: IE7: width is 100px; Firefox: width is 100px;
Experiment 9. If a div does not specify its alignment on the page, what is its position on the page?
Result: IE7: left-aligned; Firefox: left-aligned.
Experiment 10. Two parent-child relationship divs, #father, #son. If text-align=center is specified in father, what is the position of son in the browser?
Result: IE7: Center-aligned relative to father; Firefox: Left-aligned relative to father.