5.盒子模型

CSS盒模型结构

MBPC模型

• 边界(margin)、边框(border)、填充(padding)、内容(content)简称MBPC模型。
• margin又称外边界（外补丁或外空白）：盒子边框与页面边界或其他盒子之间的距离
• padding又称内边界（内补丁或内空白）：内容与边框之间的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukY98RQJ-1592669922206)(boxmodel.png)]

margin属性设置

margin-(top|right|bottom|left):长度单位|百分比单位|auto

语法说明:

• auto：表示采用默认值，浏览器计算边距

复合使用：

margin:10px 10px 20px 30px; /*分别设置上、右、下、左边界*/
margin:10px 20px 10px; /*设置上边界我10px、左右边界为20px、下边界为10px*/
margin:20px 10px; /*设置上下边界为20px,左右边界为10px*/
margin:10px; /*设置4个边界为10px*/

注意:

• 当两个标签，一个在上面，一个在下面，第一个元素设置了margin-bottom，第二个设置了margin-top，此时浏览器会取最大值
• 当两个标签，一个在左边，一个在右边，第一个元素设置 了margin-right，第二个设置了margin-left，此时浏览器会取相加的值

border属性设置

边框样式border-style属性

border-style:none|hidden|dotted|deshed|solid|double | groove | ridge | inset | outset

属性值	说明
none	定义无边框
hidden	与none相同，应用于表时例外，用于解决边框冲突
dotted	定义点状表框
dashed	定义虚线
solid	定义实线
double	定义双线。双线的宽度等于border-width的值
groove	定义3D凹槽边框。其效果取决于border-color的值
ridge	定义山脊状边框。其效果取决于border-color的值
inset	定义使页沉入感边框。其效果取决于border-color的值
outset	定义使页面浮出感边框。其效果取决于border-color的值

• 与margin类似复合使用：

  border-style:(上) (右) (下) (左);
  border-style:(上) (左右) (下);
  border-style:(上下) (左右);
  border-style:(上下左右);
  

• 单个设置单边边框:

  border-top-style:属性值;
  border-right-style:属性值;
  border-bottom-style:属性值;
  border-left-style:属性值;
  

边框宽度border-width属性

border-width: medium(默认值)|thin|thick|长度值;

语法说明:

medium:默认宽度
thin:小于默认宽度
thick:大于默认宽度

• 与margin类似复合使用:

  border-width:(上) (右) (下) (左);
  border-width:(上) (左右) (下);
  border-width:(上下) (左右);
  border-width:(上下左右);
  

• 单个设置单边边框:

  border-top-width:属性值;
  border-right-width:属性值;
  border-bottom-width:属性值;
  border-left-width:属性值;
  

边框颜色border-color属性

border-color:颜色;

• 与margin类似复合使用:

  border-color:(上) (右) (下) (左);
  border-color:(上) (左右) (下);
  border-color:(上下) (左右);
  border-color:(上下左右);
  

• 单个设置单边边框:

  border-top-color:属性值;
  border-right-color:属性值;
  border-bottom-color:属性值;
  border-left-color:属性值;
  

边框border复合属性

border:border-width border-style border-color;

border-radius圆角边框

• CSS3新增的

语法:

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

padding属性设置

padding:长度|百分比

• 与margin类似复合使用:

  padding:(上) (右) (下) (左);
  padding:(上) (左右) (下);
  padding:(上下) (左右);
  padding:(上下左右);
  

• 四个单边填充属性:

  padding-top:长度|百分比
  padding-right:长度|百分比
  padding-bottom:长度|百分比
  padding-left:长度|百分比
  

  padding:(上下) (左右);
  padding:(上下左右);

• 四个单边填充属性:

  padding-top:长度|百分比
  padding-right:长度|百分比
  padding-bottom:长度|百分比
  padding-left:长度|百分比
  

知识来源于网上