@import"../fouc.css";Html1.解释一下，主要来自于utf-8，utf-8是一种字符编码，是世界通用的，意思就是如果项目涉及到多种语言的话，只能使用这种编码方式.是使用html5文档类型。告诉浏览器的解析器使用什么文档类型规范来解析这个文档。摒弃html4之前的4种文档类型2.语义理解**what?**?根据内容结构（内容语义），选择合适的标签（代码语义），方便开发者更优雅的读写代码允许浏览器爬虫和机器来很好地解析它。**为什么？**?为了在没有CSS的情况下呈现出良好的内容结构和代码结构：为了裸奔时好看；?用户体验：例如title和alt用于解释名词或解释图片信息，灵活使用label标签；?有利于SEO：与搜索引擎建立良好的沟通有助于爬虫抓取更有效的信息：爬虫依靠标签来确定每个关键字的上下文和权重?方便其他设备分析（如屏幕阅读器、盲人阅读器，移动设备）以有意义的方式呈现网页；?方便团队开发和维护，语义更易读。这个标准可以减少分化。**怎么做？**?尽量少用非语义标签div和span；?当语义不明显，可以用div或者p的时候，尽量用p，因为p默认有上下间距。有利于兼容特殊终端；?不要使用纯样式标签，如：b、font、u等，改用css设置。?需要强调的文字可以包含在strong或em标签中（浏览器预设样式，如果能用css指定则不需要），strong默认样式为粗体（不用使用b)，em为斜体（不要使用i）；?使用表格时，标题使用caption，表头使用thead，正文使用tbody，表尾使用tfoot。表头应与普通单元格区分开来，表头使用th，单元格使用td；?表单字段要用fieldset标签包裹，用legend标签说明表单的用途；?每个input标签对应的描述文字需要使用label标签，通过为input设置id属性，在lable标签中设置for=someld，将说明文字与对应的input关联起来。3、iframe的优缺点，如何使用iframe的优点：?iframe可以完整显示嵌入的网页。?如果多个网页引用了iframe，那么只需要修改iframe的内容就可以改变调用的每个页面的内容，方便快捷。?如果网页有相同的header和version，为了统一风格，可以写成一个page，用iframe嵌套，可以增加代码的复用性。?如果遇到图标、广告等第三方内容加载缓慢，这些问题都可以通过iframe来解决。?重新加载页面时，不需要重新加载整个页面，只需要重新加载页面中的一个框架页面（减少数据传输，提高网页下载速度）。iframe的缺点?1.页面样式调试麻烦，有多次滚动?2.浏览器后退按钮无效；?3.过多会增加服务器的HTTP请求；?4.小型移动设备无法完整显示边框；?5、生成多个页面，难以管理；不易打印；?7.代码复杂，部分搜索引擎无法解析。?8、iframe会屏蔽主页面的Onload事件；4.谈谈对Label的理解?作用：表示要绑定到Label标签的HTML元素。当您单击此标签时，绑定的元素将获得焦点。?用法：名称CSS5。谈谈对css选择器的理解选择器有9种1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ulid>class>tagimportant比inline优先级高6.css元素类型块元素的理解：块：p,ul,li,dl,ol,dt,h1~h6,hr,div,pre,table。form,fieldset内联元素：inline:a,span,img,input,label,select,strong,textareabr,code,sup,sub；比较知名的空元素：![]()
区分块元素：可以容纳block和inline等其他元素，不能和其他元素走，对width和height起作用。（即可以设置宽高，单独占一行）内联元素：只能容纳文本和内联元素，允许其他内联元素一起走，宽高没有作用在他们。inline不响应垂直边距和填充（但请避免）、宽度、高度、最大/最小宽度/高度和其他属性声明。空元素，主要来说，input可以看成是一个内联元素，因为它可以和其他元素走，宽高对它有影响。提示：内联元素的宽高请使用display:inline-block7。谈谈对定位的理解。absolute生成绝对定位的元素，相对于第一个父元素定位，而不是静态定位。fixed（旧IE不支持）生成绝对定位的元素，相对于浏览器窗口定位。relative生成??相对定位的元素，相对于其正常位置定位。静态默认。没有定位，元素出现在正常流中（忽略顶部、底部、左侧、右侧的z-index声明）。谈谈对盒子模型的理解。盒子模型有两种标准，一种是标准模型w3c，一种是IE模型。标准框的宽度等于width+margin+padding+border；width是内容的宽高IE的盒子模型：width=content(内容)+填充(padding)+边框(border)的总宽高)如何设置两种css模型：box-sizing：内容框；边框框；注意：input和button元素的默认border-box仍然基于传统的iebox模型。但是文档类型是standardmode，所有元素都是w3cboxmodel9.marginoverlap和BFC：marginoverlap的问题：父元素没有设置margin-top，而子元素设置了margin-top:20px；可以看到注意父元素也有边距。相邻的上下元素margin-top和margin-bottom也会重叠。marginoverlapping/marginmerging注意事项：marginmerging只出现在块级元素上； 浮动元素不会将边距与相邻元素合并； 绝对定位的元素不会将边距与相邻元素合并； 内联块级元素不会合并外边距； 边距不会在根元素之间合并（比如html和body之间）； 设置了属性overflow且值不可见的块级元素不会与其子元素重叠,table-cell,table-caption,flex,inine-flexoverflow不可见根元素BFC适用场景?自适应两列布局?清除内部浮动?防止垂直边距重叠左边或右边如果要显示同一行中的多个块，您可以将这些块设置为向同一方向浮动。为什么要清除浮动？浮动的缺点：1.当元素有默认属性，并且每个浏览器的默认属性值不一样，而作者不知道它的重要性和重要性时，父元素（比如的背景属性）父元素），margin属性有影响）和后面的元素有影响，导致布局混乱。2.浮动元素的高度会塌陷，高度的塌陷会导致我们页面后面的布局无法正常显示。所以需要在父元素上使用Clear来清除浮动。清除浮动的方法有3种：1.多加一层：#haa{display:block;clear:both;height:20px;}2.给父元素添加overflow:hidden;属性。但是IE6不支持，需要给父元素加上zoom:1属性。3.使用伪类after的例子：.cf:after{content:"";高度：0；显示：块；清除：两者；行高：0；Visibility:hidden;}.cf{zoom:1}/IE6不支持通过clear:both和0行高清除浮动，需要加上zoom:1/注意：使用时：浮动布局时，会有doubleie6环境下的marginbug（即元素浮动的方向和margin方向相同时，margin会是原来的两倍。）解决办法是加上display:inline;元素的属性。11、为什么要初始化css样式表?方法一、reset.css可以重置浏览器的默认属性。不同的浏览器有不同的风格，reset可以统一。比如IE浏览器和FF浏览器显示的按钮不一样，可以通过reset统一样式，显示相同的效果。但是很多reset是不必要的，写多了会增加浏览器在渲染页面时的负担。?方法二：normalize.css是可自定义的css文件，可以让不同的浏览器更统一地渲染元素。12、CSSspritevs字体图标CSSSprites其实就是将网页中的一些背景图片整合成一个图片文件，然后使用CSS“background-image”、“background-repeat”、“background-position”的组合做背景定位，background-position可以用数字来准确定位背景图片的位置。13.实现水平和垂直居中的方法实现div的水平居中和垂直居中1.适用：设置宽高，设置position：absolute（记得设置父元素：relative），然后设置top和left为50%、50%，然后设置margin-left=width/2，margin-top:width/22。仅适用：固定宽度和高度；如果宽高是随机的，如果要靠里面的话，就会占满整个父div。还是用position:childdiv设置top,bottom,left,right为0，然后设置margin为auto。关键是设置position：childabsolute，parentrelative。3.适用：无论宽高是否固定，都可用。问题是兼容性。IE9及以下不支持设置parentflex属性：display:flex;证明内容：居中；对齐项目：居中；4.适用：要设置Width，否则会使宽度等于父div的宽度。在父元素上设置display:table-cell，然后设置vertical-align:middle。该方法可以设置垂直居中。这时候只要在子元素中设置margin:auto就可以实现水平居中，但是这种方式好像让父元素的居中失效了。5.适用：可以不指定宽高，使用transform居中。设置父位置：相对；子位置：绝对。然后是top：50%；左：50%；转换：翻译（-50%，-50%）6。适用性：指定宽高百分比，保证left和right的百分比相同实现水平居中，保证top和bottom的百分比相同实现垂直居中。但是这种方法不能通过内部元素自动调整div的宽高，而是通过控制父元素的大小，它的高度与容器的高度一致。相对于“备胎”垂直居中，视觉上表现为相对容器垂直居中。8、多元素水平居中1）设置子div显示：inline-block；然后在父div上设置text-align:center；2）使用flex-box更方便灵活，设置水平居中justify-content:center9。使用网格布局10。使用flex14.CSS3的新特性：?添加各种CSS选择器（:not(.input):class不是"input"的所有节点）ciRoundedcornerborder-radiuis?Multi-columnlayout：多列布局?Shadowandreflection：多列布局?文字效果：text-shadow线性渐变：gradient?旋转：transform?缩放、定位、倾斜、动画、多背景：transform:scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg)动画15。css有哪些优化（压缩合并图片规范）？标题里好像已经写了答案。详见以下前端优化16、常见问题及解决方法1、如何清除图片下方几个像素的空白间隙？方法一：img{display:block;}方法二：img{vertical-align:top;}方法三：.test{font-size:0;line-height:0;}.test是img的父元素2.如何让页面文字的行间距始终保持n倍字号的调性？方法：body{line-height:n;}3、如何让容器透明，内容不透明？方法一：容器层和内容层并列，设置容器层的透明度。内容层通过负边距或位置绝对定位的方式叠加在容器层上。方法二：普通的子父容器方法，使用background:rgba(对于附加容器0,0,0,0.3);ps：透明度的问题：filter:alpha(opacity=20)opacity:0.24。如何让文字溢出边界，显示为省略号？.test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}5.如何自动换行连续的长字符串？.test{width:150px;word-wrap:break-word;}6.让文字不换行就溢出边界强制显示在一行？.test{width:150px;white-space:nowrap;}7.chrome登录页面去掉密码后，回答输入框黄色背景：input:-webkit-autofill{background-color:#fff!important;-webkit-box-shadow:00040px#fff插图；}8.分页不能正常跳转到对应页面：解答：表单form9.returnfalse被添加。表单表格的td明明设置了宽度，为什么还是不行？方法：可能你的表设置为：table-layout:fixed;只需删除此属性。10、audio标签在chrome下支持oggmp3wav模式，但在ie11下只支持mp3格式；但是有些ie11支持一切不，我不知道为什么。..High-level1.less和sass的理解定义：Less是一种CSS预处理语言，对CSS语言进行了扩展，增加了变量、mixins、函数等功能，使CSS更易于维护，易于创建主题、扩展.优点：编写速度较快，变量和函数的功能：易于创建主题，易于维护，易于扩展。（剥皮）区别？2.实现网格系统Bootstrap响应式布局就是利用它的网格系统，针对不同的屏幕使用不同的class属性1.Row（行）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中为了给它正确的对齐和填充。2.通过行（row）在水平方向上创建一组列。3、自己的内容应该放在列（column）中，只有列可以作为行（row）的直接子元素。4..row和.col-xs-4等预定义类可用于快速创建网格布局。Bootstrap源代码中定义的mixin也可用于创建语义布局。5.通过设置列的填充属性在列之间创建间距。通过给.row元素设置一个负值边距来抵消为.container元素设置的padding，也间接抵消了row（行）中包含的列（column）的padding。6.网格系统的一列是通过指定一个从1到12的值来表示它的跨度范围。例如，可以使用三个.col-xs-4创建等宽的三列。7.如果一行中包含的列数大于12，则多余列的元素将整体排列在新的一行中。8.grid类适用于屏幕宽度大于或等于分界点尺寸的设备，对于小屏幕重写grid类。下图是网格系统在各种屏幕上的应用说明。具体可以参考bootstrap官网：https://v3.bootcss.com/css/#grid3。说说flexFlex布局教程：语法文章阮一峰http://www.ruanyifeng.com/blo...^%$4.pxemremptvwvh的区别是px像素（Pixel）。相对长度单位。Pixelpx是相对于显示器的屏幕分辨率的。IE无法调整以px为单位的字体大小；em是相对长度单位。相对于当前对象中文本的字体大小。如果内联文本的当前字体大小没有手动设置，则它是相对于浏览器的默认字体大小。em将继承父元素的字体大小。rem是一个相对单位，相对于html根元素，即字体单位pt：印刷行业常用的单位，意思是磅，一般用于页面打印排版。关系：任何浏览器的默认字体高度都是16px。所有未经调整的浏览器都符合：1em=16px。12px=0.75em，10px=0.625em。为了简化字体大小的转换，需要在css中的body选择器中声明Font-size=62.5%，使得em值16px62.5%=10px，所以12px=1.2em，10px=1em，也也就是说你只需要将你原来的px值除以10，然后换成em为单位即可。pt=px3/4用法：对于只需要适配少量移动设备，分辨率对页面影响不大的，使用px。vw相对于视口的宽度。视口平均分为100个vw单位。计算比例时，不需要计算父元素，然后逐层百分比归结为vh相对视口的高度。视口被分成100个单位的vh。为了适应各种移动设备，使用rem。比如只需要适配iPhone、iPad等分辨率差异比较大的设备即可。5、渐进增强和优雅降级渐进增强：为低版本浏览器构建页面，保证最基本的功能，然后为高级浏览器改进和添加效果、交互等功能，以达到更好的用户体验。优雅降级：从一开始就构建完整的功能，然后使其兼容低版本浏览器。FOUC(FlashofUnstyledContent)FOUC-FlashOfUnstyledContent文档样式闪烁@import"../fouc.css";并引用CSS文件@import是导致问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后导入外部CSS文件。因此，从页面DOM加载完成到CSS导入完成之间会有一段时间。互联网速度和计算机速度都很重要。解决方案非常简单，只需在之间添加一个或标签暂停解析，网页渲染的控制权交给了JavaScript引擎。如果
