@import"../fouc.css";Flex布局（弹性布局，默认主轴，交叉轴，先说说flex：1）flex布局是弹性布局的一种，设置容器为flex布局后，浮动，clear，vertical-align会失效，容器默认有两个轴（主轴，垂直横轴），默认沿主轴排列。再说说flex的属性。外层容器属性：flex-direction：控制主轴和副轴[axial]flex-wrap：控制换行（默认不换行）flex-flow：以上两者的结合，简称justify-content：主轴alignment[alignment]align-items:横轴对齐align-content:多轴对齐flex:[elasticity]flex-direction:row|行反转|栏目|列反转；弹性包装：nowrap|包装|换行；flex-flow:;证明内容：flex-start|弹性端|中心|间隔|空间周围；对齐项目：flex-start|弹性端|中心|基线|拉伸；对齐内容：flex-start|弹性端|中心|间隔|环绕空间|flex-grow:1equalspaceflex-shrink:1scalereductionflex-basis:autoflex以上三个缩写align-selfalignment利用flex实现垂直居中justify-content:center+align-items:center实现水平垂直居中Arrangeflex:1flex:1是flex-grow,flex-shrink,flex-basis的缩写，分成等大小用flex实现九格响应式布局你知道有哪些响应式布局方式吗媒体查询100%remUIframe块元素next-block元素和行内元素有什么区别和特点？块级元素将占据一行。默认情况下，它们的宽度将自动填充其父元素的宽度。行内元素不会占用一行。相邻的行内元素会排在同一行。知道哪些空元素（像img这样的单标签元素）br、meta、hr、link、input、imgcss哪些属性是可继承的和不可继承的：display、baimargin、border、padding、background、height、min-height、max-height,宽度,最小宽度,最大宽度,溢出,位置,左,右,顶部,底部,z-index,浮动,清除,table-layout,vertical-align,page-break-after,page-bread-before和unicode-bidi。所有元素继承：可见性和光标。行内元素可以继承：letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-转变，方向。块元素可以继承：text-indent和text-align。列表元素可以继承：list-style、list-style-type、list-style-position、list-style-image。表格元素可以继承：border-collapse。你知道CSS动画吗？再说transform2D:translate(x,y)translation,scale(x[,y]?)scaling,rotate(angle)rotation3D:translate3d(x,y,z),scale3d(x,y,z),rotate3d(x,y,z,angle)CSS3新特性，伪类，伪元素，anchor伪类增加了很多选择器：(E:nth-child(n),E:last-child:,E:disabled,E:checked)CSS3动画相关：Transition过渡、Transform变换（3D旋转）和Animation动画边框、阴影、圆角、背景（background-size）文字效果（word-wrap、多行显示省略号）渐变（linear-gradient,radial-Gradient)盒模型常见伪类：:focus,:hover,:link,visited,:first-child等；单冒号；伪类的概念常见伪元素：::after,::before等（单冒号为了兼容IE，是CSS2语法）。双冒号；用于创建不存在的DOM树元素。Anchor伪类：用来表示链接的状态，顺序为：a:link-a:visited-a:hover-a:actived。css垂直居中的n种方法宽高可变，水平和垂直居中：absolutepositioning+transform:position:absolute;左：50%；顶部：50%；转换：翻译（-50%，-50%）；flex布局：（主轴居中，横轴居中）display:flex;证明内容：居中；对齐项目：居中；父元素设置显示：table-cell+vertical-align:middle实现固定宽高：absolute定位+margin:autoposition:absolute；左：0；右：0；底部：0；顶部：0；保证金：自动；absolute定位+margin负间距水平垂直居中位置：absolute；左：50%；顶部：50%；左边距：-50px；margin-right:-50px;line-height:单行文本框模型有哪两种模式？有什么不同？如何设置标准模式：box-sizing:content-box;宽高不包括padding和border奇怪模式：box-sizing:border-box(IE)请说说px,em,rem,vh,wh等单位的理解。你用的是什么单位px？如果显示器屏幕分辨率相同，则可视为绝对单位。如果显示器屏幕分辨率不同，则与显示器屏幕分辨率有关。em，相对于元素的font-size属性值，由于f??ont-size是可继承的属性，如果元素没有显式设置font-size属性值，则会继承元素父元素的font-size值，如果元素的父元素没有显式设置font-size属性值......最终继承自根元素（HTML元素），如果根元素没有显式设置font-size属性值，则使用用户代理的默认字体大小属性值。rem，根em，是CSS3新的相对单位。与em不同的是，使用rem为元素设置font-size属性值时，只是相对于根元素（HTML元素）。vh，视点高度，窗口的高度，1vh等于窗口高度的1%。vw，视点宽度，窗口宽度，1vw等于窗口宽度的1%。in，pt，说说rem，em，px的区别。rem相对于根元素(html)em相对于设置字体大小的父元素px。绝对单位是相对于显示器的分辨率。(html),设置移动端html的font-size:calc(100vw/7.5);如何解决不同浏览器的样式兼容问题？一旦您确定了问题的原因和有问题的浏览器，请使用仅由有问题的浏览器加载的单独样式表。这种方法需要使用服务器端渲染。使用已经处理此问题的库，例如Bootstrap。使用autoprefixer自动生成CSS属性前缀。使用重置CSS或Normalize.css。display:none和visibility:hidden的区别：display:none和visibility:hidden是隐藏元素。但前者是让元素从dom结构中消失，后者还在dom中但不显示在界面上。所以前者是reflow（需要改变dom结构），后者是重绘。CSS优先级!improtant具有最高优先级。当内联样式id>class优先级相同时，选择后面写入的样式。总结：!important>内联样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认improtant属性影响什么，权重值元素选择器：1div{}类选择器：10.class{}id选择器：100#id{}inlinestyle:1000style="..."!importantdeclaredstyle优先级最高，这个样式声明会覆盖CSS中的任何其他声明，使用!important不是一个好习惯，因为它改变了原有的级联样式表的规则，使其难以调试。要优化考虑使用样式规则的优先级来解决问题而不是!important。base64图片，优缺点base64编码可以给css添加图片，实现css请求下载图片。优点：减少图片请求，（雪碧图也可以减少请求）缺点：图片加载会影响css文件大小比源文件大1/3，IE8以下不兼容。性能优化：SkeletonscreenSkeletonscreen可以理解为加载数据之前的空白版页面。在页面完全呈现之前，用户将看到一个骨架屏幕，其样式简单，描绘了当前页面的总体框架。页面，然后骨架屏的各个占用部分被实际资源完全替换。在这个过程中，用户会感觉到内容正在逐渐加载并呈现出来，减少了用户的焦虑感，使加载过程在主观上变得顺畅。骨架屏的实现原理很简单，就是通过占用线框元素来逐步加载数据。骨架屏结合懒加载功能，在页面加载前呈现页面的基本结构。什么是FOUC（无样式内容的Flash）？你如何避免FOUC？FOUC-无样式内容的闪烁文档样式闪烁@import"../fouc.css";并且引用CSS文件的@import是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后导入外部CSS文件。因此，从页面DOM加载完成到CSS导入完成之间会有一段时间。互联网速度和计算机速度都很重要。解决方案：只需在之间添加一个或
