盒子模型

什么是盒子

margin : 外边框

border : 边框

padding : 内边框

html：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 
   <link rel="stylesheet" href="../盒子模型/style.css">
 
 </head>
 <body>
 
 <div id="box">
   <h2>用户登录</h2>
   <form action="" method="post">
 
    <div>
      <span>用户名</span>
      <input type="text" name="user" placeholder="用户名">
    </div>
 
     <div>
       <span>密码</span>
       <input type="password" name="pwd" placeholder="请输入密码">
     </div>
 
   </form>
 </div>
 
 </body>
 </html>

css：

 /*body总有一个默认的外边框margin ： 0，定义初始值 */
 body h2{
   margin: 0;
   padding: 0;
 }
 
 #box{
   width: 250px;
   height: 65px;
   border: 2px solid seagreen;
 }
 
 form{
   background: burlywood;
 }
 
 h2{
   font-size: 16px;
   color: #ce3939;
 }
 
 div:nth-of-type(1) input{
   border: 1px solid #000000;
 }
 
 div:nth-of-type(2) input{
   border: 1px dashed #000000;
 }

posted on 2021-06-26 12:19 琪琪又炸毛了阅读(124) 评论(0) 收藏举报

刷新页面返回顶部

盒子模型

什么是盒子

公告