1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .boxmodel{ 8 /*盒子模型*/ 9 /*盒子在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中的盒子来做比喻*/ 10 /*把元素叫做盒子,设置对应的样式分别为: 11 * 盒子的边框(border), 12 盒子内的内容和边框之间的间距(padding), 13 盒子与盒子之间的间距(margin)*/ 14 /*盒子真实尺寸 15 盒子宽度 = width + padding左右 + border左右; 16 盒子高度 = height + padding上下 + border上下;*/ 17 18 /*在布局中,如果只想增大内容和边框的距离,又不想改变盒子显示的尺寸*/ 19 /*box-sizing:content-box|border-box*/ 20 21 width: 50px; 22 height: 50px; 23 padding: 100px; 24 border: 100px; 25 color: skyblue; 26 background: yellow; 27 margin: auto; 28 border-style: solid; 29 border-color: yellowgreen; 30 31 } 32 .boxmodel1{ 33 width: 50px; 34 height: 50px; 35 padding: 100px; 36 border: 100px; 37 color: skyblue; 38 background: yellow; 39 margin: auto; 40 border-style: solid; 41 border-color: yellowgreen; 42 box-sizing: border-box; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="boxmodel"></div> 48 <div class="boxmodel1"> 49 50 </div> 51 </body> 52 </html>