不同元素之间可以通过变换实现不同的功能。

1.块元素

     1.1.性质:

/*1.自己独占一行。*/
/*2.高,宽,外边距和内边距可控*/
/*3.宽默认为父级的100%就是父类元素的宽*/
/*4.可以看作一个盒子,里面可以装块元素和行内元素*/
/*常见的块元素:*/
<p>,<h1>~~<h6>,
<div>,<ul>,<ol>,<li>等。
/*注:<p>和<h>中无法放<div>等元素*/

2.行内元素

     2.1.性质:

/*1.一行上放多个元素。*/
/*2.高,宽直接设置无效*/
/*3.宽默认本身文字宽度*/
/*4.只能容纳文本或其他行内元素*/
/*常见的行内元素:*/
<a>,<em>,<span>,<i>等
/*注:<a>中无法再放链接,<a>里可以放块元素*/

3.行内块元素

     3.1.性质:

/*1.特点:既有行内元素的特点也有块元素的特点。*/
/*2.和相邻的行内元素在一行上,但他们会有空白间隙(宽高),
一行可以显示多个*/
/*3.默认宽高为本身内容的宽高*/
/*高度,行高,内外边距都可以控制*/
/*常见的行内块元素:*/
<img>,<input>,<td>等

4.display改变元素显示模式

     4.1:我们可以通过display属性来设定我们想要的元素有何种方式显示。
     4.2.示例:

.s2{
          display: inline-block;//让s2这个盒子变成行内块元素
        }
.s2 a {
         background: rgba(53, 50, 50, 0.8);
          font-weight: 700;
          display: block;//让链接变成块元素拥有宽高
          width: 250px;
          height: 80px;
          text-decoration: none;
          line-height:40px ;
          text-align: center;
       }  
 <div class="s2">
        <a rel="nofollow" href="#">1</a>   
        <a rel="nofollow" href="#">2</a>      
        <a rel="nofollow" href="#">3</a>
        <a rel="nofollow" href="#">4</a>
 </div>

效果:在这里插入图片描述