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 · 3987 阅读 · 0 评论 -
input获取焦点不生效问题
js控制input获取焦点: $('input').focus(); 无效： 写在延迟函数中问题解决： setTimeout(()=>{ $('input').focus(); }) 可能原因：浏览器对dom的操作是等待代码执行完毕后进行。原创 2020-05-11 20:03:06 · 3398 阅读 · 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 · 196 阅读 · 0 评论 -
css之hover改变另外一个元素的状态
以前也遇到过hover一个元素,显示或者隐藏另一个元素的场景,如果是父子元素关系,这种非常好写,在选择器后加一个空格,跟上另一个选择器就行了, 例如 classA:hover classB{ display:none; } 但是有时不是父子元素关系,加空格就不行,以前都时用less这种css预处理语言写的,稀里糊涂就出效果了,这次用styus,非常不习惯,遇到这样一个场景,元素是兄弟关系,用老写法...原创 2020-06-19 16:39:53 · 522 阅读 · 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 · 6321 阅读 · 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 · 119 阅读 · 0 评论