一、行级标签转换为块级标签

转换为块级标签，各自独占一行，且可以设置宽高

代码：<a href="">我是a标签</a>

<a href="">我是a标签</a>

<a href="">我是a标签</a>

CSS :display:block;

width: 100px;

height: 30px;

border: 1px solid black;

在浏览器中的样式：

二、块级标签转换为行级标签

转化为行级标签，共同占一行，不能设置宽高

代码：<h3>我是块级标签</h3>

<h3>我是块级标签</h3>

<h3>我是块级标签</h3>

CSS：display: inline;

width: 200px;

height: 100px;

border: 1px solid red;

在浏览器中的样式：

三、转化为行内块级标签

能共占一行，而且可以设置各自的宽高

1.行级元素转化为行内块级元素

代码：<a class="a1" href="">我是a标签</a>

<a class="a2" href="">我是a标签</a>

CSS： a{ display:inline-block; border: 1px solid black; }

.a1{width: 100px; height: 30px; }

.a2{ width: 50px; height: 50px; }

在浏览器中的样式：

2.块级标签转化为行内块级标签

代码：<h3 class="h3_1">我是块级标签</h3>

<h3 class="h3_2">我是块级标签</h3>

CSS：h3{display: inline-block;border: 1px solid red;}

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

.h3_2{width: 200px;height: 50px;}

在浏览器中的样式：

四、display的另一个属性，可以将元素隐藏

display：none；

如果想了解更多块级标签和行内标签的属性，请关注，参看上一篇文章，有写的不对或不全面的地方，请大家多多指出。