css显示模式（块元素，行内元素）

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

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 href="#">1</a>   
        <a href="#">2</a>      
        <a href="#">3</a>
        <a href="#">4</a>
 </div>

效果：

---