CSS盒子的尺寸 

 1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">                                         
  5     <title></title>
  6     <style>
  7     .box1{
  8         width:100px;
  9         height:100px;
 10         background-color:#bfa;
 11         padding:10px;
 12         border:10px red solid;
 13         /*
 14         默认情况下，盒子的可见框的大小由内容区，内边距，外边框共同>    决定
 15         box-sizingg:用来设置盒子的尺寸的计算方式(设置width,heightt>    的作用范围)
 16             -可选值：
 17                 -content-box:默认值，宽度和高度用来设置内容区的大小
 18                 -border-box宽度和高度用来设置整个盒子可见框的大小
 19  
 20          */
 21         box-sizing:border-box;
 22  
 23     }
 24  
 25     </style>
 26 </head>
 27 <body>
 28     <div class="box1"></div>
 29 </body>
 30 </html>
~

 

posted @ 2020-11-13 20:39  zou-ting-rong  阅读(253)  评论(0)  编辑  收藏  举报