简介

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
QQ截图20210227143245.png

padding（内边距）

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。

内边距可以设置多个值：

  1. 当padding只有一个值的时候表示同时控制上下左右的内边距。
  2. 当padding只有两个值的时候表示分别控制上下、左右的内边距。
  3. 当padding有三个值的时候表示分别控制上、左右、下的内边距。
  4. 当padding有四个只的时候表示分别控制上、右、下、左的内边距。

内边距也可以进行单独设置：

  1. padding-top             设置上边的外边距
  2. padding -bottom         设置下边的外边距
  3. padding -left            设置左边的外边距
  4. padding -right            设置右边的外边距

margin（外边距）

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

  1. 1、在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。
  2.      使用margin让元素自身居中：  margin: 0 auto;
  4. 2、浏览器的默认边距清零
  1. <!-- 案例1 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <style>
  8.        .c1{
  9.            width: 100%;
  10.            height: 600px;
  11.            border: 1px solid red;
  13.        }
  15.        .c2{
  16.            width: 50%;
  17.            height: 40px;
  18.            background-color: rebeccapurple;
  19.            margin: 10px auto;
  20.        }
  21.     </style>
  22. </head>
  23. <body>
  25. <div class="c1">
  26.     <div class="c2"></div>
  27.     <div class="c2"></div>
  28. </div>
  29. </body>
  30. </html>
  1. <!-- 案例2 -->
  2. <!DOCTYPE HTML>
  3. <html lang="en-US">
  4.   <head>
  5.         <meta charset="utf8">
  6.         <style>
  8.             *{
  9.                 margin: 0;
  10.                 padding: 0;
  11.             }
  13.             .c1{
  14.                 width: 80%;
  16.                 margin: 100px auto;
  18.             }
  20.             .c1 .J_categoryList{
  21.                 list-style: none;
  23.             }
  24.             .c1 .J_categoryList li{
  25.                 display: inline-block;
  26.                 margin: 10px;
  28.             }
  29.             .c1 .J_categoryList li a{
  30.                 font-size: 16px;
  31.                 color: #333;
  32.                 padding: 20px;
  33.                 border: 1px solid rebeccapurple;
  34.                 text-decoration: none;
  35.             }
  37.         </style>
  38.   </head>
  39.   <body>
  40. <div class="c1">
  41.       <ul class="J_categoryList">
  42.           <li><a href=""><span>红米</span></a></li>
  43.           <li><a href=""><span>电视</span></a></li>
  44.           <li><a href=""><span>笔记本</span></a></li>
  45.           <li><a href=""><span>家电</span></a></li>
  46.           <li><a href=""><span>小米手机</span></a></li>
  47.       </ul>
  48. </div>
  49.   </body>
  50. </html>