1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用（IE8 以下）Q1)行内元素：会在水平偏向排列，不能包罗块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直偏向排列。

重新行开始竣事接着一个断行。Q2)兼容性：display:inline-block;display:inline;zoom:1;2.清除浮动有哪些方式？比力好的方式是哪一种？1）父级div界说height。2）末端处加空div标签clear:both。3）父级div界说伪类:after和zoom。

4）父级div界说overflow:hidden。5）父级div界说overflow:auto。6）父级div也浮动，需要界说宽度。

7）父级div界说display:table。8）末端处加br标签clear:both。3.box-sizing常用的属性有哪些？划分有什么作用？Q1)box-sizing: content-box|border-box|inherit;Q2)content-box:宽度和高度划分应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内举行绘制。通过从已设定的宽度和高度划分减去边框和内边距才气获得内容的宽度和高度。

4.页面导入样式时，使用link和@import有什么区别？1）link属于XHTML标签，除了加载CSS外，还能用于界说RSS, 界说rel毗连属性等作用；而@import是CSS提供的，只能用于加载CSS;2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;3）import是CSS2.1 提出的，只在IE5以上才气被识别，而link是XHTML标签，无兼容问题;5.你能形貌一下渐进增强和优雅降级之间的差别吗?渐进增强 progressive enhancement：针对低版本浏览器举行构建页面，保证最基本的功效，然后再针对高级浏览器举行效果、交互等革新和追加功效到达更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功效，然后再针对低版本浏览器举行兼容。区别：优雅降级是从庞大的现状开始，并试图淘汰用户体验的供应，而渐进增强则是从一个很是基础的，能够起作用的版本开始，并不停扩充，以适应未来情况的需要。

降级（功效衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其基本处于宁静地带。　“优雅降级”看法“优雅降级”看法认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功效缺失的浏览器下的测试事情摆设在开发周期的最后阶段，并把测试工具限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计规范下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。

你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”看法“渐进增强”看法则认为应关注于内容自己。内容是我们建设网站的诱因。

有的网站展示它，有的则收集它，有的寻求，有的操作，另有的网站甚至会包罗以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计规范。这也是它立刻被 Yahoo! 所采取并用以构建其“分级式浏览器支持 (Graded Browser Support)”计谋的原因所在。6.什么是外边距重叠？重叠的效果是什么？外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以联合成一个单独的外边距。这种合并外边距的方式被称为折叠，而且因而所联合成的外边距称为折叠外边距。

折叠效果遵循下列盘算规则：1）两个相邻的外边距都是正数时，折叠效果是它们两者之间较大的值。2）两个相邻的外边距都是负数时，折叠效果是两者绝对值的较大值。3）两个外边距一正一负时，折叠效果是两者的相加的和。

7. Sass、LESS是什么？大家为什么要使用他们？他们是CSS预处置惩罚器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继续，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。为什么要使用它们？1）结构清晰，便于扩展。2）可以利便地屏蔽浏览器私有语法差异。

这个不用多说，封装对浏览器语法差异的重复处置惩罚，淘汰无意义的机械劳动。3）可以轻松实现多重继续。4）完全兼容 CSS 代码，可以利便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

8.position的值， relative和absolute划分是相对于谁举行定位的？absolute 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来举行定位。fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口举行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置举行定位。9.block，inline和inline-block的观点以及区别首先这是display中的三个属性值，不是元素指类型，元素类型在HTML5之前分为两种划分是块级元素（ block-level elements）和内连元素（ inline elements）。可是当display的属性值被设置为block时，元素会以块级元素（ block-level elements）显示，而设置为inline时会以内连元素（ inline elements）显示.display:blockblock元素会独占一行，多个block元素会各自新起一行。

默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素纵然设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。

display:inlineinline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width,height属性无效。inline元素的margin和padding属性，水平偏向的padding-left, padding-right, margin-left, margin-right都发生边距效果；但竖直偏向的padding-top, padding-bottom, margin-top, margin-bottom不会发生边距效果。display:inline-block简朴来说就是将工具出现为inline工具，可是工具的内容作为block工具出现。

之后的内联工具会被排列在同一行内。好比我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。即对inline-block元素可以设置宽度和高度，同时inline-block元素又可以在同行举行排列。

备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空缺的间隙。且IE6和7是不支持这个属性的，需要通过display:inline;zoom:1做hack处置惩罚。static 默认值。没有定位，元素泛起在正常的流中。

10.如何水平居中一个元素如果需要居中的元素为通例流中inline元素，为父元素设置text-align: center;即可实现如果需要居中的元素为通例流中block元素1）为元素设置宽度2）设置左右margin为auto3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值11.CSS优先级算法如何盘算？1）优先级就近原则，同权重情况下样式界说最近者为准;2）载入样式以最后载入的定位为准;优先级为:同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。!important > id > class > tagimportant 比 内联优先级高12.CSS3新增伪类有那些？举例：p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。13.CSS3有哪些新特性？新增种种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）圆角 （border-radius:8px）多列结构 （multi-column layout）阴影和反射 （Shadow\Reflect）文字特效 （text-shadow、）文字渲染 （Text-decoration）线性渐变 （gradient）旋转 （transform）缩放,定位,倾斜,动画,多配景例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:14.请解释一下CSS3的Flexbox（弹性盒结构模型）,以及适用场景？一个用于页面结构的全新CSS3功效，Flexbox可以把列表放在同一个偏向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为庞大的结构还可以通过嵌套一个伸缩容器（flex container）来实现。接纳Flex结构的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

通例结构是基于块和内联流偏向，而Flex结构是基于flex-flow流可以很利便的用来做局中，能对差别屏幕巨细自适应。在结构上有了比以前越发灵活的空间。

15.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？1）png24位的图片在iE6浏览器上泛起配景，解决方案是做成PNG8.2）浏览器默认的margin和padding差别。解决方案是加一个全局的*{margin:0;padding:0;}来统一。3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

4）浮动ie发生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下IE会发生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)渐进识此外方式，从总体中逐渐清除局部。首先，巧妙的使用“\9”这一标志，将IE游览器从所有情况中分散出来。

接着，再次使用“+”将IE8和IE7、IE6分散开来，这样IE8已经独立识别。css5）IE下,可以使用获取通例属性的方法来获取自界说属性,也可以使用getAttribute()获取自界说属性;Firefox下,只能使用getAttribute()获取自界说属性。解决方法:统一通过getAttribute()获取自界说属性。

6）IE下,even工具有x,y属性,可是没有pageX,pageY属性;Firefox下,event工具有pageX,pageY属性,可是没有x,y属性。7）解决方法：（条件注释）缺点是在IE浏览器下可能会增加分外的HTTP请求数。8）Chrome 中文界面下默认会将小于 12px 的文本强制根据 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接会见事后hover样式就不泛起了 被点击会见过的超链接样式不在具有hover和active相识决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}16.移动端的结构用过媒体查询吗？假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来， 而显示设备、屏幕投影和打印等这些前言都有自己的特点，CSS就是为文档提供在差别前言上展示的适配方法当媒体查询为真时，相关的样式表或样式规则会根据正常的级联规被应用。当媒体查询返回假， 标签上带有媒体查询的样式表 仍将被下载 （只不外不会被应用）。

包罗了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表规模的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备规模。关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老法式员，现在告退在做自己的web前端私人定制课程，今年年头我花了一个月整理了一份最适合2019年学习的web前端学习干货，种种框架都有整理，送给每一位前端小同伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

本文来源：博鱼APP官方网站-www.xjxrck.com