前端学习各种问题以及解决方法的记录

问题描述:

div宽度溢出问题，div设置margin和padding后宽度出现溢出。

解决方式：

css中添加如下代码：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

 

问题描述：

我想让鼠标移到某个元素上时出现一个新的内容框，类似于各大论坛鼠标移到头像上会出现个人信息。

解决方法：

两种思想：

假设是鼠标移到A元素，使得B元素出现

1.让A和B在同一个父级div内，对父级div进行鼠标进入和移出的判断

2.当鼠标移入A时让B出现，当鼠标移出A时用计时器来进行B的隐藏；当鼠标移入B时，取消计时器，当鼠标移出B时，B隐藏

    
<script type="text/javascript">
        var timer;
        $("#roundicon").mouseenter(function() {
            //$("#content").show();
            $("#roundicon").css("width", "100px");
            $("#roundicon").css("height", "100px");
            $("#txdh").css("display", "block");
        })

        //鼠标移出隐藏
        $("#roundicon").mouseleave(function() {
            timer = setTimeout(() => {
                $("#roundicon").css("width", "50px");
                $("#roundicon").css("height", "50px");
                $("#txdh").css("display", "none");
            }, 1000);
        })
        
        $("#txdh").mouseenter(function() {
            if(timer){clearTimeout(timer);}
        })

        //鼠标移出隐藏
        $("#txdh").mouseleave(function() {
            $("#roundicon").css("width", "50px");
            $("#roundicon").css("height", "50px");
            $("#txdh").css("display", "none");
        })    
    </script>

记得引入jquery.js

 

问题描述：div中的元素padding溢出

解决：在对应元素中的css添加下面这句：

display: inline-block;

display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。