1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .items{ 12 width:100%; 13 text-align: center; 14 margin-top: 100px; 15 } 16 .item{ 17 width: 316px; 18 height: 170px; 19 display: inline-block; 20 margin:0 10px; 21 overflow: hidden; 22 /*添加盒模型*/ 23 box-sizing: border-box; 24 } 25 .b1{ 26 background-image: url("../images/1.jpg"); 27 background-origin: border-box; 28 } 29 .b2{ 30 background-image: url("../images/2.jpg"); 31 } 32 .b3{ 33 background-image: url("../images/3.jpg"); 34 } 35 36 /*鼠标上 移时添加边框*/ 37 .item:hover{ 38 border: 10px solid red; 39 } 40 .box{ 41 width: 400px; 42 height: 200px; 43 background-color: #ccc; 44 } 45 .left{ 46 width: 199px; 47 height: 200px; 48 background-color: red; 49 float: left; 50 /*一个元素所真正占据空间是：width + padding + border + margin*/ 51 border-right:1px solid orange; 52 padding: 10px; 53 /* 54 box-sizing:设置盒模型 55 content-box：默认值，说明当前元素的总宽度 = width + padding + border 56 border-box:说明当前元素的总宽度 = width. 意味着如果添加border或padding会造成真正放置内容的区域变小。但是它的优点是能够提供更稳固的结构 57 */ 58 box-sizing: border-box; 59 } 60 .right{ 61 width: 200px; 62 height: 200px; 63 background-color: blue; 64 float: left; 65 } 66 </style> 67 </head> 68 <body> 69 <div class="box"> 70 <div class="left">asdfaasdf</div> 71 <div class="right"></div> 72 </div> 73 <div class="items"> 74 <div class="item b1"></div> 75 <div class="item b2"></div> 76 <div class="item b3"></div> 77 </div> 78 </body> 79 </html>
从下图 可以看出这个盒子的稳固程度：
