学习web前端的一些坑

zty666_

已于 2022-05-26 12:50:14 修改

阅读量511

点赞数

文章标签： css

于 2022-04-26 23:08:35 首次发布

本文链接：https://blog.csdn.net/zty666_/article/details/124436542

版权

1.浮动塌陷

什么是浮动塌陷：
简单说就是浮动元素脱离标准流，漂浮了起来，不再占据原本的位置了，后面的元素就自动顶上来了

浮动前：

在这里插入图片描述

浮动后：

下方未浮动图片跑到了浮动图片下方
在这里插入图片描述

解决办法：

粗暴解决：最简单，直接，粗暴的方法就是给浮动盒子的父盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

2.给父盒子增加overflow属性：
给父元素添加overflow：hidden；原理是触发了BFC（BFC就是块级格式化上下文）。
优点：是父元素高度可以因内容多少自适应。
缺点：就是父元素边框之外的部分会被隐藏（这个隐藏指的是具有定位position的子元素，因为定位不是高度不高度的问题），另一方面overflow：hidden；的含义是溢出隐藏的意思，有些时候我们就是要子元素超出父元素框的部分要显示出来，若给子元素添加position：relative；定位后再设置left、top、bottom、right为负值，则溢出父元素框的部分会被隐藏。如二级菜单的影响。

 .father {
            overflow: hidden;
            /* background-color: pink; */
        }

效果图为：
在这里插入图片描述
3.父盒子里最下方引入清除浮动块。最简单的有：

在这里插入代码片<br style="clear:both;"/>

4.after伪类清除浮动：
外部盒子的after伪元素设置clear属性
本身伪元素是内联元素，所以需要display转换为块元素。
visibility：hidden；是官方给出的，为了确保万无一失，即为了确保这个content添加的内容在空间上是存在的。

.father:after 
{
   undefined content: “” ;
   display: block;
   clear:both; 
   overflow: hidden;
   visibility:hidden
   }

2.外边距塌陷

什么是外边距塌陷：
外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题
当给父盒子增加外边距10px:
在这里插入图片描述


```css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            height: 100px;
            width: 200px;
            margin: 10px;
            background-color: pink;
        }
        .one {
            /* margin: 100px; */
            /* float: left; */
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
        /* .two {
            width: 200px;
            height: 100px;
            background-color: gray;
        } */
        }
    </style>
</head>
<body>
    <div class="father"><div class="one"></div></div>
    
    <div class="two"></div>
</body>
</html>

给子元素加上外边距：
在这里插入图片描述
就很奇怪，而且好像外边距是跟父盒子和子盒子的最大外边距而决定的；
如果要在父盒子中设定子盒子距离父盒子的相对距离：

给父元素加边框border
给父元素加内边距padding
给父元素加overflow:hidden
padding内边距法：

 .father {
            padding: 20px;
            height: 100px;
            width: 200px;
            margin: 10px;
            background-color: pink;
        }
        .one {
            /* float: left; */
            width: 100px;
            height: 50px;
            background-color: aqua;
        }

3.transition和auto的爱恨情仇

这个坑是花费我时间最久的一个问题，矛盾来源于过渡元素需要一个确定的初始值和结束值，好比要有过渡的起点和终点，但是在设计下拉菜单的时候每个一级菜单下二级菜单的个数不一定都相同，就只能用auto，导致transition失效。下拉展开没有过渡效果。
我的方法是给二级菜单的父盒子高度设为auto，二级菜单的子盒子设为固定高度，设计transition时放在父盒子中去实现，例如：

//二级菜单的ul父盒子
.shell .button:hover  .list {
    width: 100%;
    opacity: 0.8;
}
//二级菜单中的子盒子li
.shell .list>li {
    position: relative;
    overflow: hidden;
    top: 0px;
    left: 0;
    height: 0;
    width: 100%;
    transition: all .3s ;
}
//当鼠标放上去时菜单下拉
.shell .button:hover .list>li {
    display: block;
    float: left;
    height: 50px;
    background-color: rgb(32, 81, 188);
}

效果图本来想给大家看一下，但要上传的视频才可以插入，大家可以自己试一下。

zty666_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习web前端的一些坑

1.浮动塌陷什么是浮动塌陷：简单说就是浮动元素脱离标准流，漂浮了起来，不再占据原本的位置了，后面的元素就自动顶上来了浮动前：浮动后：下方未浮动图片跑到了浮动图片下方解决办法：粗暴解决：最简单，直接，粗暴的方法就是给浮动盒子的父盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。2.给父盒子增加overflow属性：给父元素添加overflo
复制链接

扫一扫