![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 73
大刘鸭
如果你觉得你写的代码有bug,那么它一定有bug。
展开
-
基于Vue,实现圆形进度条
基于Vue,实现圆形进度条原创 2022-05-17 16:01:40 · 1957 阅读 · 0 评论 -
position为fixed的元素,高度不是满屏;transform对定位元素的影响;绝对定位的元素,高度不是全屏;
今天的开发中,遇到一个问题,div使用绝对定位,但是高度却不是全屏幕。代码如下:div{ position:fixed; top:0; left:0 bottom:0; right:0; width:100vw; height:100vh;}效果图如下:结果:经查证,该元素的父元素,使用了transform,也在网络上查证,并没有找到合适的官方文档,网络上也有码友遇到此类问题,但是没有有力的文档。解决:1、改写父元素的transform,使用其他方式,完成transform原创 2020-12-20 17:59:53 · 2020 阅读 · 0 评论 -
CSS 知识点
link 和@import 有什么区别、rgba()和 opacity 的透明效果有什么不同、BFC、display:none 与 visibility:hidden 的区别、display:inline-block 显示间隙、超链接访问过后 hover 样式就不出现、css sprite 是什么、什么是 FOUC、CSS 在性能优化方面的实践、盒子模型、z-index属性失效、伪元素和伪类的区别和作用、为什么有时候⽤translate来改变位置⽽不是定位原创 2019-11-15 14:30:43 · 265 阅读 · 0 评论 -
如何在浏览器实现12px以下的字体大小
在日常的开发中,可能会遇到如下情况,设计给出来的字体大小,小于浏览器目前所限制的大小。如何解决这个问题,目前可以提供两个办法。1、使用transform2、使用....................................................................................................................原创 2019-09-27 15:20:13 · 758 阅读 · 0 评论 -
CSS 属性 caret-color ,修改 input 标签 光标 颜色
献上官网文档caret-color用来修改 输入框光标的颜色且兼容性良好用法:<input style="caret-color:red">原创 2019-09-10 16:02:58 · 461 阅读 · 0 评论 -
input 在 chrome 下 , 自动填充后,会有一个默认样式,如何清除这个默认样式?
input 在 chrome 下,当 input 自动填充后, 会有一个默认的样式 ,如下:input:-internal-autofill-selected { background-color: rgb(232, 240, 254) !important; background-image: none !important; color: rgb(0, 0, 0)...原创 2019-09-06 16:50:05 · 11716 阅读 · 7 评论 -
link 和 @import 异同
1、定义不同 用法不同 @import 是 CSS 提供的愈发规则,只能 用于倒入样式表link 是 HTML 提供的标签,可以 加载 CSS ,可以定义 RSS ,rel 链接属性 2、加载顺序不同加载页面的时候,link 同时加载,@import 在页面加载完毕后加载 3、兼容性 @import 是 CSS2.1 的语法,link 是 HTML ...原创 2018-11-28 18:58:47 · 119 阅读 · 0 评论 -
JS 获取 元素 非行内样式
<h1 class="h1class" style="color:red">测试一哈<h1>.h1class{ font-size:12px;}function getAttr(obj, attr) { //我们把它们封装为一个函数, // 注意了在全局下定义的函数的都会默认设置为window对象的方法, //...原创 2018-11-30 16:49:58 · 811 阅读 · 0 评论 -
css 实现 stick-footer
粘性底部(stick-footer): 屏幕内容不足一屏幕时,footer固定在底部, 内容超过一屏幕的时候,footer在内容的最下面,滚动到最后在可以看到footer亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!亲测有效!CSS 如下:...原创 2018-11-26 14:13:11 · 406 阅读 · 0 评论 -
css 设置 多行超出 显示为 省略号 ,可 多行超出 显示为 省略号
开发过程中我们可能会遇到这样的需求: 有一行文本,不足一行,全部显示,超出一行,行尾显示为省略号。可能你会有些扫操作,用 JS 去动态的判断,尽管效果已经实现,但是看上去搓的一逼,配不上前端这个词。下面给你介绍 两种 优雅的 方式 ,来实现这个效果。HTML如下:<div class="text-to"> 这是测试,这是测试,这是...原创 2017-02-23 16:43:04 · 4786 阅读 · 0 评论 -
css图片左右上下居中
html:css:div{width: 50%;height: 500px;border: 1px solid black;text-align: center;}div span{display: inline-block;height: 100%;vertical-align: middle;}div img{原创 2017-03-02 11:27:54 · 1696 阅读 · 0 评论 -
浏览器常见兼容问题(一)
一、不同浏览器的标签默认的外补丁和内补丁不同原因:在不同的浏览器中,浏览器对有些标签默认样式(margin,padding)给出的大小不一解决:在写CSS之初,给出*{margin:0;padding:0}二、块属性标签float后,再给水平的margin,展现出来的margin和给出的margion不一样,(双倍显示)(ie6)原因:不详~~~解决:在float的标签原创 2016-11-17 20:20:02 · 324 阅读 · 0 评论 -
浮动元素居中
一个浮动的元素如何居中原创 2016-11-16 13:38:46 · 413 阅读 · 0 评论