1. Case one:
As follows:
(1) box1.html
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Box Model Classic Case</title><Linkrel= "stylesheet"type= "Text/css"href= "Box1.css"/></Head><Body><Divclass= "Div1"><imgsrc= "123.jpg"/></Div> </Body></HTML>
2.box1.css
@charset "Utf-8";/*CSS Document*/Body{Border:1px solid Red;/*1px represents the width of the border solid means that the solid red color, the order can be arbitrary*/width:500px;Height:500px;/*If you let the body center automatically*/margin:0 Auto;/*first parameter: for upper and lower; second parameter: for left and right (auto Center)*/}/*box model: Margin, padding,border, content*/. Div1{width:310px;Height:260px;Border:1px solid Blue;/*margin-top:5px; margin-left:5px;*/margin:5px 0px 0px 5px;/*padding-top:35px;*/}. Div1 img{width:300px;Height:250px;Margin-top:5px;Margin-left:5px;}
CSS Note 16: An introductory case for box models