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

最新推荐文章于 2024-04-13 18:44:54 发布

废柴前端

最新推荐文章于 2024-04-13 18:44:54 发布

阅读量2.4k

点赞数 3

分类专栏： css中display布局问题文章标签： css display布局问题

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/zhuxiandan/article/details/75330125

版权

css中display布局问题专栏收录该内容

0 篇文章 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>

效果图：

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

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

效果如图;

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

之前的代码图：

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

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

接下来，看第二个问题，我们往两个小盒子里面放几组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>

在看效果：

两个盒子居然上下错开了，这是为什么呢？我们观察一下发现，第一个盒子中最后一行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;
      }

效果图：

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

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

废柴前端

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS中用display属性布局遇到的问题及解决办法

网页布局中，我们常常要用到display这个属性，将一些块级元素转换成内联块级元素，使得他们对齐方式为两端对齐，但是，难免会遇到小问题，现在小编就来盘点两个小问题。首先，我们先建立一个大盒子，里面放着两个小盒子，对盒子设置相应的样式，代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
复制链接

扫一扫