随笔分类 - LayoutUI
摘要：VSCode CSScomb 插件配置 { "always-semicolon": true, // 总是显示分号 "block-indent": " ", // 代码块缩进，可以是数字或字符串与空白和制表符等 "color-case": "lower", // 十六进制颜色统一，可选值'lower
阅读全文
摘要：LayoutSimple 是一款简易的自由度极高的前端响应式布局 CSS 框架，项目使用 LESS 开发，含有一些实用的 LESS Mixin，如果对 LESS 有些功底的朋友可以自由发挥和组合。
项目地址：https://github.com/qc-web-y/LayoutSimple
适用人群：前端开发布局随意性较大，自由度需要很高的前端开发项目
阅读全文
摘要：一直以来，前端开发过程中本人遇到最多，最烦的问题之一是元素如何垂直居中，发现开发过程中，元素的垂直居中一直是个很大的麻烦事，经常发现PC端和电脑模拟元素都垂直居中了，但是遇到移动端真机总是会出现层次不穷的问题，让人头大不已。因此我决定好好研究下究竟如何正确让元素垂直居中。本文是我的一些研究过程，最终总结出两个结论当为父父级-父级-子集式 || 父级-子集式，解决方案：管他父级还是父父级，无固高不用管，有固高加行高。当为父父级-父级-子集式 || 父级-子集式，解决方案：管他父级还是父父级，无固高不用管，有固高加行高
父父级-混合父级-混合子集式：什么都别管，先给所有内联块级父子集加{ vertical-align: middle; }样式，还有不对齐的往他前面塞个高度100%的内联块级元素，并添加{ vertical-align: middle; }样式，完美解决元素各种垂直居中难题！
阅读全文
摘要：Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 20px black; } //output css .study { box-shadow: in
阅读全文
摘要：loop循环 example: .test(@i) when (@i > 0) { .test((@i - 1)); .study@{i} { width: (10px * @i); } } div{ .test(2); } //output css div .study1 { width: 10p
阅读全文
摘要：mixin卫士--判断 或与且语法 且：()and() 或：(),() --且 examlpe: .test(@a) when (isNumber(@a)) and (@a>=5){ font-size:unit(@a,px); } .study{ .test(10); } //output css
阅读全文
摘要：mixin卫士--判断 类似于JavaScript的if/else example: .test(@a) when (@a>10){//当大于10 font-size:18px; } .test(@a) when (@a<=10){//当小于等于10 font-size:12px; } .test(
阅读全文
摘要：//@import 导入选项 --@import 可以至于任何你需要导入的地方 在标准的CSS，@import在规则必须先于所有其他类型的规则。但Less.js不关心 example: .test(){ color:#ff6a00; } .study{ .test; } @import "study
阅读全文
摘要：//Mixins --立即执行函数 .test{/* */} #test{/* */} --指定执行函数 .test(){/* */} #test(){/* */} --调用： .test; or .test(); #test; or #test(); 这些函数，你可以用css的各种选择器去命名 -
阅读全文
摘要：//mixin传参 --简单传参，example： .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .callUse{ .
阅读全文
摘要：//!important关键字 使用!important关键字混入调用之后，以标记它继承的所有属性!important，example: .test{ background:red; font-size:18px; color:blue; } .study{ .test()!important; }
阅读全文
摘要：//mixin函数 基础使用方法 --包含选择器，example: .test(){ &:hover{ border:1px solid red; } } button{ .test; } //output css button:hover { border: 1px solid red; } --
阅读全文
摘要：//mixin函数 立即执行mixin函数，example： .test{ color:#ff00000; background:red; } //立即执行mixin grammar 1 扩展extend .study{ &:extend(.test); } //输出css .test, .stud
阅读全文
摘要：//扩展Extend Use Method：以在study上扩展指定多层嵌套选择器样式 //Share style .test{ font-size:18px; color:#ffffff; ul{ width:100px; height:50px; li{ float:left; margin-r
阅读全文
摘要：//扩展Extend Use Method：以在study上扩展多个的样式为例 //Share style 1 .style1{ width:200px; height:15px; color:#ffffff; } //Share style 2 .style2{ float:left; backg
阅读全文
摘要：//扩展Extend less的伪类，合并了选择器，放在与它引用匹配的选择器上 Use Method：以在study上扩展test的样式为例 .test{ color:#000000; font-size:18px; } //grammar 1 .study{ &:extend(.test); ba
阅读全文
浙公网安备 33010602011771号