随笔分类 - css样式问题
遇到不会的样式记录
摘要:遇到问题页面dom节点太多 可以通过进行优化懒加载优化,使用虚拟滚动技术,但是引入仍有些复杂度 可以通过css属性来进行懒渲染,content-visibility:auto ,这个属性可以自动优化渲染性能,它可以让屏幕之外的元素不立即渲染,就跟隐藏了一样
阅读全文
摘要:data.forEach((item, index) => { style +=@font-face {font-family: 'FileType${index}';src: url('${item.FileUrl}') format('truetype');} ht +=` }); $('hea
阅读全文
摘要:select{ background-image: linear-gradient(45deg, transparent 50%, #9A9A9A 50%), linear-gradient(135deg, #9A9A9A 50%, transparent 50%); background-posi
阅读全文
摘要:background-repeat:no-repeat;//取消平铺 background-position: center;//背景居中
阅读全文
摘要:在图片样式中添加 vertical-align:middle;
阅读全文
摘要:// overflow: hidden; // text-overflow: ellipsis; // /* 超出部分省略号 */ // display: -webkit-box; // /** 对象作为伸缩盒子模型显示 **/ // -webkit-box-orient: vertical; //
阅读全文
摘要:content-box 默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 w
阅读全文
摘要:一、flex container的属性 flex-direction 方向 flex-wrap 换行 flex-flow 上面两个的简写 justify-content 主轴方向对齐方式 align-items 侧轴对齐方式 align-content 多行/列内容对齐方式(用的较少) flex-d
阅读全文
摘要:.container { /* Content is centered horizontally */ align-items: center; display: flex; /* Reset styles */ list-style-type: none; margin: 0; } .contai
阅读全文
摘要:justify-content: flex-start: 项目对齐到容器的左侧. flex-end:项目对齐到容器的右侧. center:项目对齐在容器的中心. space-between:项目之间以相等的间距显示. space-around:显示的项目与他们周围的间距相等. align-items
阅读全文