css笔记16:盒子模型的入门案例

1.案例一:

效果图如下:

css笔记16:盒子模型的入门案例

(1)box1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>盒子模型经典案例</title>

<link rel="stylesheet" type="text/css" href="box1.css"/>

</head>



<body>

<div class="div1">

<img src="123.jpg"/>



</div>

   

</body>

</html>

2.box1.css

@charset "utf-8"; /* CSS Document */ body { border: 1px solid red;  /*1px 表示边框的宽度 solid 表示实线 red 表示颜色,顺序可以随意*/ width: 500px; height: 500px;

    /*如果让body自动居中*/ margin: 0 auto;/*第一个参数:用于上下;第二个参数:用于左右(auto自动居中)*/

}



/*盒子模型: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;

}

    

 

你可能感兴趣的:(盒子模型)