弹性盒子

盒模型

盒子的分类

• 不同元素产生的盒子类型可能不同

  一个元素，产生什么样的盒子，取决去它的CSSdisplay属性

  display：none 不生成盒子

  display：inline 行盒（默认值）

  display：block 块盒

  display：inlineblock 行内块

  盒子的组成部分

  外边距margin

• 边框border

  默认样式为3px，因为有双实线边框每一条代表1px，中间空了一个像素

  边框如果不设置颜色（默认颜色），是跟随文本的颜色（不包含图片）

• 内边距padding

  如果你给的是一个值，会4个方向都执行相同的命令（中间用空格间隔）

  如果是两个值，第一个代表上下，第二个代表左右

  如果是三个值，第一个代表上，第二个代表左右，第三个代表下

  如果是四个值，第一个代表上，第二个代表右，第三个代表下，第四个代表左（为顺时针方向）

• 内容content

• 背景色的渲染区域包含content（内容）+padding（内边距）+border（边框）