1.盒子模型

1）概念：

将网页上每个HTML元素视为长方形的盒子，CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。

2）盒子模型

是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。

image.png

一个盒子的实际高度（宽度）是由content+padding+border+margin组成。

可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。

2.标签常用样式：

单位 值 作用
width 长度 | 百分比 设置标签宽度
height 长度 | 百分比 设置标签高度
max-width 长度 | 百分比 设置标签最大宽度
max-height 长度 | 百分比 设置标签最大高度
min-width 长度 | 百分比 设置标签最小宽度
min-height 长度 | 百分比 设置标签最小高度
border 边框粗细 边框样式 边框颜色 设置边框显示效果
border-width 长度 设置边框粗细
border-style none | hidden | solid | dashed | dotten | double… 设置边框样式
border-color 颜色 设置边框颜色
border-top 边框粗细 边框样式 边框颜色 设置标签顶部边框
border-left 边框粗细 边框样式 边框颜色 设置标签左边边框
border-right 边框粗细 边框样式 边框颜色 设置标签右边边框
border-bottom 边框粗细 边框样式 边框颜色 设置标签底部边框
margin 上边距 右边距 下边距 左边距 设置标签四边的外延边距
margin-left 长度 | 百分比 设置标签左边的外延边距
margin-right 长度 | 百分比 设置标签右边的外延边距
margin-top 长度 | 百分比 设置标签顶部的外延边距
margin-bottom 长度 | 百分比 设置标签底部的外延边距
padding 上边距 右边距 下边距 左边距 设置标签四边的内部边距
padding-left 长度 | 百分比 设置标签左边的内部边距
padding-right 长度 | 百分比 设置标签右边的内部边距
padding-top 长度 | 百分比 设置标签顶部的内部边距
padding-bottom 长度 | 百分比 设置标签底部的内部边距

3.具体案例

image.png
通过border边框实现此效果
具体代码如下

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #aaa{
  9.       border: 50px solid black;  //设置默认背景色为黑色的实线边框 并设置较粗的宽度（以上为50px）
  10.       border-color: red yellow blue black;//设置边框四条边的颜色，边框内仍存在距离
  11.              width: 0px;//设置边框的宽高 将中间的距离取消掉，边框自动填充空缺，形成以上效果
  12.       height:0px;
  14.             }
  15.         </style>
  16.     </head>
  18.     <body>
  19.         <div id="aaa">
  21.         </div>
  22.     </body>
  23. </html>