随笔分类 -  css

flex布局 滚动条失效
摘要：flex布局中，父元素： parent:{ display: flex; } 子元素： child:{ flex: 1; overflow: auto; } 子元素默认占满父元素；子元素内容超过后，没有出现滚动条； 子元素： child:{ flex: 1; overflow: auto; widt 阅读全文
posted @ 2021-07-28 15:13 PiPai 阅读(1803) 评论(0) 推荐(0)
设置input[type=number]不显示箭头
摘要：input[type=number] { &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; } -moz-appearance: textfield; } 阅读全文
posted @ 2020-05-29 10:42 PiPai 阅读(4975) 评论(0) 推荐(2)
css文本溢出显示省略号
摘要：1.单行文本溢出 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本溢出 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clam 阅读全文
posted @ 2019-12-05 15:44 PiPai 阅读(143) 评论(0) 推荐(0)
css画行内分隔线
摘要：内容取自：https://www.cnblogs.com/lulushow/p/6873278.html 为行内元素画长宽可变化的居中分隔线 1、采用display:inline-block样式 这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置displa 阅读全文
posted @ 2019-12-04 17:35 PiPai 阅读(495) 评论(0) 推荐(0)
css绝对定位居中
摘要：技术参考：https://www.php.cn/css-tutorial-409962.html 1.兼容性不错的主流css绝对定位居中的用法： 1 .conter{ 2 width: 600px; height: 400px; 3 position: absolute; left: 50%; to 阅读全文
posted @ 2019-11-04 18:16 PiPai 阅读(1528) 评论(0) 推荐(0)
flex产生水平滚动条
摘要：1 li { 2 width: 100px; 3 height: 30px; 4 display: inline-block; 5 background: red; 6 } 7 .box li:nth-child(2n) { 8 background: blue; 9 } 10 .box{ 11 w 阅读全文
posted @ 2019-09-18 15:59 PiPai 阅读(1628) 评论(0) 推荐(0)