1 <!-- 2 <body> 3 <div> 4 <img src=""> 5 </div> 6 </body> 7 --> 8 <!--基于父级元素的百分比表示:如果是div,那么他的父级就是body,如果是img,他的父级元素就是div--> 9 <!doctype html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <meta name="Generator" content="EditPlus®"> 14 <meta name="Author" content=""> 15 <meta name="Keywords" content=""> 16 <meta name="Description" content=""> 17 <title>Document</title> 18 <style type="text/css"> 19 *{margin:0; padding:0;} 20 .box{ /*盒子模型,内容把边框撑大;*/ 21 width:500px; /*像素都可以用百分比表示,百分比是基于父级元素的,即嵌套关系中的基于上一级元素*/ 22 height:350px; 23 background:red; 24 border:5px solid pink; 25 padding: 5% 30px 40px 50px;/*顺时针方向默认四个值,*/ 26 } 27 </style> 28 </head> 29 <body> 30 <div class="box"> 31 <img src="pic/1.jpg"> 32 </div> 33 </body> 34 </html>