逆战班：盒模型中display4种常用属性值

最新推荐文章于 2022-07-06 21:33:29 发布

社会yang

最新推荐文章于 2022-07-06 21:33:29 发布

阅读量634

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_29839583/article/details/104442514

版权

在讲display属性之前，针对初学者先说明一下常用的元素类型有三种：
（1）块状元素。例如：div、p、ul、h1-h6等，他们都是独占一行的。
在这里插入图片描述 demo1
（2）行内（内联）元素。例如：span、a、img等，他们是并排显示的，给它设置块状元素同样的高度，是不能生效的。
demo2
（3）行内块元素。它独属于一种元素类型还是内联元素的一种，目前还是存在一定的争议，。通过display属性将行业元素转换成行内块元素，它具备行内样式的特点，但是又可以设置width、height、margin、padding。
在这里插入图片描述 demo3

在了解基础的元素类型后，再来说一下display属性，display属性有很多属性值，在盒模型中改变display的属性值，可以改变元素的显示类型。
在盒模型中常用到的4种值包括：none、block、inline、inline-block。
（1）display：none；元素的类型的为none，就是隐藏元素。常用在弹窗、内容切换上。
（2）display:block;块状元素的默认属性就是display：block；在样式表中分别为块状元素1和块状元素2增加display:inline;改变元素显示类型就会变成demo2。
（3）display：inline;是行内样式默认的显示类型。在demo2中设置与demo相同的高度和宽度不起作用，此时将display：inline；修改成display：block；demo2的样式就会变成demo1。
（4）display：inline-block;是行内块元素的默认显示类型。在demo1或demo2的样式

demo1代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签</title>
  <style type="text/css">
   .div_1{
    height: 100px;
    width: 500px;
    background-color: #0000FF;
   }
   .div_2{
    height: 120px;
    width: 400px;
    background-color: #00AA00;
   }
  </style>
 </head>
 <body>
  <div class="div_1">
   我是块状元素1，我独占一行
  </div>
  <div class="div_2">
   我是块状元素2，我独占一行
  </div>
 </body>
</html>

demo2代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签</title>
  <style type="text/css">
   .div_1{
    height: 100px;
    width: 500px;
    background-color: #0000FF;
   }
   .div_2{
    height: 120px;
    width: 400px;
    background-color: #00AA00;
   }
  </style>
 </head>
 <body>
  <span class="div_1">
   我是行内元素1，我独占一行
  </span>
  <span class="div_2">
   我是行内元素2，我独占一行
  </span>
 </body>
</html>

demo3代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>标签</title>
  <style type="text/css">
   .div_1{
    height: 100px;
    width: 500px;
    background-color: #0000FF;
    display:inline-block;
   }
   .div_2{
    height: 120px;
    width: 400px;
    background-color: #00AA00;
    display:inline-block;
   }
  </style>
 </head>
 <body>
  <span class="div_1">
   我是行内块元素1，我独占一行
  </span>
  <span class="div_2">
   我是行内块元素2，我独占一行
  </span>
 </body>
</html>