标签：复习 less auto 100% bootstrap father width 偏移
目录less的继承
我们通过.选择器的方式，写个基础的样式库，然后通过&:extend(.father)来进行继承。
这里有两种写法：
// 第一种写法：我们建议使用这种语法，这种语法比较干净。
#test {
// xxxx
&:extend(.father)
}
// 第二种写法
#test:extend(.father){
// xxxx
}
- 继承实质上（在css层面的表现）将
.father选择器和#test选择器组合成为一个选择器，声明块使用.father的。 all的使用规则: 继承所有和.father相关的声明块。- 切记：父类不能定义成混合，这个规则导致继承这个机制相对不灵活，因为没有办法传参数，而混合机制相对灵活，是可以传参数的。可是继承机制的性能比较高，因为css文件比较小，混合机制灵活，但是性能相对来说，有点低。从性能上来说，最好使用继承，但是在开发中会发现还是使用混合比较多。
less的避免编译
less的避免编译的语法如下：
~"不会被编译的内容，这里面也可以写变量，变量在less中属于块级作用域，变量是有延迟加载的。"
bootstrap的栅格系统&源码分析
- 概念
- 流体容器：
width=autowidth=auto和width=100%的区别，参看本文后面tip1章节的解释。- 公共样式：
两侧有15px的padding。
- 固定容器：
- 阈值：
移动优先的原则- xs：小于768px
width: auto - sm: 大于等于768px
[小于992px]，width = 720px + 槽宽(30px) - md: 大于等于992px
[小于1200px]，width = 940px + 槽宽(30px) - lg: 大于等于1200px，
width = 1140px + 槽宽(30px)
- xs：小于768px
- 公共样式：
两侧有15px的padding。
- 阈值：
- 行：
- 公共样式：
两侧有-15px的margin。
- 公共样式：
- 列：
- 公共样式：
两侧有15px的padding、相对定位(left、right) - 怎么控制列float（用于列排序）：因为所有列要去到一行，所以都要有float。
- 怎么控制列width：
1-12 - 怎么控制列left：
0-12（0的时候，是auto），列排序，注意列排序的时候xs、sm、md、lg的pull和push设置，不要跳跃。 - 怎么控制列right:
0-12（0的时候，是auto），列排序，注意列排序的时候xs、sm、md、lg的pull和push设置，不要跳跃。 - 怎么控制列margin-left：
0-12（0的时候，是0），列偏移，关于列偏移的使用，参考本文后面tip2章节的介绍。
- 公共样式：
- 流体容器：
tip1：width auto 和 100%的区别
width = auto
这种风格，有点像border-box哦！
width = 100%
这是一个基础的知识点。
tip2：列偏移
列偏移，修改的，就是margin-left。
标签：复习,less,auto,100%,bootstrap,father,width,偏移 来源： https://www.cnblogs.com/gnuzsx/p/15616698.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。