【原创】关于box-sizing的运用实例
取自本人github百度前端作业，链接如下：https://github.com/Tankkey/ife_task08
【用html和css实现bootstrap网格栅格布局】
【box-sizing属性有3个可选值：border-box 和content-box（默认值）,inherit(继承)】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ife_task08</title> 6 <link rel="stylesheet" href="style.css" type="text/css"> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <div class="outer col-md-4 col-sm-6"> 11 <div class="inner">1-1</div> 12 </div> 13 <div class="outer col-md-4 col-sm-6"> 14 <div class="inner"></div> 15 </div> 16 <div class="outer col-md-4 col-sm-12"> 17 <div class="inner"></div> 18 </div> 19 <div class="outer col-md-3 col-sm-3"> 20 <div class="inner"></div> 21 </div> 22 <div class="outer col-md-6 col-sm-6"> 23 <div class="inner"></div> 24 </div> 25 <div class="outer col-md-3 col-sm-3"> 26 <div class="inner"></div> 27 </div> 28 <div class="outer col-md-1 col-sm-2"> 29 <div class="inner"></div> 30 </div> 31 <div class="outer col-md-1 col-sm-2"> 32 <div class="inner"></div> 33 </div> 34 <div class="outer col-md-2 col-sm-8"> 35 <div class="inner"></div> 36 </div> 37 <div class="outer col-md-2 col-sm-3"> 38 <div class="inner"></div> 39 </div> 40 <div class="outer col-md-6 col-sm-3"> 41 <div class="inner"></div> 42 </div> 43 </div> 44 45 </body> 46 </html>
1 @charset "utf-8"; 2 3 *{ padding: 0; 4 margin:0; 5 font-size: 14px; 6 } 7 8 a{ 9 text-decoration: none; 10 } 11 ul,li{ 12 list-style: none; 13 } 14 15 .wrapper{ 16 box-sizing:border-box; 17 width: 100%; 18 padding: 10px; 19 } 20 21 .outer{ 22 box-sizing:border-box; 23 padding: 10px; 24 float: left; 25 } 26 .outer:before,.outer:after{ 27 display: table; 28 content: ""; 29 clear: both; 30 } 31 .inner{ 32 border: 1px solid #999; 33 background-color: #eee; 34 height: 50px; 35 } 36 37 38 @media screen and (min-width:768px){ 39 .col-md-1{ 40 width: 8.33%; 41 } 42 .col-md-2{ 43 width: 16.6%; 44 } 45 .col-md-3{ 46 width: 25%; 47 } 48 .col-md-4{ 49 width: 33.33%; 50 } 51 .col-md-6{ 52 width: 50%; 53 } 54 } 55 @media screen and (max-width:768px){ 56 .col-sm-2{ 57 width: 16.6%; 58 } 59 .col-sm-3{ 60 width: 25%; 61 } 62 .col-sm-6{ 63 width: 50%; 64 } 65 .col-sm-8{ 66 width: 66.66% 67 } 68 .col-sm-12{ 69 width:100%; 70 } 71 }
/*如用scss计算则更为简便*/
