块级元素与行内元素

块级元素与行内元素

我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。

例如：我们可以给div或p应用下面样式，但是a标签却无法应用下面的样式。

复制代码

代码如下:

.test{width:100px; height:100px;}

当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以我们可以给a标签应用以下样式：

复制代码

代码如下:

.test{display:block; width:50px; height:50px;}

另外，如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。如：

复制代码

代码如下:

a{display:inline-block; width:100px; height:100px;}