box-sizing

2021-11-08 11:33:14 浏览数 (2)

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">    
   <head>
       <meta charset="UTF-8" />
       <title>
           Document
       </title>
       <link rel="stylesheet" type="text/css" href="http://i.lookcss.com/reset.css"
       />
       <style type="text/css">
           body{ background: #555;} .main{width: 800px; height: 500px; } .inner{width:
           100%;height: 100%; background: #0f0; } .wrap{width:inherit;height:100%;
           border:10px solid #e00; box-sizing: border-box; }

       </style>
   </head>
   
   <body>
       <div class="main">
           <div class="inner">
               <div class="wrap">
               </div>
           </div>
       </div>
   </body>
</html>
  • box-sizing: content-box;
  • box-sizing: padding-box;
  • box-sizing: border-box;
  • box-sizing: inherit;

0 人点赞