css

[yangchendoit]

flex space-between

display:flex
justify-content:space-between

实际场景

ul -> li 三列两端对齐 间隔自适应 设置li的width:31%
当某一行只有两列时
展示效果如下图所示

我们想要的效果如下图

解决办法

ul:after{content:"",width:31%}  

在ul里使用伪类添加一个同等宽度的子元素即可

::after css3语法
:after css2语法
支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after

[yangchendoit]

bem规范

bem: block element modifier, 是由在Yandex工作的开发人员想到的方法。

bem将组件的类拆分为三组：

• 块：组件唯一的根
• 元素：块的组成部分
• 修饰符： 块的扩展名

块可以由单个连字符命名-，元素由两个下划线__分隔，修饰符有两个连字符--分隔

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

[yangchendoit]

css优先级

等级	标签内选择符	ID选择符	Class选择符/属性选择符/伪类选择符	元素选择符
示例	<span style="color:red;">	#text{color:red;}	.text{color:red;} [type="text"]{color:red}	span{color:red;}
标记位	x,0,0,0	0,x,0,0	0,0,x,0	0,0,0,x

• 每个等级的初始值为0，
• 每个等级的叠加为选择器出现的次数相加
• 不可进位，比如0,99,99,99
• 依次表示为：0,0,0,0
• 每个等级计数之间没关联
• 等级判断从左向右，如果某一位数值相同，则判断下一位数值
• 如果两个优先级相同，则最后出现的优先级高，!important也适用
• 通配符选择器的特殊性值为：0,0,0,0
• 继承样式优先级最低，通配符样式优先级高于继承样式