CSS第三课-----标签显示模式_mirris-0.4.3.min.css bar显示标签-CSDN博客

本文链接：https://blog.csdn.net/qq_46344220/article/details/107474625

标签显示模式

一、块级元素

1.块级元素特点：
（1）独占一行
（2）高度、宽度、内外边距可控制。
（3）默认宽度是容器的100%
（4）块级元素是一个盒子，里面可以放置行内或块级元素。
注意：<p>,<h1>,<h2>都是文字类块级标签，里面不能放其他块级元素。

二、行内元素

常见<a>,<strong>,<em>,最常用<span>
1.行内元素特点：
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高度，宽度直接设置无效。
（3）默认宽度是它本身的宽度。
（4）行内元素只能容纳文本或其他行内元素。

三、行内块元素

特点：
（1）和相邻行内元素（行内块）在一行上，但是之间有空白缝隙，一行可以显示多个。
（2）默认宽度是其本身内容的宽度。
（3）宽度，高度，内外边距可以控制。

四、标签显示模式转换

块转行内：display:inline
行内转块：display:block
块、行内元素转换为行内块：display:inline-block

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
<title>Document</title>    
<style>        
span{           
       /* 把行内元素转化为块级元素 */            
       display: block;            
       width: 100px;            
       height: 100px;            
       background-color: aqua;       
        }      
div{           
        /* 把块级元素转化为行内元素 */           
         display: inline;        
         background-color: brown;
        }       
 a{           
          /* 转化为行内块元素 */           
           display: inline-block;            
           width: 100px;            
           height: 100px;           
            background-color: chartreuse;        
            }    
 </style>
 </head>
 <body>    
 <span>行内元素</span>   
 <span>行内元素</span>    
 <div>块级元素</div>   
 <div>块级元素</div>  
 <a href="#">百度</a>    
 <a href="#">百度</a>
 </body>
 </html>

在这里插入图片描述