前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。

1 写在前面

最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标签是每行显示一个,而我想把右侧【随笔分类】中的标签设置为一行显示多个标签,至于显示多少个则随标签的大小而定,并且每个标签在鼠标放上去的时候会有背景颜色的变化。效果如下图。

2016_11_27d19862-c10e-4372-9f87-2e2f71abff77

下面我们就来分析一下如何让左边的标签显示方式变为右边这样的吧

2 块元素

在分析块元素之前我们首先建立html网页,以便后面的分析。html代码如下。