1、css选择器优先级
1、!important > inline > id> class >tag>*>inherit >default
2、注意：min-width 的优先级比 width:100 !important的优先级高。参考css世界
3、相同的class样式，css中后写的优先级高，和html中的class名字前后无关
2、水平垂直居中
3、清除 inline-block间隙
1、移除空格
2、使用mairgin负值
3、使用font-size:0
4、letter-spacing :字符间距
5、word-spacing:单词间距
4、清除浮动
5、外边距重叠
布局垂直方向上两个元素的间距不等于margin的和，而是取较大的一个
1、同级相邻元素解决办法：设置margin-bottom或marigin-top中的一个，或者用padding
2、父子元素解决办法：父元素又padding-top或者border-top.或者触发BFC。设置父元素overflow:hidden
6、三栏布局（双飞翼、圣杯布局）
1、float
2、position
3、flex
4、双飞翼或者圣杯布局，利用负margin和float
7、BFC
1、概念：块级格式化上下文
2、规则：BFC区域内的元素外边距会发生重叠;BFC区域内元素不会与浮动元素重叠；计BFC高度时，浮动元素也会参与计算；BFC区域就相当于一个容器，内部的元素不会影响到外部,外部元素也不会影响到内部
3、应用：（1）清除浮动，父元素设置overflow:hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕
（2）清除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow:hidden,构建BFC使不影响外部元素
（3）消除父子元素边距重叠，父元素设置overflow:hidden
4、触发BFC的方式（1）float不为none,浮动元素所在的区域就是一个BFC
（2）position的值不是static或relative的元素所在的区域就是一个BFC
（3）display:table-cell的表格单元格元素所在的区域也是一个BFC
（4）overflow不为visible的元素所在的区域也是一个BFC
8、flex布局
1、概念：（1）容器&项目
（2）主轴&交叉轴：默认主轴是水平方向，交叉轴是垂直方向。可通过flex-derection:column改变主轴为垂直方向
2、容器属性：flex-direction:项目的排列方向；
flex-wrap:是否换行，nowrap,wrap,wrap-reverse
flex-flow:direciton 和wrap的简写
justify-content:主轴对齐方式
align-items:交叉轴对齐方式
align-content:多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
3、项目的属性
order:项目的排列顺序，数值越小，排列越靠前
flex-grow:放大的比例。默认为0，指定元素分配到剩余控件的比例
flex-shrink:缩小比例，默认为1，指定元素分配到缩减控件的比例
flex-basis：分配多余空间之前，项目占据的主轴空间。默认为auto
flex:grow，shrink,basis的简写，默认值为0 1 auto
align-self:单个项目不一样的对齐方式，默认值为auto
9、css动画
1、定义：transition过渡，将变化按照设置的时间长度缓慢执行完毕，而不是立即执行。
delay的真正意义在于，它指定了动画发生的顺序。使得多个不同的transition可以连在一起，形成复杂的效果
transition:过渡属性，过渡时间长度，延迟几秒执行，过渡函数（linear匀速，ease-in加速，ease-out减速，cubic-bezier自定义函数模式，可以使用工具网站生成）
局限：（1）需要事件触发，所以没法再网页加载时自动发生
（2）一次性的，不能重复发生，除非再次触发
（3）只能定义开始状态和结束状态，不能定义中间状态
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性
2、
若有收获，就点个赞吧
0 人点赞
