CSS中用display属性布局遇到的问题及解决办法

蔚落 2021-09-14 00:22 854阅读 0赞

网页布局中，我们常常要用到display这个属性，将一些块级元素转换成内联块级元素，使得他们对齐方式为两端对齐，但是，难免会遇到小问题，现在小编就来盘点两个小问题。

首先，我们先建立一个大盒子，里面放着两个小盒子，对盒子设置相应的样式，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>Title</title>
       <style>
          .body{
             width:600px;
             height:400px;
             background: #Aaa;
          }
          .left{
             width:200px;
             height:200px;
             background: #aa48a9;
          }
          .right{
             width:200px;
             height:200px;
             background: #aa3a4f;
          }
       </style>
       <script></script>
    </head>
    <body>
    <div class="body">
       <div class="left"></div>
       <div class="right"></div>
    </div>
    </body>
    </html>

效果图：

![Center][]

然后我们想让两个小盒子水平对齐，只需将他们的display属性设置为“inline-block”即可，在css样式里加上：

.left,.right{
             display: inline-block;
          }

效果如图;

![Center 1][]

那么我们会发现，两个小盒子中间会留有间距，按照道理来说，不应该有间距，而是紧挨着的，那么这是为什么呢？原来，我们书写块级标签的时候，会习惯性的换行，导致两个标签元素之间会有空格出现，而当我们将div这个块级元素转化为内联块级元素后，他就具备了内联标签的性质，两个内联元素间的空格间距在网页上也会显示出来，同样，解决办法就呼之欲出了，最简单的方法我们只需将两个div紧挨在一起写，就可以。

之前的代码图：

![Center 2][]

红色方框的距离就是两个标签之间的间距，在网页 上显示出来就是图2的样子，现在我们只需将这个空格去点就行了，

![Center 3][]

修改之后的效果：两个盒子间的间距就消除了，（当然解决方法不止这一个，还可以用绝对/相对定位、或者设置盒子的左右外边距来解决）

![Center 4][]

接下来，看第二个问题，我们往两个小盒子里面放几组p标签，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>Title</title>
       <style>
          .body{
             width:600px;
             height:400px;
             background: #Aaa;
          }
          .left,.right{
             display: inline-block;
          }
          .left{
             width:200px;
             height:200px;
             background: #aa48a9;
          }
          .right{
             width:200px;
             height:200px;
             background: #aa3a4f;
          }
       </style>
       <script></script>
    </head>
    <body>
    <div class="body">
       <div class="left">
          <p>666</p>
          <p>666</p>
          <p>666</p>
       </div><div class="right">
       <p>666</p>
       <p>666</p>
       <p>666</p>
       <p>666</p>
       <p>666</p>
    </div>
    </div>
    </body>
    </html>

在看效果：

![Center 5][]

两个盒子居然上下错开了，这是为什么呢？我们观察一下发现，第一个盒子中最后一行666与第二个盒子中最后一行666是对齐的，那么考虑是不是文本的对其方式出了问题，经小编百度后，发现，网页中文本的垂直对其方式默认都是基线对齐，也就是baseline。这也就解释了两个盒子为什么会上下错开来，

1.vertical-align的语法 
    vertical-align属性的具体定义列表如下： 
    语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit 
    说明： 设置元素内容的垂直对齐方式 
    值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐； 
    text-bottom：文本的底端对齐； 
    百分比和长度：CSS2，可为负数。 
    初始值： baseline 
    继承性： 不继承 
    适用于： 行内元素和单元格（table-cell）元素 
    媒体： 视觉 
    计算值： 百分比和长度值为绝对长度；其他同指定值 
    特别提醒：vertical-align只对行内元素有效，对块级元素无效。 
    关于使用的详细介绍可以参考逍遥叹的《垂直对齐：vertical-align属性（转）》

那么我们只要将div的“vertical-align”值设置成除了“baseline”以外的其他值就行了，参考代码：

.left,.right{
             display: inline-block;
             vertical-align: bottom;
          }

效果图：

![Center 6][]

好了，到这里这两个小问题就解决了，其实以后还会遇到更多的问题，百度，真的很强大！！！

（完）如有疑问，欢迎留言骚扰

[Center]: /images/20210724/776950406241462aa989699c2f23584a.png
[Center 1]: /images/20210724/e7f3dcc91ac64b47ac0db8ff18f20bae.png
[Center 2]: /images/20210724/fedfc53364d24199b7af34d6024f020c.png
[Center 3]: /images/20210724/bb1eca5931994b779b71af060e600a03.png
[Center 4]: /images/20210724/9a4dcec7853f481b87e40dec8d315723.png
[Center 5]: /images/20210724/06145a740ea64d0c9c0fd57b5c2d80ab.png
[Center 6]: /images/20210724/49b8188fc0f247ccac5d723aefe86667.png