前端CSS常见问题记录（持续更新）

一只会敲代码的小灰灰

已于 2023-06-30 14:35:18 修改

阅读量1.2k

点赞数 1

分类专栏：经验总结文章标签： html css html5

于 2021-04-15 16:49:43 首次发布

本文链接：https://blog.csdn.net/qq_34231823/article/details/115730598

版权

经验总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端CSS常见问题记录

因为我不是专攻前端，所以有很多前端函数以及样式用法不是很了解，故此将我遇到的一些问题都记录到此处。

问题1：怎么设置DIV高度或者宽度将父级容器剩余空间充满？

需求是这样的，我父级容器A宽度是70%，容器A里面有两个容器B和C，我给B设置了固定宽度100px，这个时候C容器的宽度就不好设置了。

解决：
使用CSS中的函数：“calc”
C容器的宽度就可以设置为： width: calc(100% - 100px);

问题2：当鼠标移动到指定DIV上时鼠标从箭头变成手势。

需求：一般的DIV，当我们鼠标移动上去时，不是现实箭头就是显示“|”，但是我们想鼠标移动到DIV的时候就显示手势。
在这里插入图片描述
想要结果：

解决：
在DIV上加上样式： cursor:pointer;

问题3：怎么让DIV内的文字多出的部分自动隐藏并显示"…"?

解决：
在DIV上加上样式：
line-height: normal;
word-wrap: break-word;
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:3;/此处的数字根据你需要显示的行数调节/
-webkit-box-orient:vertical;
font-size: 13px;

结果：
在这里插入图片描述

问题4：怎么给CSS设置全局变量，并且在JS中动态修改变量？

需求：
有时候，我们想做一个更换系统主题颜色的功能，还有就是动态改变宽度或者高度，等等…

解决：在CSS中可以设置全局变量（只要包含了此页面,变量都有作用）
/* 设置全局变量 /
:root{
–mainColor:blue;/ 全局主体颜色 */
}
使用方式：
var(–mainColor)
在这里插入图片描述
在JS中动态修改变量
document.documentElement.style.setProperty(‘–mainColor’, “red”)

问题5：解决布局中display: inline-block造成的div上下错位

需求：有时候我们需要两个或者多个div水平放置，但是放置之后会发现div上下有些错位。
在这里插入图片描述

解决：在div中加入样式：vertical-align:top;

问题6：在js中获取元素的父级或者同级元素

需求：在写一个触发样式的时候会需要获取到父级元素的属性值。比如，我点击按钮，需要父级框闪烁或者改变父级框的颜色；比如，点击按钮，修改按钮同级的div元素的属性值。

解决：
$(d).parent()；–获取元素d的父级元素。
$(d).parent().parent().children(“input”).val();–获取元素d父级的同级（也就是父级的父级的二级）的input元素值。

示例：

<div class="qk-goods-img" imgType="1">
	<i class="layui-icon layui-icon-close-fill qk-img-detele-btn" onclick='deleteImg(this)'></i>  
	<img class="layui-upload-img qk-img" src="<%=basePath%>${img}" style="border: 1px #b9b0b0  solid; width: 100px;height: 100px;"/>
	<p class="qk-set-zhu-img" isMain="0"><span class='qk-set-zhu-img-span' onclick="setMainImg(this)">设为主图</span></p>
	<input class="old-img" type="text" multiple style="display: none" value="${img}">
</div>

JS
$(d).parent().attr("isMain","1");
$(d).parent().attr("class","qk-set-zhu-img-main");
var imgType=$(d).parent().parent().attr("imgType");
var url=$(d).parent().parent().children("input").val();
var alt=$(d).parent().parent().children("img").attr("alt");

上面是我自己的一部分代码,有点凌乱，请勿见怪!

问题7： jquery给多个具有相同class的元素绑定同一个事件或者样式

需求：
我们经常遇到这样的情况，一个商品列表，需要点击商品进入商品详情展示页，而这个商品列表其实是循环出来的，也就是说，拥有相同的class,如果是加一个oncklick点击事件又看着不美观，所以使用jquery。

解决：

html

<div class="goods">商品1</div>
<div class="goods">商品2</div>
<div  class="goods">商品3</div>
...

$(".goods").each(function () {
    $(this).click(function () {
    	window.location.href = "https://www.baidu.com";
    });
});

$(".goods").each(function () {
	$(this).css({
        "height": "120px",
        "width": "100px"
    });
});

问题8：让input只可以输入字母数字和下划线

需求：在写注册用户或者新增用户时，密码项我们需要做一定的处理，防止用户输入了汉字

方法一：可以输入大小写字母和数字,下画线

<input type="text" maxlength="10" onkeyup="value=value.replace(/[^\w]/ig,'')">

方法二：可以输入小写字母和数字,下画线

<input type="text" maxlength="10" οnkeyup="this.value=this.value.replace(/[^a-z0-9_]/ g,'');">

方法三：可以输入数字和点

<input type="text" maxlength="10" οnkeyup="value=value.replace(/[^\d.]/g,'')">

方法四：输入纯数字

oninput = "value=value.replace(/[^\d]/g,'')"

问题9：选中input框改变其边框颜色,移开选中颜色还原。

需求：
未选中
在这里插入图片描述
选中

方法：

<input type="text" class="qk-input"/>
.qk-input:focus{
	border: 1px blue solid;
}

问题10：layer.msg()，弹出位置不对!

需求：
layer.msg(“请输入账号”);这个弹出位置在顶部不居中。

解决：
方法一：
”<!DOCTYPE>“ 声明必须是 HTML 文档的第一行，位于 html 标签之前。
也就是在页面第一行加上”<!DOCTYPE>“，如果页面已存在，就将此代码移动至最上方。

方法二：
给Body增加一个样式，设置Body的高度为100%
body{width:100%;}

总结：两种方法分别针对不同的异常，都有一定的作用。

题外话：layer弹出样式

layer.msg(‘不开心。。’, {icon: 1});
适用于：保存、操作等情景的成功、正确的简洁提示。

2.layer.msg(‘不开心。。’, {icon: 2});
适用于：保存、操作等情景的失败、错误的简洁提示。

3.layer.msg(‘不开心。。’, {icon: 3});
适用于：保存、操作等情景的询问式简洁提示。
例如：请检查您的手机号码格式是否正确。

4.layer.msg(‘不开心。。’, {icon: 4});
适用于：保存、操作等情景的时数据或者对象被锁定、或者无操作权限导致无法操作的简洁提示。
例如：数据已经提交无法修改。

5.layer.msg(‘不开心。。’, {icon: 5});
适用于：保存、操作等情景的失败、错误的简洁提示。

6.layer.msg(‘不开心。。’, {icon: 6});
适用于：保存、操作等情景的成功、正确的简洁提示。

7.layer.msg(‘不开心。。’, {icon: 7});
适用于：保存、操作等情景的服务器繁忙、数据填写不规范等简洁提示。

问题11：当滑动到底部位置的时候触发方法

需求：
我们在查看商品列表的时候会发现，其实下面的商品列表是没有加载出来的，当你滑动到指定位置的时候才会显示出来，也就是说当滑动到指定位置的时候触发下面商品的加载方法。

解决方法：
css，必须设置外层框的高度，设置成100%也是可以的
js：

$(window).scroll(function(){
		if($(window).scrollTop()==$(document).height()-$(window).height()){
			alert("到底了,触发下面内容的加载方法")
		}
		//alert($(window).scrollTop()+"--"+$(document).height()+"--"+$(window).height())
})

问题12：table实现下滑表头悬浮在页面顶部效果

思路:
将table分为两个表,表头部分和内容部分,通过jquery实时控制上下两表的th,td宽度统一,在表头部分触顶时改变定位方式使它悬浮

解决方法：

<!DOCTYPE html>
<html>
<head>
    <title>悬浮table头</title>
    <style type="text/css">
        th{background: green}
        th,td{line-height: 200px;border: 1px solid #eee;width: 200px;}
        .table{word-break:break-all;word-wrap:break-word}
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px;background: yellow;">导航栏</div>
    <table id="header_table" style="top: 0;z-index: 1000;margin-bottom: 0px;" class="table">
        <thead id="t_thead">
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
            <th>标题五</th>
        </tr>
        </thead>
    </table>
    <table id="body_table" class="table">
        <tbody>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        </tbody>
    </table>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    // 调整上下表宽度统一
    var tableHd = $("#header_table");
    var tableTop = tableHd.offset().top;
    $(window).scroll(function(){
        var _t = $(window).scrollTop();
        if(_t-tableTop>=0){
            //table-header 已经到窗口顶部了
            tableHd.css({
                "position":"fixed"
            })
        }else{
            tableHd.css({
                "position":"static"
            })
        }
    });
</script>
</html>

扩展：

$(window).height();//是文档窗口高度
$("div").offset().top//是标签距离顶部高度
$(document).scrollTop();//是滚动条高度
$("div").height();//是标签高度
div到底部距离+$("div").height()+[$("div").offset().top-$(document).scrollTop()]=$(window).height();

问题13：js动态添加的class无法绑定事件

需求：
因为有一些东西是通过ajax请求后台添加的，而这动态添加的元素无法绑定点击事件

解决方法：

$(document).on('click','.qk-tr',function(){
		
});

问题14：js中计算保留两位小数

需求：
在js中计算的时候，就算是整数也会被转成无限长的小数，这个时候就需要保留小数了

解决方法：

(c.pricec.specQtyc.qty).toFixed(2)；

问题15：CSS实现鼠标移动到div，改变另一个div 样式

需求：我需要当鼠标移动到一个DIV上时，显示其里面一个隐藏的按钮。

解决方法：

html:
<div class="A">
	这里显示需要修改的内容<button class="B” >修改</button >
</div>


css:
.A:hover .B{
	display: inline-block;
}

问题16：在子级页面触发父级页面元素点击事件

需求：在弹出层里面刷新父级页面的表格。

解决方法：
方法一：

window.parent.document.getElementById("qk-user-sousuo").click();

方法二：

parent.$(window.parent.document).find('#qk-user-sousuo').click();

问题17：DevTools 无法加载 SourceMap 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE

问题：前端引用summernote富文本编辑器的时候，报错DevTools 无法加载 SourceMap 错误：状态代码 404，net::ERR_HTTP_RESPONSE_CODE_FAILURE
在这里插入图片描述
我项目是springboot2+redis+shiro+jsp 不知道怎么回事，报这个错的时候，我后台保存的登录token会被删除掉，导致我一刷新就跳转到登录页面了，因为是初学者，暂时还未找到原因，但是我把上面那个错解决之后就不会token失效了。

解决方法：
在引用的js中，最下面有一个被注释掉的代码，删掉就可以了
在这里插入图片描述

什么是 Source Map

在前端开发过程中，通常我们编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非。

因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map 就是实现这一目标的工具。

基本原理

source-map 的基本原理是，在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应部分的映射关系表。有了这样一张完整的映射表，我们就可以通过 Chrome 控制台中的"Enable Javascript source map"来实现调试时的显示与定位源代码功能。

对于同一个源文件，根据不同的目标，可以生成不同效果的 source map。它们在构建速度、质量（反解代码与源代码的接近程度以及调试时行号列号等辅助信息的对应情况）、访问方式（在产物文件中或是单独生成 source map 文件）和文件大小等方面各不相同。在开发环境和生产环境下，我们对于 source map 功能的期望也有所不同：
在开发环境中，通常我们关注的是构建速度快，质量高，以便于提升开发效率，而不关注生成文件的大小和访问方式。
在生产环境中，通常我们更关注是否需要提供线上 source map ,
生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。

此解决方法来源梦凝哲雪

问题18：调试JS

需求：前端js调试

解决方法：在需要调试的方法内加上 debugger 即可开启调试。

问题19：前端页面定时刷新

需求：前端html页面定时刷新本页面或者跳转到指定页面

解决方法：在html页面head标签对中添加

<meta http-equiv="refresh" content="50;url='#'">

url的值就是你需要跳转的页面，如果是刷新本页面则填#。

问题20：让DIV边框动态转圈

在这里插入图片描述
解决：
此解决方式来自于大佬大木博士的叮当喵的文章。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            position: relative;
            width: 200px;height: 200px;
            background: rgba(100, 100, 100, 0.349);
            overflow: hidden;
        }
        .div1{
            position: absolute;top: 0;
            height: 3px;width: 200px;
            background: rgb(75, 75, 240);
            transition: 1s;
            transform: translateX(-100%);
            animation: animate1 4s linear infinite;
        }
        .div2{
            position: absolute;right: 0;
            width: 3px;height:200px;
            background: rgb(75, 75, 240);
            transition: 1s;
            transform: translateY(-100%);
            animation: animate2 4s 1s linear infinite;
        }
        .div3{
            position: absolute;bottom: 0;
            height: 3px;width: 200px;
            background: rgb(75, 75, 240);
            transition: 1s;
            transform: translateX(100%);
            animation: animate3 4s 2s linear infinite;
        }
        .div4{
            position: absolute;left: 0;
            width: 3px;height: 200px;
            background: rgb(75, 75, 240);
            transition: 1s;
            transform: translateY(100%);
            animation: animate4 4s 3s linear infinite;
        }
        @keyframes animate1 {
            0%{
                transform: translateX(-100%);
            }
            50%,100%{
                transform: translateX(100%);
            }
        }
        @keyframes animate2 {
            0%{
                transform: translateY(-100%);
            }
            50%,100%{
                transform: translateY(100%);
            }
        }
        
        @keyframes animate3 {
            0%{
                transform: translateX(100%);
            }
            50%,100%{
                transform: translateX(-100%);
            }
        }
        @keyframes animate4 {
            0%{
                transform: translateY(100%);
            }
            50%,100%{
                transform: translateY(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
    
</body>
</html>

总结：方法很简单，就是给DIV每个边都覆盖一个DIV，然后给每个边的DIV加动画效果，注意动画开始时间。

问题21：动画隐藏和显示

需求：我们隐藏和显示一个元素的时候，想要缓慢的隐藏和显示。
解答：隐藏和显示的方法中是有参数的
$(“元素”).hide(500);这表示隐藏的操作在500毫秒内完成
$(“元素”).show(500);这表示显示的操作在500毫秒内完成
上下显示和隐藏
$(“元素”).slideDown(500);//控制元素高度在指定时间内从display:none延伸至完整高度
$(“元素”).slideUp(500);//控制元素高度在指定时间内从下到上缩短至display:none;

问题22：对元素设置模糊

需求：对图片或者问题做模糊处理
解答：
方法一：
background-color: rgba(0,0,0,0.6);
backdrop-filter: blur(2px);
方法二：
filter:blur(12px)

问题23：对元素设置颜色变浅

需求：鼠标移动到按钮上时，让按钮背景颜色变浅
解答：
button:HOVER {
opacity:0.50;
filter:alpha(opacity=50);
-ms-filter: “alpha( opacity=50 )”;
-moz-opacity:0.50;
}

问题24：设置勾选样式

在这里插入图片描述

HTML
<div class='qk-province qk-selected'>北京市</div>

CSS
.qk-province{
	border: 1px #979a9b solid;
	padding: 3px 10px;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 10px;
	cursor: pointer;
}
.qk-selected{
	border-color: green;
	position: relative;
}
/* 这里就是小三角了 */
.qk-selected::AFTER {
 	content: "";
    border-bottom: 16px solid green;
    border-left: 18px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
/* 这里是设置三角形里面的勾勾 */
.qk-selected::BEFORE{
	content: "";
    position: absolute;
    width: 6px;
    height: 3px;
    border: 3px solid #f4f8fa;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
    bottom: 3px;
    right: 0;
    z-index: 9999;
}

问题25：获取元素的内容实际宽度和物理宽度

比如单元格中，我显示的时候不会显示完：
在这里插入图片描述
这个时候就需要获取元素的实际宽度

var o=$(this).outerWidth();//物理宽度，也就是单元格宽度
var c=$(this)[0].scrollWidth;//内容实际宽度，也就是内容实际宽度

这个需求其实是用于下面这个问题的

问题26：在表格中鼠标移动到表格上显示完整信息

就比如我上面的图片：
在这里插入图片描述
效果：

话不多说，上代码：
1.表格的内容不是直接放在td里面的，是放在一个div里的

2.td的样式：

.td{
    border: 1px #e6e6e6 solid;
    padding:10px 5px;
    border-top: none;
    border-left: none;
    font-size: 14px;
    text-align: center;
    position: relative;
}

3.td里面div的样式：

.qk-table-td-content-div{
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
    position: relative;
}

4.弹出框的样式：

 .qk-show-all{
 	position: absolute;
 	background-color: white;
    right: 0px;
    text-align: left;
    border: 1px #e6e6e6 solid;
    max-height: 150px;
    padding: 10px;
    font-size: 14px;
    overflow-y: scroll;
    background-color: #fff;
    z-index: 999999;
    top:0px;
    box-shadow: 3px 3px 6px #e9e3e3;
 }

5.js触发代码

//监听鼠标移动到单元格内容上，如果内容的实际宽度超过物理单元格宽度，就弹出显示框
$(document).on('mouseover','.qk-table-td-content-div',function(){
	var o=$(this).outerWidth();//物理宽度，也就是单元格宽度
	var c=$(this)[0].scrollWidth;//内容实际宽度，也就是内容实际宽度
	if(o<c){
		var w=500;
		if(c<w){
			w=c+30;
		}
		var str="<div class='qk-show-all' style='width:"+w+"px'>"+$(this).html()+"</div>";
		$(this).parent().append(str);
	}
})
//监听鼠标移出弹出的显示框，就删除掉这个显示框
$(document).on('mouseout','.qk-show-all',function(){
	$(this).remove();
})

学习无止境，忘君能解忧

一只会敲代码的小灰灰

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端CSS常见问题记录（持续更新）

前端CSS常见问题记录因为我不是专攻前端，所以有很多前端函数以及样式用法不是很了解，故此将我遇到的一些问题都记录到此处。问题1：怎么设置DIV高度或者宽度将父级容器剩余空间充满？需求是这样的，我父级容器A宽度是70%，容器A里面有两个容器B和C，我给B设置了固定宽度100px，这个时候C容器的宽度就不好设置了。解决：使用CSS中的函数：“calc”C容器的宽度就可以设置为： width: calc(100% -100px);问题2：当鼠标移动到指定DIV上时鼠标从箭头变成手势。需求：一般的D
复制链接

扫一扫