CSS基础操作（四）-CSS控制元素显示方式display：block、inline、line-block、none

4.3 CSS控制元素显示方式display

元素的显示方式通常是指：1、是否独占一行；2、是否以块状占位；3、是否可见等，可以通过设置display属性来实现。

常见的元素显示方式如下：

  • block：块级元素的默认值

    • 特点：独占一行，可以修改宽高

    • 包括：h1-h6、p、div

  • inline：行内元素默认值

    • 特点：共占一行，不可以修改宽高

    • 包括：span、b、i、超链接a、small

  • inline-block：行内元素默认值

    • 既共占一行，也可以修改宽高

    • 包括：图片img

  • none：不可见

测试代码1：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>控制元素显示方式</title>
 <style type="text/css">
 div{
   display:block;/*默认*/
   width:800px;
   height:200px;
   background-color:#9ff;
   /*display:inline;/*把块级元素设置为行内元素*/
 }
 span{
   /*display:inline;/*默认*/
   /*display:block;/*把块级元素设置为块元素*/
   /*行内元素设置宽高无效*/
   width:200px;
   height:80px;
   background-color:rgb(255,0,0);
   /*把块级元素设置为行内块元素*/
   display:inline-block;
 }
 </style>
 </head>
 <body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>
   <p>段落标签</p>
   <div>111111</div>
   <div>222222</div>
   <div>333333</div>
   <span>444444</span>
   <span>555555</span>
   <span>666666</span>
   <b>b标签</b>
   <i>i标签</i>
   <small>small标签</small>
   <a href="http://www.baidu.com">a标签</a>
   <img src="../image/001.jpg">
   <img src="../image/002.jpg">
   <img src="../image/003.jpg">
 </body>
 </html>

显示效果：

测试代码2：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 <style type="text/css">
 div{
   /*设置块级元素大小*/
   width:500px;
   height:300px;
   background-color:pink;
   background-repeat:no-repeat;
   background-position:center;
   display:inline-block;
 }
 #d1{
   background-image:url("../image/001.jpg");
 }
 #d2{
   background-image:url("../image/002.jpg");
   /*display:none;/*隐藏显示*/
 }
 #d3{
   background-image:url("../image/003.jpg");
 }
 </style>
 </head>
 <body>
   <div id="d1"></div>
   <div id="d2"></div>
   <div id="d3"></div>
 </body>
 </html>

（1）默认display，按块级元素显示

（2）设置display:inline-block;元素在同一行进行显示，也可以修改宽高

（3）设置d2为display：none，元素内容不可见

 

posted @ 2021-07-08 17:07  Coder_Cui  阅读(698)  评论(0)  编辑  收藏  举报