块状元素特点：
内联元素特点：
内联块状元素特点：
display:block 可以将元素设置为块状元素
display:inline 可以将元素设置为内联元素
display:inline-block可以将元素设置为内联块状元素
每个HTML元素都会有盒子模型，如下图
[图片上传失败...(image-8891fd-1543076237898)]
可以看到，盒子模型中，一个标签是由内容，内填充（padding）、边框（border）、外边距（margin）组成的
一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
default，就是块级元素都自上而下的分布，宽度都为100%。内联元素都从左到右水平分布。div、p、table、img 等元素都可以设置为浮动。两个 div 显示在一行的代码如下：div{
width:200px
height:400px
border:2px red solid
float:left
}层模型有三种形式：
(1)绝对定位(position: absolute)
div{
width:200px
height:400px
border:2px red solid
position:absolute
left:100px
top:50px
}
(2)相对定位(position: relative)
(3)固定定位(position: fixed)
层模型中，各元素可能出现堆叠。堆叠顺序可以用z-index控制，z-index大者在上。z-index相同时，根据CSS声明顺序，靠后者在上。
