Study notes (5): DIV CSS classic box model accumulation_html/css_WEB-ITnose

The effect of the box model:

Adjust the width of the faceul, you can adjust the number of each row, adjust the margin value of div1, you can change the overall position, which is useful for layout modes

==================================== =========================

html code:

                                                                                                      How much-->
;
;

                                                                                                                                                                                                                 "/> "/>

                                                                                      1.jpg"/>
1.jpg"/>
"

================================================

CSS code:

*{
margin:0px;
padding:0px;

}

.div1{

width:500px;

height :300px;

border:1px solid gray;

}

.faceul{
width:420px;
height:250px;
border:1px solid red;
}

.faceul li{

list-style-type:none;

float:left;
width:70px;
height:50px;
border:1px solid red;
margin-left:5px;

margin-top:5px;

}

.faceul img{
width:60px;
height:40px;
margin-left:5px;
margin-top:5px;
}