盒子模型

边框border

border-width 边框粗细

• 默认值是none

border-style 边框样式

• solid 实线
• dashed 虚线
• dotted 点线

border-color 边框颜色

可以单独设置每条边框

外边距margin

盒子与盒子之间的距离

margin值的写法同padding

块级盒子居中对齐

• 盒子必须指定了宽度
• 左右的外边距设置为auto
• text-align：center 文字，行内元素，行内块元素水平居中
• margin：auto 块级盒子水平居中

外边距合并 塌陷

• 上下外边距有合并问题 解决方案：只给一个盒子添加margin值

• 嵌套关系的塌陷

  • 原因：父元素没有上内边距及边框
  • 给父元素定义上边框或者上内边距，添加overflow：hidden。

内边距padding

边框与内容之间的距离

padding设置不同数值个数

• padding：10px 上下左右的内边距都是10px
• padding：10px 20px 上下是10，左右是20
• padding：10px 20px 30px 上是10，左右是20 下是30
• padding：10px 20 px 30 px 40px 按上右下左的顺序

盒子的实际大小=内容宽高+内边距+边框

内边距产生的问题

• 盒子设置了宽高，内边距会撑大原来的盒子，所以要保持原来的宽高，就要减去相应的内边距值
• 如果盒子没有指定宽度，如果指定padding，则一般情况下不会撑开盒子

XMind - Trial Version