随笔分类 -  frontend / scss、less、css

摘要：<style> #root{ /*父元素*/ width: 500px; height: 500px; display: table; } #root .no1{ /*子元素*/ display: table-cell; vertical-align: middle; /*上下居中*/ text-a 阅读全文

摘要：.inputs(@name) { @box: Box; .@{name}@{box} { //........... } } .input(textarea) // compile result: .textareaBox{ //......... } 阅读全文

摘要：垂直居中：vertical-align ： 1、只能作用在子元素 display 值为 inline，inline-block，inline-table，table-cell 的元素上， 2、子元素 设置vertical-align 3、父元素高度是由line-height决定（不要乱给父元素添加h 阅读全文

摘要：.textBox { font-family: "Microsoft YaHei"; font-size: 28px; font-weight: bold; white-space: nowrap; line-height: 40px; background: linear-gradient( 30 阅读全文

摘要：普通使用 nth-of-type: <div class="box"> <div> 第一个元素 </div> <p>没有用的元素</p> <div> 第二个元素 </div> </div> .box div:nth-of-type(2){ /*这里面匹配到的是：第二个元素*/ } 如果使用类选择器加 阅读全文

摘要：一、margin上塌陷解决方案(无中生有的margin-top)： 1.父级元素设置padding-top:1px;//最不靠谱的解决方案 2.父级元素设置 overflow: hidden; 或者 overflow:auto; 或者 overflow: scroll; //最现实的解决方案 3.父 阅读全文

摘要：.box{ position:relative; }.glider{ position: absolute; bottom: 0rpx; left: 0; width: 50%; height: 6rpx; border-radius: 3rpx; display: flex; align-item 阅读全文