边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     input{
  9.       border: none; /*清空border 样式*/
  10.       border-bottom: 1px solid red;
  11.     }
  13.   </style>
  14. </head>
  15. <body>
  16. 用户名: <input type="text" name="" id="">
  17. </body>
  18. </html>

内边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     .div1{
  9.       width: 258px;
  10.       height: 258px;
  11.       padding:20px; /*垂直方向 水平方向  会增加盒子的大小*/
  12.       background-color: red;
  13.       border: 1px solid black;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.  <div class="div1">
  19.    学海无涯
  20.  </div>
  21. </body>
  22. </html>

特殊情况

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.    <style>
  8.      .div1{
  9.         width: 200px;
  10.         height: 200px;
  11.         background-color: red;
  12.      }
  13.      .div2{
  14.       /*盒子如果没有宽度 则 padding 不会撑开盒子*/
  15.        background-color:#ccc;
  16.        padding: 20px;
  17.      }
  19.    </style>
  20. </head>
  21. <body>
  22.   <div class="div1">
  23.     <div class="div2">
  24.       nihao
  25.     </div>
  26.   </div>
  27. </body>
  28. </html>

margin居中对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  9.     div{
  10.       width: 600px; /*必须定义宽度 , 没有宽度 不会居中 */
  11.       height: 600px;
  12.       background-color: #ccc;
  13.       margin-left:auto; 
  14.       margin-right: auto;
  15.     }
  16.   </style>
  17. </head>
  18. <body>
  19.    <div>
  20.      你好
  21.    </div>
  22.    <div>
  23.     你好
  24.   </div>
  25.   <div>
  26.     你好
  27.   </div>
  28. </body>
  29. </html>

外边距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     .div1{
  9.       width: 300px;
  10.       height: 260px;
  11.       background-color: #ccc;
  12.       /* border: 1px solid transparent; 给父元素加上边框 */
  13.       /* overflow: hidden; */
  14.       padding-top: 40px;
  15.     }
  16.     .div2{
  17.       width: 200px;
  18.       height: 100px;
  19.       background-color: yellow;
  20.      /* margin-top: 40px;  */
  21.     }
  22.     input{
  23.       margin:0 20px
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <div class="div1">
  29.     <div class="div2">
  31.     </div>
  32.   </div>
  34. </body>
  35. </html>