css的一些小技巧
1、自适应大小的正方形
通过padding-bottom:100%; 控制图片显示的位置及自适应
<style> .wrap{ width: 50px; height: 50px; } img{ width: 100%; padding-bottom: 50%; // 高度始终是父级的一半； } </style> <div class="wrap"> <img /> </div> 复制代码2、绘制三角形
宽高为0，每个边框各为一个三角形; 开发时，只设置需要的边的颜色即可。
<style> .wrap{ width: 0; height: 0; border: 40px solid; border-top-color: #f00; border-bottom-color: #f00; border-left-color: #0f0; border-right-color: #0f0; } </style> <div class="wrap"></div> 复制代码3、隐藏滚动条
父级盒子溢出隐藏
滚动条级宽度+20px，让滚动条在父级盒子以外
<style> .wrap{ width: 200px; height: 200px; border: 1px solid #999; overflow: hidden; box-sizing: border-box; } .scroll{ width: 205px; height: 200px; overflow-y: scroll; } .content{ height: 300px; } </style> <div class="wrap"> <div class="scroll"> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> 复制代码
为了看到效果 所以没有全部隐藏。
4、节点层次结构
/*手动添加*/ * { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); } 复制代码/*JS添加 在控制台运行*/ const m_style = document.createElement('style'); const m_style_text = ` // 略 就上面的css复制过来即可 `; m_style.appendChild(document.createTextNode(m_style_text)); document.getElementsByTagName('head')[0].appendChild(m_style) 复制代码可以将css复制到浏览器控制台运行，调整各层级的颜色
5、BFC产生条件
作者：林深鹿
链接：https://juejin.cn/post/7023370722881830919