前端可能出现的奇怪问题

最新推荐文章于 2023-05-05 10:56:46 发布

sherry的洗衣机

最新推荐文章于 2023-05-05 10:56:46 发布

阅读量140

点赞数

分类专栏：问题文章标签： css

本文链接：https://blog.csdn.net/Love_circle_de_GUN/article/details/105281833

版权

问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端可能出现的奇怪问题

一，行内块元素的间隙问题

在body上设置font-size: 0; 但是在每个盒子中得去指定字体的大小。
第二种方式，使用一个小技巧

<div>电脑</div><!--
--><div>手机</div><!--
--><div>平板</div>

二，盒子内嵌时可能出现的问题

1.垂直方向的外边距合并

解决方式：只用指定一个盒子的margin-top或者margin-bottom值。

2.父子盒子外边距的合并(塌陷)，

解决方式： 2.1父盒子指定上边线；

2.2父边框给定padding;

2.3父边框给，overflow: hidden;

三，CSS 浮动导致高度塌陷

塌陷的影响：标志元素的位置将会往上移动导致整个页面混乱

解决塌陷的三种方法：

1）内墙发

<style>
    .outer .clearfix{
    clear:both;
    }
</style>

<body>
     <div class="outer">
            <div class="div1"> <!--float: left;-->
            <div class="div2"> <!--float: left;-->
            <div class="clearfix">  <!--增加一个clearfix-->
    </div>
</body>

2)给外元素添加overflow: hidden

<style>
	.outer{
        overflow:hidden;
	}
</style>

<body>
     <div class="outer">
            <div class="div1">  <!--float: left;-->
            <div class="div2">  <!--float: left;-->
    </div>
</body>

3) 双伪元素浮动

<style>
    .clearfix:before,.clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
</style>

<body>
   <div class="clearfix">
        <div class="div1"></div>   <!--float: left;-->
        <div class="div2"></div>  <!--float: left;-->
    </div>
    <div class="div3"></div>
</body>