css篇

盒子模型 box-sizing

box-sizing：content-box|border-box|inherit
标准盒模型：content-box默认值，总宽度=margin+border+padding+width
怪异盒模型：border-box，总宽度=margin+width（width已经包含了border+padding）
inherit：规定应该从父元素继承box-sizing的值

移动端1px边框问题

1、使用after伪类和transfrom和scaleY(.5)
2、使用边框阴影 box-shadow: inset 0px -1px 1px -1px #c8c7cc;
3、border-image
4、background-image

transtion与animation的区别

他们的大部分属性是相同的，都是随着属性的属性值改变而触发，他们的主要区别就是transtion需要触发一个事件才能改变属性，而且是2帧2帧的，而animation是1帧1帧的

不定高的div居中

flex
display:flex;
justify:cenetr；
align-items:center;
transfrom
position:absolute;
top:50%;
left:50;
transfrom:translate(-50%,-50%)
display:table-cell
父盒子设置:display:table-cell; text-align:center；vertical-align:middle；
Div 设置: display:inline-block；vertical-align:middle;

浮动

为什么要清楚浮动，？解决父元素高度塌陷问题，一个块级元素如果没有设置height，其height是由子元素的高度撑开的，对子元素设置浮动之后父元素的高度就没有了，这就是所谓的高度塌陷

清除浮动的方法

1、给父盒子设置高度：只适合内容固定的元素
2、使用空元素：clear:both; 出现很多空标签
3、让父级div一起浮动：会产生新问题
4、父级定义display：table：会产生新的问题
5、父元素设置overflow：hidden、auto来触发BFC，无法显示溢出元素
6、.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照顾IE6，IE7就可以了

BFC相关知识

“块级格式化上下文”，是一块独立的渲染区域
特点：
BFC元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
BFC元素不会与浮动的盒子重叠
计算BFC高度时，浮动元素也参与计算
哪些元素会生成BFC：
根元素
float不为none
position为absolute和fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible

优先级

！important>style>id>class>tag>*>继承属性>浏览器默认属性

css画一个三角形

width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transprent;
border-right:50px solid transprent;

使元素消失

visibility:hidden、display:noe、z-index:-1、opacity:0
visibility:hidden；元素隐藏起来但是不会改变布局
display:none；把元素隐藏，会改变布局，相当于删除DOM
opacity:0；元素隐藏，但是还占位置，事件也可以触发

为什么css放在顶部js放在底部

浏览器预先加载css后，可以不必等待html加载，可以直接渲染页面
html渲染是一遍解析一边渲染
js写在尾部，是因为js主要的用处是事件处理功能，还有就是很多操作是在页面渲染完成后才执行的。另一方面可以节省加载事件，提升用户体验，
但是随着js的发展，有些js也可以渲染页面，所以把渲染页面的js放在前面，事件处理的放在后面