1. 盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式（设置 width 和 height 的作用）

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   border: 10px red solid;
  6.   /* box-sizing: content-box; */
  7.   box-sizing: border-box;
  8. }

可选值：

  • content-box默认值，宽度和高度用来设置内容区的大小
    08-盒模型补充及田径场实战 - 图1
  • border-box 宽度和高度用来设置整个盒子可见框的大小
    08-盒模型补充及田径场实战 - 图2

width和height指的是内容区、内边距和边框的总大小

2. 轮廓

outline用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同点是，轮廓不会影响到可见框的大小
边框

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   border: 10px red solid;
  6. }

08-盒模型补充及田径场实战 - 图3
轮廓

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   outline: 10px red solid;
  6. }

08-盒模型补充及田径场实战 - 图4
可以很明显看到outline与border的区别
我们一般不会直接这么设置轮廓，而是下面这种场景

  1. .box:hover {
  2.   outline: 10px red solid;
  3. }

08-盒模型补充及田径场实战 - 图5
从上面的动态图也可以很清晰地看出，outline属性并没有改变盒子的布局

3. 阴影

box-shadow属性用于在一个元素的框架周围添加阴影效果 你可以设置多个由逗号分隔的效果 一个盒状阴影由相对于元素的 X 和 Y 的偏移量、模糊和扩散半径以及颜色来描述

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   box-shadow: 10px 10px orange;
  6. }

08-盒模型补充及田径场实战 - 图6

  1. box-shadow: 10px 10px 5px orange;

08-盒模型补充及田径场实战 - 图7

  1. box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);

08-盒模型补充及田径场实战 - 图8

  • 第一个值-水平偏移量：设置阴影的水平位置
    • 正值向右移动
    • 负值向左移动
  • 第二个值-垂直偏移量：设置阴影的垂直位置
    • 正值向下移动
    • 负值向上移动
  • 第三个值-阴影的模糊半径
  • 第四个值-阴影的颜色

    4. 圆角

    border-radius属性使一个元素的外边框边缘的角变圆 你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角

border-radius 用来设置圆角，圆角设置的是圆的半径大小

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius

  • border-bottom-right-radius

    1. border-radius: 20px;

    08-盒模型补充及田径场实战 - 图9

    1. border-top-right-radius: 50px 100px;

    08-盒模型补充及田径场实战 - 图10
    border-radius 可以分别指定四个角的圆角

  • 四个值：左上 右上 右下 左下

  • 三个值：左上 右上/左下 右下
  • 两个值：左上/右下 右上/左下
  • 一个值：左上/右上/右下/左下

这里同样不需要死记硬背，只要记住遵循顺时针方向和矩形中心点对称原则
与border不同的是，border是从上开始顺时针设置，而圆角是从左上开始

圆

原理很简单，就是绘制正方形，并将四个圆角半径设置为正方形的一半

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   border-radius: 50%;
  6. }

08-盒模型补充及田径场实战 - 图11

椭圆

只需要对上述样式对一点点的改动，设置width和height属性不相等即可

  1. .box {
  2.   width: 300px;
  3.   height: 200px;
  4.   background-color: yellow;
  5.   border-radius: 50%;
  6. }

08-盒模型补充及田径场实战 - 图12

田径场实战

html 代码

  1. <div class="box1">
  2.   <div class="box2">
  3.     <div class="box3">
  4.       <div class="box4">
  5.         <div class="box5">
  6.           <div class="box6">
  7.             <div class="box7">
  8.               <div class="box8">
  9.                 <div class="boxRect">
  10.                   <div class="boxCirc"></div>
  11.                   <div class="boxRectLeft1"></div>
  12.                   <div class="boxRectRight1"></div>
  13.                 </div>
  14.               </div>
  15.             </div>
  16.           </div>
  17.         </div>
  18.       </div>
  19.     </div>
  20.   </div>
  21. </div>

css 样式

  1. .box1 {
  2.   background-color: #da251e;
  3.   /* 这里使用css的一个表达式，方便加减乘除计算 */
  4.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 0 * 2);
  5.   height: calc(360px * 2 - 12.2px * 0 * 2);
  6.   margin: 100px auto;
  7.   border: 0.5px white solid;
  8.   /* 圆角 */
  9.   border-radius: calc(360px - 12.2px * 0) / 50%;
  10.   /* 盒子 */
  11.   box-sizing: border-box;
  12. }
  13. .box2 {
  14.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 1 * 2);
  15.   height: calc(360px * 2 - 12.2px * 1 * 2);
  16.   margin: 12.2px auto;
  17.   border: 0.5px white solid;
  18.   border-radius: calc(360px - 12.2px * 1) / 50%;
  19.   box-sizing: border-box;
  20. }
  21. .box3 {
  22.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 2 * 2);
  23.   height: calc(360px * 2 - 12.2px * 2 * 2);
  24.   margin: 12.2px auto;
  25.   border: 0.5px white solid;
  26.   border-radius: calc(360px - 12.2px * 2) / 50%;
  27.   box-sizing: border-box;
  28. }
  29. .box4 {
  30.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 3 * 2);
  31.   height: calc(360px * 2 - 12.2px * 3 * 2);
  32.   margin: 12.2px auto;
  33.   border: 0.5px white solid;
  34.   border-radius: calc(360px - 12.2px * 3) / 50%;
  35.   box-sizing: border-box;
  36. }
  37. .box5 {
  38.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 4 * 2);
  39.   height: calc(360px * 2 - 12.2px * 4 * 2);
  40.   margin: 12.2px auto;
  41.   border: 0.5px white solid;
  42.   border-radius: calc(360px - 12.2px * 4) / 50%;
  43.   box-sizing: border-box;
  44. }
  45. .box6 {
  46.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 5 * 2);
  47.   height: calc(360px * 2 - 12.2px * 5 * 2);
  48.   margin: 12.2px auto;
  49.   border: 0.5px white solid;
  50.   border-radius: calc(360px - 12.2px * 5) / 50%;
  51.   box-sizing: border-box;
  52. }
  53. .box7 {
  54.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 6 * 2);
  55.   height: calc(360px * 2 - 12.2px * 6 * 2);
  56.   margin: 12.2px auto;
  57.   border: 0.5px white solid;
  58.   border-radius: calc(360px - 12.2px * 6) / 50%;
  59.   box-sizing: border-box;
  60. }
  61. .box8 {
  62.   background-color: #00923f;
  63.   width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 7 * 2);
  64.   height: calc(360px * 2 - 12.2px * 7 * 2);
  65.   margin: 12.2px auto;
  66.   border: 0.5px white solid;
  67.   border-radius: calc(360px - 12.2px * 7) / 50%;
  68.   box-sizing: border-box;
  69. }
  70. .boxRect {
  71.   width: calc(1719.2px / 2);
  72.   height: calc(360px * 2 - 12.2px * 7 * 2 - 10px);
  73.   margin: 5px auto;
  74.   border: 0.5px white solid;
  75.   box-sizing: border-box;
  76. }
  77. .boxCirc {
  78.   width: 100px;
  79.   height: 100px;
  80.   margin: calc((360px * 2 - 12.2px * 7 * 2 - 10px - 100px) / 2) auto;
  81.   border: 0.5px white solid;
  82.   border-radius: 50%;
  83.   box-sizing: border-box;
  84. }
  85. .boxRectLeft1 {
  86.   width: 100px;
  87.   height: 200px;
  88.   margin-top: calc(-360px * 2 / 2 + 12.2px * 7 * 2 / 2 + 10px - 200px / 2);
  89.   border: 0.5px white solid;
  90.   box-sizing: border-box;
  91. }
  92. .boxRectRight1 {
  93.   width: 100px;
  94.   height: 200px;
  95.   margin-top: calc(-360px * 2 / 2 + 12.2px * 7 * 2 / 2 + 10px + 50px);
  96.   margin-left: calc(1719.2px / 2 - 100px);
  97.   border: 0.5px white solid;
  98.   box-sizing: border-box;
  99. }

效果图
08-盒模型补充及田径场实战 - 图13
由于因为到目前为止，还没有学习更多的布局定位知识，所以一些其他的细节地方比较难绘制
这里就大概绘制一个雏形出来，等后面学习了绝对定位和相对定位之后再做补充和完善，会相对容易一些

绿茵足球场完善

学完了浮动，我们终于可以继续完善绿茵足球场了
废话不多说，直接上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>田径场</title>
  8.     <style>
  9.       /* 公共部分 */
  10.       .box1,
  11.       .box2,
  12.       .box3,
  13.       .box4,
  14.       .box5,
  15.       .box6,
  16.       .box7,
  17.       .box8,
  18.       .boxRect,
  19.       .boxColLine,
  20.       .boxRectLeft1,
  21.       .boxRectLeft2,
  22.       .boxCircLeft,
  23.       .boxCirc,
  24.       .boxCircRight,
  25.       .boxRectRight1,
  26.       .boxRectRight2,
  27.       .football {
  28.         box-sizing: border-box;
  29.         border: 0.5px white solid;
  30.       }
  31.       .box2,
  32.       .box3,
  33.       .box4,
  34.       .box5,
  35.       .box6,
  36.       .box7,
  37.       .box8 {
  38.         margin: 12.2px auto;
  39.       }
  40.       .boxRectLeft1,
  41.       .boxRectLeft2,
  42.       .boxCircLeft {
  43.         float: left;
  44.         /* 去除左边框 */
  45.         border-left: none;
  46.       }
  47.       .boxCircRight,
  48.       .boxRectRight1,
  49.       .boxRectRight2 {
  50.         float: right;
  51.         /* 去除右边框 */
  52.         border-right: none;
  53.       }
  54.       /* ==========田径场========== */
  55.       .box1 {
  56.         background-color: #da251e;
  57.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 0 * 2);
  58.         height: calc(360px * 2 - 12.2px * 0 * 2);
  59.         margin: 100px auto;
  60.         border-radius: calc(360px - 12.2px * 0) / 50%;
  61.       }
  62.       .box2 {
  63.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 1 * 2);
  64.         height: calc(360px * 2 - 12.2px * 1 * 2);
  65.         border-radius: calc(360px - 12.2px * 1) / 50%;
  66.       }
  67.       .box3 {
  68.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 2 * 2);
  69.         height: calc(360px * 2 - 12.2px * 2 * 2);
  70.         border-radius: calc(360px - 12.2px * 2) / 50%;
  71.       }
  72.       .box4 {
  73.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 3 * 2);
  74.         height: calc(360px * 2 - 12.2px * 3 * 2);
  75.         border-radius: calc(360px - 12.2px * 3) / 50%;
  76.       }
  77.       .box5 {
  78.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 4 * 2);
  79.         height: calc(360px * 2 - 12.2px * 4 * 2);
  80.         border-radius: calc(360px - 12.2px * 4) / 50%;
  81.       }
  82.       .box6 {
  83.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 5 * 2);
  84.         height: calc(360px * 2 - 12.2px * 5 * 2);
  85.         border-radius: calc(360px - 12.2px * 5) / 50%;
  86.       }
  87.       .box7 {
  88.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 6 * 2);
  89.         height: calc(360px * 2 - 12.2px * 6 * 2);
  90.         border-radius: calc(360px - 12.2px * 6) / 50%;
  91.       }
  92.       .box8 {
  93.         background-color: #00923f;
  94.         width: calc(1719.2px / 2 + 360px * 2 - 12.2px * 7 * 2);
  95.         height: calc(360px * 2 - 12.2px * 7 * 2);
  96.         border-radius: calc(360px - 12.2px * 7) / 50%;
  97.       }
  98.       /* ==========绿茵足球场========== */
  99.       .boxRect {
  100.         width: calc(1719.2px / 2);
  101.         height: calc(360px * 2 - 12.2px * 7 * 2 - 10px);
  102.         margin: 5px auto;
  103.       }
  104.       .boxRectLeft1 {
  105.         width: 100px;
  106.         height: 200px;
  107.         margin-top: calc(
  108.           360px * 2 / 2 - 12.2px * 7 * 2 / 2 - 10px / 2 - 200px / 2
  109.         );
  110.       }
  111.       .boxRectLeft2 {
  112.         width: 50px;
  113.         height: 100px;
  114.         margin-top: calc(200px / 2 - 100px / 2);
  115.       }
  116.       .boxCircLeft {
  117.         width: 50px;
  118.         height: 100px;
  119.         margin-top: calc(
  120.           360px * 2 / 2 - 12.2px * 7 * 2 / 2 - 10px / 2 - 100px / 2
  121.         );
  122.         border-radius: 0 100px 100px 0;
  123.       }
  124.       .boxCirc {
  125.         float: left;
  126.         width: 100px;
  127.         height: 100px;
  128.         margin: calc(360px * 2 / 2 - 12.2px * 7 * 2 / 2 - 10px / 2 - 100px / 2) auto;
  129.         margin-left: calc(1719.2px / 2 / 2 - 100px - 50px - 100px / 2);
  130.         border-radius: 50%;
  131.       }
  132.       .boxCircRight {
  133.         width: 50px;
  134.         height: 100px;
  135.         margin-top: calc(
  136.           360px * 2 / 2 - 12.2px * 7 * 2 / 2 - 10px / 2 - 100px / 2
  137.         );
  138.         border-radius: 100px 0 0 100px;
  139.       }
  140.       .boxRectRight1 {
  141.         width: 100px;
  142.         height: 200px;
  143.         margin-top: calc(
  144.           360px * 2 / 2 - 12.2px * 7 * 2 / 2 - 10px / 2 - 200px / 2
  145.         );
  146.       }
  147.       .boxRectRight2 {
  148.         width: 50px;
  149.         height: 100px;
  150.         margin-top: calc(200px / 2 - 100px / 2);
  151.       }
  152.       .boxColLine {
  153.         width: 0;
  154.         height: 100%;
  155.         margin-left: calc(1719.2px / 2 / 2);
  156.         /* 边框样式 */
  157.         border: 0.25px white dashed;
  158.       }
  159.       /* ==========足球========== */
  160.       .football {
  161.         float: right;
  162.         width: 10px;
  163.         height: 10px;
  164.         background-color: black;
  165.         margin: 100px;
  166.         border-radius: 50%;
  167.       }
  168.     </style>
  169.   </head>
  170.   <body>
  171.     <div class="box1">
  172.       <div class="box2">
  173.         <div class="box3">
  174.           <div class="box4">
  175.             <div class="box5">
  176.               <div class="box6">
  177.                 <div class="box7">
  178.                   <div class="box8">
  179.                     <div class="boxRect">
  180.                       <div class="boxRectLeft1">
  181.                         <div class="boxRectLeft2"></div>
  182.                       </div>
  183.                       <div class="boxCircLeft"></div>
  184.                       <div class="boxCirc"></div>
  185.                       <div class="boxRectRight1">
  186.                         <div class="boxRectRight2"></div>
  187.                       </div>
  188.                       <div class="boxCircRight"></div>
  189.                       <!-- 足球 -->
  190.                       <div class="football"></div>
  191.                       <div class="boxColLine"></div>
  192.                     </div>
  193.                   </div>
  194.                 </div>
  195.               </div>
  196.             </div>
  197.           </div>
  198.         </div>
  199.       </div>
  200.     </div>
  201.   </body>
  202. </html>

这次主要的改动如下：

  • 提取公共 css 代码
  • 使用float属性进行布局
  • 删除重叠部分边框样式（叠加之后颜色会变粗，这里去掉同一侧的边框样式）

不过需要注意的是由于boxColLine不是float元素，应该放置最下方
这样可以利用浮动的特点，防止对布局产生影响
最终效果
08-盒模型补充及田径场实战 - 图14
终于可以愉快的踢球了
08-盒模型补充及田径场实战 - 图15
搞错了，再来
08-盒模型补充及田径场实战 - 图16