1. 盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定(不包括margin)；
**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默认值，宽度和高度用来设置内容区的大小

    （说白了在这种模式下，用padding和border都是往外扩）
    06.盒模型补充及田径场实战 - 图1

  • border-box 宽度和高度用来设置整个盒子可见框的大小，width和height包括指的是内容区、内边距和边框的总大小

    1.  （用padding和border都是向里占地）<br />![](https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210523192848.png#clientId=u78547e9c-11bf-4&crop=0&crop=0&crop=1&crop=1&height=125&id=FmM5g&originHeight=201&originWidth=249&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u840e3517-b397-4b23-927c-d5b15d9fbff&title=&width=155)

2. 轮廓

**outline**用来设置元素的轮廓线，用法和**border**一模一样
轮廓outline和边框border不同点是，轮廓不会影响到可见框的大小,直接在外面加上覆盖的，border是加在盒模型外面挤出去的；

  1. /*border边框*/
  2. .box {
  3.     width: 200px;
  4.     height: 200px;
  5.     background-color: yellow;
  6.     border: 10px red solid;
  7. }
  10. /*outline轮廓*/
  11. .box {
  12.     width: 200px;
  13.     height: 200px;
  14.     background-color: yellow;
  15.     outline: 10px red solid;
  16. }

06.盒模型补充及田径场实战 - 图2 06.盒模型补充及田径场实战 - 图3
但是我们一般不会使用轮廓去布局，而是常用于鼠标移动上显示这种场景

  1. .box:hover {
  2.     outline: 10px red solid;
  3. }
  5. /*从效果动态图也可以很清晰地看出，outline属性并没有改变盒子的大小布局，直接描了个边*/

06.盒模型补充及田径场实战 - 图4

3. 阴影

你可以设置多个由逗号分隔的效果 一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述

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

  • 第一个值-水平偏移量：设置阴影的水平位置
    • 正值向右移动，负值向左移动
  • 第二个值-垂直偏移量：设置阴影的垂直位置
    • 正值向下移动，负值向上移动
  • 第三个值-阴影的模糊半径
  • 第四个值-阴影的颜色 ```css .box { width: 200px; height: 200px; background-color: yellow; /阴影轮廓的设置/ box-shadow: 10px 10px orange; box-shadow: 10px 10px 5px orange; box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);

}

  1. ![](https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210523200020.png#clientId=u78547e9c-11bf-4&crop=0&crop=0&crop=1&crop=1&height=75&id=zau4a&originHeight=231&originWidth=236&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uf6a2c10a-7122-49ec-b6c4-a5edcc92949&title=&width=77)                 ![](https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210523200056.png#clientId=u78547e9c-11bf-4&crop=0&crop=0&crop=1&crop=1&height=76&id=kPZEy&originHeight=238&originWidth=241&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u6c951aea-a2da-468d-839b-4cf672df8db&title=&width=77)                 ![](https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210523201711.png#clientId=u78547e9c-11bf-4&crop=0&crop=0&crop=1&crop=1&height=77&id=fUGdk&originHeight=226&originWidth=228&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u45a07972-742c-4222-b976-e0b3a84e9ef&title=&width=78)
  3. <a name="606a2d65"></a>
  4. ## 4. 圆角
  5. > `border-radius`属性使一个元素的外边框边缘的角变圆
  6. > 你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角
  8. `**border-radius**`** 用来设置圆角，圆角设置的是圆的半径大小**
  10. - `border-top-left-radius`左上
  11. - `border-top-right-radius`右上
  12. - `border-bottom-left-radius`左下
  13. - `border-bottom-right-radius`右下
  15. `border-radius` 可以分别指定四个角的圆角
  17. - 四个值：`左上`  `右上`  `右下`  `左下`
  18. - 三个值：`左上`  `右上/左下`  `右下`
  19. - 两个值：`左上/右下`  `右上/左下`
  20. - 一个值：`左上/右上/右下/左下`
  22. 这里同样不需要死记硬背，只要记住遵循顺时针方向和矩形中心点对称原则<br />与`border`不同的是，`border`是从`上`开始顺时针设置，而圆角是从`左上`开始
  24. ```css
  25. border-radius: 20px;
  26. border-radius:20px 40px;

06.盒模型补充及田径场实战 - 图5

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

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

圆

原理很简单，就是绘制正方形，并将四个圆角半径设置为正方形的一半,或者直接用百分比表示

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

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

椭圆

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

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

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

5. 田径场实战

  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>
  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. }
  14. .box2 {
  15.     width: calc(1719.2px/2 + 360px*2 - 12.2px*1*2);
  16.     height: calc(360px*2 - 12.2px*1*2);
  17.     margin: 12.2px auto;
  18.     border: 0.5px white solid;
  19.     border-radius: calc(360px - 12.2px*1) / 50%;
  20.     box-sizing: border-box;
  21. }
  23. .box3 {
  24.     width: calc(1719.2px/2 + 360px*2 - 12.2px*2*2);
  25.     height: calc(360px*2 - 12.2px*2*2);
  26.     margin: 12.2px auto;
  27.     border: 0.5px white solid;
  28.     border-radius: calc(360px - 12.2px*2) / 50%;
  29.     box-sizing: border-box;
  30. }
  32. .box4 {
  33.     width: calc(1719.2px/2 + 360px*2 - 12.2px*3*2);
  34.     height: calc(360px*2 - 12.2px*3*2);
  35.     margin: 12.2px auto;
  36.     border: 0.5px white solid;
  37.     border-radius: calc(360px - 12.2px*3) / 50%;
  38.     box-sizing: border-box;
  39. }
  41. .box5 {
  42.     width: calc(1719.2px/2 + 360px*2 - 12.2px*4*2);
  43.     height: calc(360px*2 - 12.2px*4*2);
  44.     margin: 12.2px auto;
  45.     border: 0.5px white solid;
  46.     border-radius: calc(360px - 12.2px*4) / 50%;
  47.     box-sizing: border-box;
  48. }
  50. .box6 {
  51.     width: calc(1719.2px/2 + 360px*2 - 12.2px*5*2);
  52.     height: calc(360px*2 - 12.2px*5*2);
  53.     margin: 12.2px auto;
  54.     border: 0.5px white solid;
  55.     border-radius: calc(360px - 12.2px*5) / 50%;
  56.     box-sizing: border-box;
  57. }
  59. .box7 {
  60.     width: calc(1719.2px/2 + 360px*2 - 12.2px*6*2);
  61.     height: calc(360px*2 - 12.2px*6*2);
  62.     margin: 12.2px auto;
  63.     border: 0.5px white solid;
  64.     border-radius: calc(360px - 12.2px*6) / 50%;
  65.     box-sizing: border-box;
  66. }
  68. .box8 {
  69.     background-color: #00923F;
  70.     width: calc(1719.2px/2 + 360px*2 - 12.2px*7*2);
  71.     height: calc(360px*2 - 12.2px*7*2);
  72.     margin: 12.2px auto;
  73.     border: 0.5px white solid;
  74.     border-radius: calc(360px - 12.2px*7) / 50%;
  75.     box-sizing: border-box;
  76. }
  78. .boxRect {
  79.     width: calc(1719.2px/2);
  80.     height: calc(360px*2 - 12.2px*7*2 - 10px);
  81.     margin: 5px auto;
  82.     border: 0.5px white solid;
  83.     box-sizing: border-box;
  84. }
  86. .boxCirc {
  87.     width: 100px;
  88.     height: 100px;
  89.     margin: calc((360px*2 - 12.2px*7*2 - 10px - 100px)/2) auto;
  90.     border: 0.5px white solid;
  91.     border-radius: 50%;
  92.     box-sizing: border-box;
  93. }
  95. .boxRectLeft1 {
  96.     width: 100px;
  97.     height: 200px;
  98.     margin-top: calc(-360px*2/2 + 12.2px*7*2/2 + 10px - 200px/2);
  99.     border: 0.5px white solid;
  100.     box-sizing: border-box;
  101. }
  103. .boxRectRight1 {
  104.     width: 100px;
  105.     height: 200px;
  106.     margin-top: calc(-360px*2/2 + 12.2px*7*2/2 + 10px + 50px);
  107.     margin-left: calc(1719.2px/2 - 100px);
  108.     border: 0.5px white solid;
  109.     box-sizing: border-box;
  110. }

效果图

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

绿茵足球场完善

学完了浮动，我们终于可以继续完善绿茵足球场了

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

这次主要的改动如下：

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

不过需要注意的是由于boxColLine不是float元素，应该放置最下方
这样可以利用浮动的特点，防止对布局产生影响
最终效果

06.盒模型补充及田径场实战 - 图10