css盒子模型

盒子模型

1. border
   • border-width设置边框宽度
   • border-color 设置边框颜色
   • border-style 设置边框样式
   • border: border-width border-style border-color
   • border-top: 2px solid green
   • border-top-color: green 设置边框中每个属性的值
   • 去掉边框 ` input{border: 0 none;}`
   • 去掉input的轮廓线 outline-style: none; 去掉轮廓线
   • border-collapse 合并边框(只适用表格)

内边距(padding)

• 内边距: 内容与边框之间的距离
• padding

  • left

    top

    right

    bottom

• 内边距移动的是盒子中的内容

页面中盒子大小的问题

• 盒子width=内容的宽度+左右边框+左右内边距
• 当一个子元素没有设置宽度，给子元素设置padding值，在其父元素的宽度范围内，不会影响该子元素的宽度。

外边距

• 盒子与盒子之间的距离
• 外边距不会影响盒子大小
• margin
  • 外边距移动盒子
    • 特点
      • 垂直外边距合并[外边距以最大的值为准]，以大的为准
      • 垂直外边距塌陷
        • 解决方式
          • 给父元素设置边框border会增加盒子大小
          • 给元素设置overflow:hidden
          • overflow:hidden 触发元素bfc
• 注意
  • 行内元素不要给上下的margin和padding
  • 上下margin和padding会被hulue
  • 左右margin和padding会起作用