![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Css
文章平均质量分 50
深海有鱼呀
永远年轻,永远热泪盈眶
展开
-
flex:1 到底代表什么?
最近面试,面试官问道让说一下flex的属性;突然发现不知道,只是经常的写flex:1;查阅资料后来记录一下代码第一版<div class="container"> <div class="div">我是一个div</div> <div class="div">我是一个很多字div</div> <div class="div">我是一个更多字而且第三个div</div></div><sty原创 2021-01-19 15:55:48 · 3901 阅读 · 0 评论 -
input获取焦点不生效问题
js控制input获取焦点:$('input').focus(); 无效: 写在延迟函数中问题解决: setTimeout(()=>{ $('input').focus();})可能原因:浏览器对dom的操作是等待代码执行完毕后进行。原创 2020-05-11 20:03:06 · 3253 阅读 · 1 评论 -
css进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2020-06-19 16:43:17 · 140 阅读 · 0 评论 -
css之hover改变另外一个元素的状态
以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了,例如classA:hover classB{display:none;}但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元素是兄弟关系,用老写法...原创 2020-06-19 16:39:53 · 480 阅读 · 0 评论 -
p标签单行或多行超出显示省略号
单行省略// 单行显示省略号p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}多行省略-webkit-line-clamp: 3; 表示超出3行显示省略号,以此类推// 多行显示省略号,数字3为超出3行显示,p { display: -webkit-box; -webkit-box-ori...原创 2020-06-19 16:30:19 · 6114 阅读 · 0 评论 -
元素的水平居中,垂直居中,垂直水平居中。
margin使用百分比参考父元素,translate使用百分比参考自身。水平居中## 1:margin: 0 auto:## 2:.parent{ text-align: center; } .child{ display: inline-block; } 优点:代码少,兼容性好??inline-block ie6-7不兼容(可用inline+zoo...转载 2020-06-19 16:21:12 · 98 阅读 · 0 评论