常见的css+html问题总结

money_monkey

已于 2022-08-12 10:06:15 修改

阅读量680

点赞数 3

分类专栏：前端入门文章标签： html 前端

于 2022-07-15 15:27:22 首次发布

本文链接：https://blog.youkuaiyun.com/money_monkey/article/details/125803716

版权

前端入门专栏收录该内容

4 篇文章

订阅专栏

本文总结了HTML和CSS学习中常见的问题，包括：1)和<a>标签的特殊嵌套规则；2)text-align属性对行内元素的限制；3)外边距重合（margin合并）问题及其解决方案；4)图片之间的三像素间隙问题。了解这些问题有助于提升HTML和CSS的布局能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前学习html的过程中，在个人尝试编写html或css代码的过程中常常会出现种种问题，今天来总结一下常见的问题和解决方法：

1.和<a>标签的特殊性

对于html的嵌套规则，我们都很熟悉，即：块元素可以包含行内元素和块元素，但是行内元素不可以包含块元素,(块元素即是标签独占一行的元素，可以设置高宽，而行内元素由字符撑开一行，无法设置高宽)，在这条规则中，有着特殊的两种，一种便是标签，还有一种便是<a>标签，标签属于块元素，可是它无法嵌套任何其他的块内元素，只能存放字符和其他的行内元素，而<a>标签则是行内元素，但是它可以嵌套所有的元素类型，这点要特殊记忆，否则在后面设置css样式中可能会出现设置不上的情况。

2.text-align使用限制

我们都知道，text-align在css中的语义规定元素中文本的水平对齐方式，可是很多新人在学习时，忽略了它只能作用于块元素而无法作用于行内元素的这个特效，从而导致了css样式设定失效的问题，在后期查找也难以发现问题，下面是具体实例：

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .pra{
            text-align: center;
        }
    </style>

    <body>
    <table>

        <div class="box">
            <p class="pra">不缔落的神明</p>
        </div>

    </table>
    </body>

下面是效果：

而如果将块元素换成行内元素后，效果如下：

此时可以很直观的看到，text-align：center命令失效了，这点要引起重视。

3.外边距的重合问题

盒子模型中，margin表示是一个盒子的外边距，可是我们在使用这个外边距是常常会出现问题，

比如经常出现的外边距合并，

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

也就是两个盒子合并成了一个盒子而外边距会变为较大的那个，而较小的外边距会直接消失，

同时，当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

我们如果想要避免这种问题，最简单的方法便是使得盒子脱离当前的文档流，从而消除这种影响，最简单的方法便是浮动或是使用定位，

浮动便是将设定的盒子脱离当前的文档流，就像是浮动于文档之上，不过浮动也会带来其他的问题，这点会在后面详细介绍。

4.图片三像素问题

我们在插入两个图片时，图片之间往往会出现间隙，这就称为图片三像素问题，下面是代码及图片

<style>
       img{
        width: 400px;
        height: 400px;
       }
    
</style>

<body>
     <div>
        <div><img src="./img/R-C.jpg" alt=""></div><div><img src="./img/R-C.jpg" alt=""></div>
     </div>
    
</body>

可以看到两张图片之间出现了间隙，那么如何解决这样的问题呢？一共有四种解决方法：
第一种：

vertical-align属性解决，我们在图片标签对应的css代码中添加vertical-align属性，只要选择非baseline的值即可，vertical-align属性设置元素的垂直对齐方式。其中baseline是默认值，而top值表示把元素的顶端与行中最高元素的顶端对齐，middle表示把此元素放置在父元素的中部。

 <style>
       img{
        width: 400px;
        height: 400px;
        vertical-align: middle;
       }
    </style>

只需添加一行代码即可解决

第二种：

给其共同的父元素，font-size设置为0

.box{
   font-size: 0;  
}

给外面的div添加类名class并设置font-size为0。

第三种：

将图片转变成块元素，即添加display：block；即可。

第四种：

让元素脱离文档流，即将其定位设置成绝对定位或是让其浮动即可。

今天就先介绍到这里，后面我会陆续更新这个系列，感兴趣的就关注我吧。

常见的css+html问题总结

1.<p>和<a>标签的特殊性

2.text-align使用限制

3.外边距的重合问题

4.图片三像素问题