盒模型中的inline和block

87 阅读 0 评论 58 点赞

我是靠谱客的博主英勇便当，最近开发中收集的这篇文章主要介绍盒模型中的inline和block，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

盒模型的定义

HTML组件中呈现一片空白区域的组件都可以当成盒模型,比如<div> <span> <section>等标签 CSS提供了display属性来控制盒模型的外观

盒模型的分类

一般来说盒模型分为两种一种为
block盒模型:允许通过CSS来设置高度,宽度自成一行例如标签<div> <p>这些就是block盒模型

另一种就是inline盒模型:不允许通过CSS来设置高度,宽度不自成一行例如标签<span> <a>这些就是inline盒模型

盒模型的验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
           div,span{
                width: 500px;
                height: 40px;
                border: 1px solid red;
           }
     </style>
</head>
<body>
           <div>我爱HTML5</div>
             <div>我爱HTML5</div>
              <span>我爱HTML5</span>
              <span>我爱HTML5</span>
</body>
</html>

我们标签div span都设置高度宽度边框线但显示出来却能证明一切

这里写图片描述

显示div的宽度高度设置成功了而span的宽度高度设置并未起作用这充分说明了两种盒模型的差别当然我们可以通过display属性改写对象对应的盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
           div,span{
                width: 500px;
                height: 40px;
                border: 1px solid red;
           }
          span{
              display: block;//把span标签设置为block盒模型
          }
     </style>
</head>
<body>
           <div>我爱HTML5</div>
             <div>我爱HTML5</div>
              <span>我爱HTML5</span>
              <span>我爱HTML5</span>
</body>
</html>

效果如下:
这里写图片描述

把标签span设置成block盒模型标签span也自成一行高度宽度也都设置通过了

这里我们可以继续操作把div通过display属性改写成inline盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
           div,span{
                width: 500px;
                height: 40px;
                border: 1px solid red;
           }
          span{
              display: block;//把span标签设置为block盒模型
          }
          div{
               display: inline;//把div标签设置为inline盒模型
          }
     </style>
</head>
<body>
           <div>我爱HTML5</div>
             <div>我爱HTML5</div>
              <span>我爱HTML5</span>
              <span>我爱HTML5</span>
</body>
</html>