POSTCSS
通过js来转换css，打包使用，postcss是css的babel
postcss插件：
autoprefixer:给c3提供前缀的插件
postcss-import:合并样式
cssnano:压缩css代码
postcss-cssnext 解析低版本不支持的属性
stylelint 不规范代码监测
postcss-sprites 精灵图/雪碧图
CSS3盒子伸缩和图片排列
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 。
text-overflow: ellipsis; // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp: 3;
CSS权重问题讨论
根据 W3 标准中的规定, css selector 分为 4 种,他们的数目计算规则为
-
如果 css 属性声明是写在
style=“”中的, 则数目为 1, 否则为 0 -
id 选择器的数目
-
class 选择器, 属性选择器(如
type=“text”), 伪类选择器(如:::hover) (伪元素)的数目 -
标签名(如:
p,div), 伪类 (如::before)的数目 -
在比较不同 css selector 的权重时, 按照 a => b => c => d 的顺序进行比较
-
由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.
-
重复的css权重可以累加，.testClass.testClass
高于.testClass，当然多个class权重累加不会高于id的权重
.testClass.testClass.testClass.testClass.testClass.testClass
.testClass.testClass.testClass.testClass.testClass {
background-color: red;
}
#testId {
background-color: black;
}
结果显示还是 id 选择器权重更高.
flex
- flex:1 ==flex:1 1 auto
- flex :flex-group flex-shirk flex-basis
1.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A为100px，B为200px.则剩余空间为100
此时A的flex-group为1，B为2，
则A=100px+100*1/3; B=200px+100*2/3
2.flex-shrik 子元素总宽度大于复制元素如何缩小
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少，则flex-shink ：0,B减少；
3.flex-basis
该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，
如果设置了width和flex-basis，那么flex-basis会覆盖width值。
line-height
- 不带单位的（如line-height:1.5） 这种是推荐使用的；可以传给子类
- 带单位的（如line-heigth:30px/1.5em/150%） 无法继承给子类
em/rem
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
样式百分比分析
- 子元素height和width的百分比 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
- top和bottom 、left和right 子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度， 同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。
- padding/margin 子元素的padding/margin如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关
- border-radius，translate，background-size 相对于自身的宽度
伪类（:hover） 伪元素(::before)
- 伪类的效果可以通过添加实际的类来实现,伪元素的效果可以通过添加实际的元素来实现,所以它们的本质区别就是是否抽象创造了新元素
- 伪类存在实际的文档流中，不需要单独创建；伪元素不存在实际文档流中，需要单独创建
