CSS的display属性

最新推荐文章于 2023-10-18 15:49:39 发布

weixin_46386994

最新推荐文章于 2023-10-18 15:49:39 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/weixin_46386994/article/details/104460238

版权

CSS的display属性在正式介绍display属性之前，我们先要了解什么是元素类型。根据CSS的显示，把HTML的标签分为了三大类型:块状元素、内联元素和内联块状元素。
常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>...

块状元素的特点：

默认独占一行；每个块级元素都从新的一行开始，无论右边有多大的空间，也不会让后面的元素和它在同一行显示
可以自定义元素的高度、宽度、行高以及padding和margin
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
     *{margin: 0;padding: 0;}
   div{
    width: 100px;
    height: 100px;
    background: #f00;
   }
   .div2{
    background: #00f;
   }
   span{
    background: #a12334;
   }
  </style>
 </head>
 <body>
            <div>
               111111111
           </div>
          <span>hahahahaha</span>
          <div class="div2">
              22222222
           </div>
 </body>
</html>

在这里插入图片描述
常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<u>、<ins>、<sub>、<sup>...

内联元素的特点：
1、多个内联元素可以同一行显示；遇到边缘或
标签才会折行
2、不能直接定义宽度和高度的。他们的宽高是以自身的内容的大小、多少来决定的
3、可以设置padding、margin、border这些属性，但是部分元素在显示的时候会有特殊情况，会显示的不正确

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
     *{margin: 0;padding: 0;}
   div{
    width: 100px;
    height: 100px;
    background: #f00;
   }
   .div2{
    background: #00f;
   }
   span{
    border: 5px solid aqua;
    background: #a12334;
   }
   b{background:aqua;}
  </style>
 </head>
 <body>
       <div>
         111111111
      </div>
      <span>hahahahaha</span>
       <b>1345681864</b>
       <div class="div2">
           22222222
        </div>
 </body>

在这里插入图片描述
注：内联元素处于同一行，但设置边框等属性时，会占据上下两个div的区域

常用的内联块状元素有：
<img>、<input>...
内联块状元素的特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及margin和padding都可设置

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   img{
    width: 100px;
    height: 200px;
    background: burlywood;
    border: 2px solid chartreuse;
   }
  </style>
 </head>
 <body>
  <img src="" alt="" /><img src="" alt="" /><img src="" alt="" /><img src="" alt="" />
 </body>
</html>

在这里插入图片描述

display属性：盒模型可通过display属性来改变默认的显示类型
1、block：
元素类型为块状元素
特点：
他能让元素的类型转变成块状元素，从而拥有块状元素的特点

<style type="text/css">
   *{margin: 0;padding: 0;}
   
   span{display: block; /*将元素转换为块元素*/
   width: 100px;
   height: 100px;
   background: aquamarine; 
   }
   
   i{display: block; /*将元素转换为块元素*/
   background: brown ;
   width: 100px;
   height: 100px;
   }
   </style>
 </head>
   <body>
          <span>11111111111</span>
          <i>44444444</i>
          <span>22222222222</span>
 </body>

在这里插入图片描述
2、inline: 元素的类型为内联元素
特点： 能让元素的类型转换成内联元素，从而拥有内联元素的特点。

<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   div{display: inline; /*将元素转换为内联元素*/
   background: aqua; 
   }
   
   p{display: inline; /*将元素转换为内联元素*/
   background: coral; 
   }
   h1{display: inline;/*将元素转换为内联元素*/
   background: blue; 
   }
  </style>
 </head>
 <body>
        <div>咔咔咔咔咔咔扩</div>
         <p>asdsffaadf</p>
          <h1>xc大vdvdv大V</h1>
 </body>
</html>

在这里插入图片描述
3、list-item:
此元素会作为列表显示。(加了display：list-item以后，会让元素转换成列表类型)

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   
   span{display: list-item; /*将元素转换为列表类型*/
   background: aquamarine; 
   }
   div{display: list-item; /*将元素转换为列表类型*/}
   
 yle>
 </head>
 <body> 
          <span>11111111111</span>
           <div>咔咔咔咔咔咔扩</div>
          <span>22222222222</span>
           <span>11111111111</span>
           <span>22222222222</span>
 </body>

在这里插入图片描述
4、none： 隐藏元素（让元素不显示在浏览器里）

<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}   
      span{display: none; /*将元素隐藏*/
             background: aquamarine; 
             width: 100px;
             height: 100px;
   }  
   i{       display: block; /*将元素转换为块元素*/
            background: brown ;
            width: 100px;
           height: 200px;
   }
   </style>
 </head>
 <body>
          <span>11111111111</span>
          <i>44444444</i>
          <span>22222222222</span>
 </body>
</html>

在这里插入图片描述
5、inline-block：
内联块元素（行内块元素）
特点：
极具有块状元素的特点，又有内联元素的特点

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
div{
    display: inline-block;/*将元素转换为内联块元素*/
    margin: 30px;
    background: aqua;
   }
   p{
    display: inline-block;/*将元素转换为内联块元素*/
    padding: 20px;
    background: coral;
   }
   h1{
       display: inline-block;/*将元素转换为内联块元素*/
       background: blue; 
       border: 5px solid #117550;
   }
  </style>
 </head>
 <body>
        <div>咔咔咔咔咔咔扩</div>
         <p>asdsffaadf</p>
          <h1>xc大vdvdv大V</h1>
   body>

在这里插入图片描述