![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端css
进击中的前端小白
人生的一切都是不可定的,既然选择了这条路,就好好的走好自己的路,让自己的选择不后悔
展开
-
append添加元素后点击事件失效
append原创 2022-04-21 17:02:02 · 706 阅读 · 0 评论 -
IE不支持 document.getElementById(“loading“).style=“display:none“;
ie兼容原创 2022-04-15 10:55:40 · 766 阅读 · 0 评论 -
渐变色及其兼容
background: -o-linear-gradient(top, #ff946e, #f43434);background: -webkit-gradient(linear, top, bottom, from(#ff946e), to(#f43434));background: -o-linear-gradient(top, #ff946e, #f43434);background: linear-gradient(180deg, #ff946e, #f43434);原创 2022-01-13 15:10:48 · 195 阅读 · 0 评论 -
居中的几个方法
永远居中的几个方法margintransformmargintext-align: center;line-height: 40px;z-index:99;width: 300px;height: 120px;left:50%;/FF IE7/top: 50%;/FF IE7/margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */margin-top:-60px!important;/FF IE7 该值为本身高的一半/margin-top:原创 2022-01-13 11:40:27 · 229 阅读 · 0 评论 -
表格第几行第几列
css原创 2022-01-13 11:28:38 · 542 阅读 · 0 评论 -
自定义echart悬停提示内容
formatter: function(params) {// console.log(params) //打印params看自己需要哪些参数然后拼接就可以了// console.log(params[0].axisValue)return "日期 "+params[0].axisValue + “” +params[0].seriesName + “:” + params[0].value;}},...原创 2022-01-05 15:50:23 · 550 阅读 · 0 评论 -
grid-column: 1 / span 2;
原创 2021-12-28 15:20:26 · 893 阅读 · 0 评论 -
user-select:none;
css控制页面文字不能被选中user-select:none;现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中。原因:鼠标点快了文字会被选中。解决方案:不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整。body{-moz-user-select:none;/火狐/-webkit-user-select:none;/webkit浏览转载 2021-12-28 15:10:48 · 7527 阅读 · 0 评论 -
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
object-fit: fill|contain|cover|scale-down|none|initial|inherit;原创 2021-12-28 14:50:00 · 382 阅读 · 0 评论 -
旋转CSS的rotate只 对block或 inline-block类型元素有效
-webkit-transform: rotate(180deg);transform: rotate(180deg);CSS的rotate只 对block或 inline-block类型元素有效原创 2021-12-24 15:17:16 · 268 阅读 · 0 评论 -
过渡效果兼容
-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;原创 2021-12-24 15:05:05 · 94 阅读 · 0 评论 -
浏览器input自动填充
浏览器记住密码之后,账号密码框自动填充到input当中,输入框的背景色为白色,color为黑色,目标是去除这些自动填充之后的默认样式。在reset.css当中写入填充后的样式input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fill-color: #ededed !important;-webkit-box-shadow: 0 0 0px 1000px transpare原创 2021-09-24 11:56:31 · 2066 阅读 · 1 评论 -
transform:rotate兼容
transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 /-webkit-transform:rotate(30deg); / Safari and Chrome */原创 2021-04-16 11:31:14 · 489 阅读 · 0 评论 -
2021-03-24
e.offsetX/e.clientX/e.pageX的区别e.offsetX/e.clientX/e.pageX/e.screenX的区别没有标注的是各浏览器都支持的:e.offsetX:鼠标相对于事件源的X方向的距离( firfox 不支持)e.offsetY:鼠标相对于事件源的Y方向的距离( firfox 不支持)e.clientX:距离浏览器可视区域X方向的距离e.clientY:距离浏览器可视区域Y方向的距离e.pageX:鼠标相对于文档X方向的距离( ie678 不支持)e.pa转载 2021-03-24 10:59:27 · 84 阅读 · 0 评论 -
box-shadow兼容
box-shadow{filter: progid:DXImageTransform.Microsoft.Shadow(color=’#969696’, Direction=135, Strength=5);/for ie6,7,8/background-color: #eee;-moz-box-shadow:2px 2px 5px #969696;/firefox/-webkit-box-shadow:2px 2px 5px #969696;/webkit/box-shadow:2px 2px原创 2021-02-25 16:54:30 · 321 阅读 · 0 评论 -
li前面的小圆点样式修改
css中用list-style-type指定列表(lists)前面符号,如下:li {list-style-type:符号名称}符号名称可用的值为:disc : CSS1 实心圆circle : CSS1 空心圆square : CSS1 实心方块decimal : CSS1 阿拉伯数字lower-roman : CSS1 小写罗马数字upper-roman : CSS1 大写罗马数字lower-alpha : CSS1 小写英文字母upper-alpha : CSS1原创 2021-02-23 16:12:03 · 11168 阅读 · 0 评论 -
超出显示...
方法一:纯css适用范围:小程序,H5/* 超出一行显示… */.over_one_line{display: block;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}/* 超出两行显示… */.over_two_lines{display: -webkit-box;word-break: break-all;text-overflow:ellipsis;overflow: hidden;white-原创 2021-02-19 14:23:15 · 155 阅读 · 0 评论 -
float导致父元素坍塌,(这里是父元素直接下移了)
现象:子元素加float:left以后父元素div下移了原因:子元素加上float,父元素高度坍塌(我也想不通坍塌为什么会下移)总之要么给父元素足够的高度,或者用其他原因撑开高度通用的四种方法如下:(1)给父级元素添加一个高度(不推荐) 此方法中高度无法确认,需要多次尝试设置,如果像我一样没有父元素背景颜色,随便给父元素一个高度就恢复了,但是如果涉及背景颜色且子元素高度不确定的就不方便了 (2)<divstyle=“clear:both;”> 在最后一个子元素后加一个空的di原创 2021-01-25 14:53:21 · 302 阅读 · 0 评论 -
滚动条兼容问题
滚动条距离顶部的距离let ele=document.getElementById(“demo”)console.log(ele.scrollTop)滚动条距离底部的距离let ele=document.getElementById(“demo”)console.log(ele.scrollHeight-ele.scrollTop-ele.clientHeight)滚动到顶部document.documentElement.scrollTo(0,0)自定义滚动条样式.......beau转载 2021-01-14 10:41:41 · 555 阅读 · 0 评论 -
前端-css-z-index失效问题
前端-css-z-index失效问题1、一般z-index的使用是在有两个重叠的标签,在一定的情况下控制其中一个在另一个的上方出现。2、z-index值越大就越是在上层。z-index:9999;z-index元素的position属性要是relative,absolute或是fixed。3、z-index在一定的情况下会失效。①、父元素position为relative时,子元素的z-index失效。解决:父元素position改为absolute或static②、该元素没有设置positio原创 2020-08-12 14:49:05 · 370 阅读 · 0 评论