盒子模型样式
🍓盒子属性
| 属性名称 | 中文注释 | 备注 |
|---|---|---|
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，子盒子的外边距以盒子内容为参照，父盒子的外边距不受子盒子的影响
🍓内边距的特点
- ⭐内边距设置会撑大盒子
- ⭐背景可以蔓延
- ⭐内边距的值不能设置为负数，否则无效
🍓标准盒子大小计算
- ⭐宽度 = 盒子宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
- ⭐高度 = 盒子高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度