一.行级标签，块级标签与行块标签

大家都认识了div,span标签，那么有人会疑惑，这两标签会有什么区别呢，我们可以在编辑器中分别输入，会发现每个div标签独占一行，几个span标签会再同行显示，这就是我们今天要说的块级标签和行级标签。下面将会对这三类进行详细说明。

块级标签(block)的特点：

                   1.独占一行

                   2.可以设置尺寸

                   3.没有明确宽度的时候，宽度由父级决定

                   4.没有明确高度的时候，高度由内容决定

                   5.支持margin,padding

行级标签(inline)的特点：

                   1.不会独占一行，可以与其他行级元素并排

                   2.不支持尺寸设置

                   3.对margin左右支持较好，上下间距慎用（无效果）

行块标签(inline-block)的特点：集块级标签和行级标签的所有特点于一身（故在css转换时常转换为inline-block)。

二. 盒模型

在html中所有的标签都可以看成一个盒子，由此得来我们常说的盒模型；盒模型又分为标准盒模型和怪异盒模型。首先来介绍下标准盒模型。

盒模型

由上图的标准盒模型可以看出，盒子模型由外边距（margin），边框（border），内边距（padding） 内容尺寸（width/height）四种样式组成；简单来说，标准盒模型分为内容尺寸，盒子尺寸与区域尺寸。其中

内容尺寸=宽+高   组成；

盒子尺寸 = 内容尺寸+padding+border   组成；

区域尺寸=内容尺寸+盒子尺寸+margin   组成；

一个盒子的总宽度= width + margin(左右) + padding(左右) + border(左右)

说完标准盒模型，下面介绍下怪异盒模型；

怪异盒模型的padding和border不影响盒子的盒子尺寸。

一个盒子的总宽度= width + margin(左右)。

---

介绍完盒模型，现在来介绍下css中的box-sizing

1 . content-box:此值为其默认值，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度

即：盒子的总width/height  = border+padding+content（width/height)

2. border-box:元素的宽度/高度等于元素内容的宽度/高度。

盒子的总width/height包含了元素的border/padding,内容的width/height

盒子的宽度/高度=内容的width/height。