html
珍ྂ惜ྂ
这个作者很懒,什么都没留下…
展开
-
一行显示多个内容 不换行 可滑动
css .father{ overflow:hidden; white-space:nowrap; height: 100upx; } .son{ overflow-x: auto; } //去除滚动条并依然可滑动 .son::-webkit-scrollbar { display:none } html <div class="father"> <div class="son"></div> </div&原创 2020-10-19 14:17:05 · 489 阅读 · 0 评论 -
flex 布局 常用class 复制即可使用
推荐常用flex布局 /*复制到公共样式文件中即可使用*/ /*盒模型*/ .flex { display: flex; } /* 纵向排列 */ .flex_d_c { flex-direction: column; } /* 横向居中对齐 */ .flex_j_c { justify-content: center; } /* 自适应间距 */ .flex_sx { justify-content: space-around; } /*原创 2020-10-19 14:12:57 · 484 阅读 · 0 评论 -
img 图片自适应css3属性
object-fit:contain|cover|fill|none|scale-down contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象会添加“黑边" cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。 fill 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将原创 2020-10-19 14:10:29 · 2088 阅读 · 0 评论 -
css3简易瀑布流布局
注意:只适用于简单的瀑布流布局,复杂的建议走js路线 .father{ column-count:2;//将列表显示为2列 } .son{ break-inside:avoid;//避免在元素内部断行并产生新列 } <div class="father"> <div class="son"></div> <div class="son"></div> <div class="son"><原创 2020-10-19 14:08:17 · 189 阅读 · 0 评论