盒子模型样式

盒子属性

属性名称	中文注释	备注
border	设置盒子的边框	边框宽度 边框类型 边框颜色
border-left	设置左边框	边框宽度 边框类型 边框颜色
border-right	设置右边框	边框宽度 边框类型 边框颜色
border-top	设置上边框	边框宽度 边框类型 边框颜色
border-bottom	设置下边框	边框宽度 边框类型 边框颜色
border-color	设置边框颜色	支持四个值，上右下左顺时
border-width	设置边框宽度	支持四个值，上右下左顺时
border-style	设置边框类型	支持四个值，上右下左顺时，solid实线，double双实线，dashed虚线，dotted点状线
margin	设置盒子的外边距	支持四个值，上右下左顺时针；可以同过设置左右auto使得盒子水平居中，上下设置auto无效
margin-left	设置左外边距
margin-right	设置右外边距
margin-top	设置上外边距
margin-bottom	设置下外边距
padding	设置盒子内边距	支持四个值，上右下左顺时
padding-left	设置边框宽度	设置盒子左内边距
padding-right	设置边框宽度	设置盒子右内边距
padding-top	设置边框宽度	设置盒子上内边距
padding-bottom	设置边框宽度	设置盒子下内边距

外边距的特点

• ⭐外边距的设置不会撑开盒子
• ⭐背景颜色不会蔓延到外边距
• ⭐外边距可以设置为负值
• ⭐相邻两个盒子的上下外边距以最大的外边距的盒子的外边距为准，左右外边距则是相加合并的
• ⭐父子盒子
  • 父盒子里面【没有内容】并且【没有内边距】并且【没有边框】，并且子盒子和父盒子【都没有浮动属性】，子盒子与父盒子的外边距以【最大的外边距为准】，当子盒子的外边距大于父盒子的外边距时，父盒子的外边距会变成子盒子的外边距
  • 父盒子里面【有内容】或者【有内边距】或者【有边框】，或者子盒子【有浮动属性】或者父盒子【有浮动属性】，子盒子的外边距以【盒子内容】为参照，父盒子的外边距不受子盒子的影响
  • 父盒子里面设置overflow: hidden;，可以触发BFC，子盒子的外边距以盒子内容为参照，父盒子的外边距不受子盒子的影响

内边距的特点

• ⭐内边距设置会撑大盒子
• ⭐背景可以蔓延
• ⭐内边距的值不能设置为负数，否则无效

标准盒子大小计算

• ⭐宽度 = 盒子宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
• ⭐高度 = 盒子高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度