css盒子模型

什么是盒子模型？

image

盒子模型的主要构成有：

由内到外：content -> padding -> border -> （background-image 和background-color）->margin

盒子模型的层次：

• 第一层：border
• 第二层：content + padding
• 第三层：background-image
• 第四层：background-color
• 第五层：margin

盒子的内容

• width
• height

内边距 padding

• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

边框 border

根据四个方向 上 右 下 左

• border-top
• border-right
• border-bottom
• border-left

border的三要素：

1. 边框颜色 border-color
2. 边框粗细 border-width
   • thin
   • medium
   • thick
   • 像素值（px）
3. 边框样式 border-style
   • none
   • hidden
   • dotted
   • dashed
   • solid
   • double
   • ...

border简写

    /*样式 粗细 颜色*/
    border: solid 20px blue;

边框总结

边框样式定义方式

• 综合方式
• 按三要素拆分实现
• 按方向拆分实现

外边距 margin

根据四个方向 上 右 下 左

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

默认边距的处理

• 常用的html标签具有内外边距，开发之前会统一清除
• 建议不要使用*，针对具体的标签设置

盒子模型实际尺寸的计算

image