行级元素:

与其他元素在同一行上，内容文字或者图片的宽度不可以改变

对行级元素使用宽高是无效的(height:100px;width:200px;), 

左右边距 margin-right /  margin-right有效

上下边距 margin-bottom / margin-top无效

padding-left/right/top/bottom都有效

块级元素:

单独占页面的一行，其后元素会自动换行, 可以设置width，height, 同样也可以设置  margin与padding属性

display属性可用于改变元素的行与块样式

1.display = block 可将行级元素变换为块级元素

2.display = inline 可将块级元素变为行级元素

3.display = inline-block 这是一个混合属性, 使行级元素拥有块元素的性点(即可以更好设置margin, padding)

在同一行内有不同高度的元素时，通常要设置对齐方式, 如:vertical-align:top 把元素的顶端与行中最高元素的顶端对齐

 <div>
        <i style="display:inline-block;background:red">内容内容</i>
        <i style="display:inline-block;background:blue;height:100px">内容内容</i>            // height有效
        <em style="display:inlie-block;background:pink">内容内容内</em>           // 如果改为块级元素, 则display:line-block无效
 </div>

4.display = none 可将元素隐藏掉, 如在设置轮播时, 可以隐藏其它暂不显示的元素

<img src="img/59670ce9N177a082d.jpg" style="display: block;"/>

<img src="img/5966d4bdN6a8ec0c3.jpg" style="display: none;"/>

<img src="img/59670880N97321a68.jpg" style="display: none;"/>