2018前端面试题 css 部分

总结一些面试遇到的问题，答案是百度的，

css部分

1/一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块

（1）css优先级顺序：id>class>标签并且  同等级越后优先级越高 所以content在最后就可以

    

左边部分

    

中间部分

    

右边部分

html,body{
            margin: 0;
        }
        #container{
            height: 100%;
            width: 100%;
            position: relative;
        }
        #left, #right, #content {
            position: absolute;
            top: 0;
        }
        #left{
            width: 200px;
            left: 0;
            background: #ff0;
        }
        #right{
            width: 200px;
            right: 0;
            background: #f00;
        }
        #content{
            width: 100%;
            background: #0ff;
            left: 200px;
            right: 200px;
        }

（2）利用margin-left，margin-right，float   屏幕减少到一定程度，右边的div会掉下来

. #left{
            float: left; 
            background: #0ff;
            width: 200px
        }
        #right{
            float: right; 
            background: #0ff;
            width: 200px
        }
        #content{
            margin-left: 200px;
            background: #0ff;
            margin-right: 200px;
        }

（3）利用table 不兼容IE7一下浏览器

       #left{
            width: 200px;
            background: #ff0;
        }
        #left, #right, #content{
            display: table-cell;
        }
        #right{
            width: 200px;
            background: #00f;
        }
        #content{
            background: #f00;
        }
        #container{
            margin: 0 auto;
            width: 100%;
            display: table;
        }

（4）flex方法 利用box  不支持IE

      #left{
            width: 200px;
            background: #ff0;
        }
        #left, #right, #content{
            height: 200px;
        }
        #right{
            width: 200px;
            background: #00f;
        }
        #content{
            background: #f00;
            box-flex: 1;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
        }
        #container{
            display: box;
            display: -webkit-box;
            display: -moz-box;
        }

2/清除浮动的方法

（1）给父元素定义height

原理：给父级定义高度解决了父级无法自动获得高度问题

优点：代码少，简单

缺点：只适合高度固定的布局，如果高度和父级不一样会产生问题

（2）给父元素定义overflow:hidden,设置width 或zoom: 1（兼容IE浏览器）

原理：不能定义height，使用overflow: hidden，浏览器会自动检查浮动区域高度

优点：简单，代码少，浏览器支持好

（3）结尾处添加空标签，并设置clear: both

原理：添加空标签，利用clear: both，让父元素自动获取高度

优点：简单，代码少，浏览器支持好，不容易出现问题

缺点：不少初级学者不容易理解，如果页面浮动布局多，就要增加很多空标签

（4）父级设置伪类:after和zoom

原理：IE8以上和非IE浏览器才支持:after,让父级能自动获取高度，zoom可解决IE6，7浮动问题

优点：浏览器支持好，不容易出现问题

缺点：代码多，初级学者不容易理解

3/什么是css sprites （雪碧图） 

把网页中的一些背景图整合到一张图片上，再利用css 的 background-image , background-repeat, background-position,进行背景定位

优点：为一些大型网站节约了带宽，提高了用户加载速度，和用户体验，不需要加载太多的图片

4/用过background-size吗

background-size：length(设置背景图宽度，高度)，若只设置1个参数，第二个参数为auto

percentage(以父元素的百分比来设置背景图的宽度，高度)，若只设置1个参数，第二个参数为auto

cover:(背景图扩展足够大，以使背景图完全覆盖背景区域)但是部分图像可能无法显示在背景定位区域

contain：把图像扩展到最大尺寸，使其宽度和高度完全适应内容区域

5/用过position吗

position: static 默认值没有定位，元素出现到正常的流中（忽略 top，borrom，z-index等）

inherit 从父元素继承position属性的值

relative 生成相对定位的元素

fixed 生成绝对定位元素，相对于浏览器窗口进行定位

absolute 生成绝对定位元素，相对于static 定位以外的第一个父元素进行定位

6/知道box-sizing吗， bootstrap 用的是box-sizing哪一个属性

content-box是默认值属性  宽度和高度分别应用到元素的内容框，在宽度和高度以外的绘制元素的内边距和边框

border-box 为元素设置了宽度和高度决定了元素的边框盒，通过已设定的宽度和高度减去边框和内边距才会得到内容的宽度和高度， bootstrap运用此属性

inherit 从父元素继承box-sizing属性

7/css选择器优先级，权重值

内联样式(权重值1000) > ID选择器(权重值0100) > class选择器（0010）  > 标签选择器（0001） > 通用 （*）（0000） > 属性 （[type='text']）> 伪类（:after）> 伪元素（::first-line） >  子选择器、相邻选择器

继承的样式没有权重值

8/元素水平垂直居中的方法，越多越好

块元素：已知元素宽，高度    (1)margin: 0 auto;（2）position 父元素 relative ，子元素 absolute left： 50%；top：50%；margin-left：-宽度一半；margin-top：-高度一半；（3）父元素的父元素设置display：table；父元素设置display：table-cell；vertical-align: middle; text-align: center;子元素设置dispaly: inline-block;table-cell相当于表格的td，td为行内元素，设置不了宽高，所以嵌套一层，嵌套一层必须设置display：inline-block；td背景会覆盖父元素的背景，不推荐使用。

未知宽，高度   （1）position 父元素 relative  子元素 absolute left:50; top: 50%;transform:translate(-50%, -50%)

9/margin重合问题

（1）同向margin重合

    若又负值，最大的正数减去最大负值的绝对值，若没有正数，由0减去最大的负值的绝对值

解决方法：（1）最外层设置overflow：hidden；zoom： 1；（2）最外层设置padding：1px；（3）最外层设置border：1px solid #ddd

（2）异向maigin重合

重叠后的值是由发生重叠的元素最大值决定的

解决方法：float：left（只能解决IE6异向重合，IE8以上，chrome，firefox, opera下的同向重合）

10/H5新特性

（1）新的语义标签和属性

（2）表单新特性

（3）视频和音频

（4）Canvas绘图

（5）SVG绘图

（6）地理定位

（7）拖放API

（8）增加localStorage， sessionStorage、

11/localStorage，sessionStorage，cookie的区别

共同点：浏览器端存储的数据缓存

不同点：（1）存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；web Storage会存储到本地，不会造成宽带浪费

（2）数据存储大小不同：Cookie数据不能超过4K，适用于回话标识；web Storage为5M；

（3）数据存储的有效期不同：cookie只设置了cookieId过期时间之前一直有效，即使关闭或者浏览器；sessionStorage只在浏览器关闭之前有效，localStorage数据存储永久有效

（4）作用域不同：cookie和localStroage再同源同窗口中是资源共享的，sesstionStroage不再不同浏览器窗口中共享，即使是同一个页面。

12/你用过那些css3属性

（1）css3边框

border-radius：css3圆角     box-shadow：css3边框阴影      border-image：css3边框图片    border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; // 图片地址  边框向内偏移  边框宽度  边框图像区域超过边框的量   边框是否平铺（repeated），铺满（rounded），拉伸（stretched）

（2）css3背景

background-image：添加背景图片  background-image: url(img_flwr.gif), url(paper.gif)   不同的背景图像用逗号分隔开，最顶端的为第一张图片

background-size：背景图像大小 可以使用像素，百分比，cover（图片覆盖背景区域，但是会使图片部分无法显示到指定位置），contain（图片扩展到最大，使其宽度和高度完全适应内容区域）

background-origin：背景图像区域位置  content-box   padding-box    border-box

background-clip：背景剪裁（从指定位置开始绘制）border-box （默认值） content-box  padding-box

（3）css3渐变

gradients  可以再两个或者多个制定颜色之间显示平稳过渡

Linear Gradients（线性渐变）向下/向上/向左/向右/对角方向（默认从上到下）background: linear-gradient(left, red , blue)//从左到右  background: linear-gradient(to bottom right, red , blue);// 左上到右下

Radial Gradients（径向渐变）由它们的中心定义  background: radial-gradient(circle, red, yellow, green) circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

（4）文字效果

text-shadow：文本阴影 指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

box-shadow：盒子阴影  指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

text-overflow：用户如何显示溢出内容  ellipsi超出部分省略号  clip超出部分不显示   自定义 （只在firefox有用）

word-wrap：允许长文本换行  break-word

word-break：单词拆分换行属性指定换行规则   keep-all （单词不会拆开）   break-all（单词会拆分开）欧鹏浏览器不兼容

（5）@font-face  字体文件

（6）css2D，3D转化 transform：rotate(30deg)  顺时针旋转30度    translate（50px，60px） x轴，y轴移动    scale（x轴，y轴）元素的尺寸会增加减少    skew(30deg,40deg ) x轴，y轴 给元素翻转指定角度     matrix（）把所有2d转化方法都组合在一起 6个参数  需要根据矩阵来计算  

（7）transition:   过度

transition-property   需要过度的css属性    transition-duration    过度需要花费的时间，默认为0    transition-timing-function   过度效果的时间曲线，默认为ease （从慢到快到慢） /  linear（匀速）/  ease-in（慢开始）/ease-out（慢结束）/ease-in-out（慢开始，慢结束）cubic-bezier(n,n,n,n)  （再函数中定义自己的值，可能的值是从0~1间）    transition-delay   规定效果何时开始，默认为0

（8）css3 动画   animation 

animation-name   规定@keyframes 动画名称   animation-duration  完成一个动画所花费的时间   animation-timing-function   动画曲线  默认为ease   animation-delay  动画何时开始 等待时间  默认为0 /负数（跳过指定时间）    animation-iteration-count  规定被播放的次数  默认为1 / infinite（无限次数播放）   animation-direction  动画是否再下一周期自动播放  默认为normal  / alternate（动画轮流反向执行）     animation-play-state  动画是否正在运行或暂停  默认running / paused（暂停）    animation-fill-mode  动画时间之外的状态

（9）css3多列  

column-count   元素应被分割的列数  （IE不支持）   column-gap 列之间的间隔        column-rule  设置列之间的宽度，样式，颜色

13/什么是优雅降级和渐进增强

渐进增强是从低版本浏览器进行页面构建，保证基本功能，然后根据高版本浏览器进行效果、交互等改进，增加用户体验

优雅降级是一开始就构建完整的功能，然后对低版本浏览器进行兼容

区别：优雅降级从复杂开始，并试图减少用户体验，相当于往回看

渐进增强从基本开始，不断的扩充，来适应需求，相当于往前看，保证其根基可以安全使用

14/前端优化

（1）减少HTTP请求：

合并js，css文件，使用雪碧图，使用base64显示图片

（2）减少资源体积

gzip压缩（主要针对html，将其中重复的部分进行打包，多次复用），js混淆（js的混淆可以对js进行压缩，将变量缩小，或者使用php对js进行简单的压缩，减少体积），css压缩，图片压缩（减少矢量图，高清图等的使用，不影响感官的情况下尽量压缩图片，使用png等格式）

（3）缓存

DNS缓存（浏览器会在dns解析步骤中消耗一定的时间，对于高访问量网站做好DNS缓存）    CDN部署与缓存（给静态文件做好缓存，有效利用已缓存的静态文件，加快网站的加载速度）      http缓存   （给资源设置缓存时间，防止再有效的缓存时间里重复下载）

（4）移动端优化   

使用场cache，减少重定向（设置长期缓存，不用向服务器发送请求，避免304重定向情况）      首屏优化，保证首屏加载速度小于14kb（2s是最佳的用户体验时间，基于TCP的慢启动和拥塞控制，第一个14kb的数据是非常重要的）   不滥用web字体 （web字体可以代替某些图片资源，移动端过多的web字体使用会导致页面资源加载的繁重。长列表滚动优化（ios尽量使用局部滚动，安卓尽量使用全局滚动，并给body增加-webkit-overflow-scrolling: touch），使用touchstart，touchend，tap代替click（click在移动端会用300ms的延迟），开启GPU渲染加速（GPU硬件加速方式，在3d渲染时计算量较大，浏览器会开启显卡的硬件加速来帮助完成，解决办法用css的translateZ，欺骗浏览器，让其开启GPU加速，加快渲染）

（5）优化页面渲染

css文件放在头部，js文件放在尾部或者异步，尽量避免内联样式

css文件放在头部保证解析DOM的同时解析css文件，css（内联或者外联）会堵塞整个DOM的渲染，而js（内联或者外联）会阻塞后续DOM的解析，后续DOM的渲染也会被阻塞，而且遇到js操作DOM的地方可能会出现问题，避免内联样式，可以有效的减少html体积，往往加载网络资源的时间会大于他的时间。

（6）DOM操作优化

避免在document上直接进行频繁的dom操作，使用className代替大量的内联样式修改，对于复杂的UI元素设置position：absolute，position：fixed，尽量使用css动画，适当使用canvas，尽量使用css表达式的使用，使用事件代理

（7）操作细节

避免图片或者iframe使用空的src，在css属性为0时去掉单位，禁止图片缩放，正确的css前缀的使用，移除空的css规则，对于css可继承的属性尽量使用继承如font-size，缩短css选择器，多使用伪元素等帮助定位

（8）图片预加载

图片预加载，懒加载，首屏加载时进度条的显示

（9）异步请求优化

使用正常的json数据格式交互，部分常用数据缓存

15/行内元素，块级元素，空元素有哪些，区别

行内元素：a ,b,span,img,input,strong,select,label,em,button（可变元素根据上下文语境决定该元素为块元素或者内联元素）,textarea,

块内元素：div,ul,li,dl,dt,p,dd,h1-h6,blockquote(标签定义块引用，标签内的所有文本会从常规文本中分出来，左右两边会进行缩进)

空元素：（没有内容的html元素）br，meta，hr，link，input，img

区别：（1）块级元素：总是在新行开始，占据一整行；宽高，内外边距皆可设置且宽度与内容无关，可以容纳行内元素和其他块级元素；

（2）行内元素：和其他行内元素在一行上；不会自动换行；设置宽高无效；margin仅对左右方向有效；padding设置上下左右都有效；

16/src和href的区别

href是指向所在资源位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接

src是指外部资源的位置，指向的内容将会嵌入到文档中当前标签的位置；在请求src资源时会将其指向的资源下载并应用到文档内

17/图像格式有哪些

（1）矢量图，图标字体，如font-awesome；svg

（2）位图：gif；jpg（jpeg），png；webp（谷歌推出的压缩比jpg更优越体积比jpg小40%，尽在Chrome和Opera）

（3）psd

（4）flash  矢量动画文件格式

18/浏览器时如何渲染页面的

（1）解析html文件渲染dom树，自上而下，遇到任何样式（link，style，script）都会阻塞（外部样式不阻塞后续外部脚本的加载）

（2）解析css。优先级：浏览器默认样式< 用户设置 < 外部样式 < 页级样式< 内联样式 

（3）将css与dom合并，创建渲染树，

（4）布局和绘制，重绘，重排

19/浏览器输入url地址后的响应全过程

（1）浏览器里输入网址

（2）浏览器查找域名的ip地址：dns查找  -- -  浏览器缓存：浏览器会缓存DNS记录一段时间（操作系统没有告诉浏览器缓存时间，各自浏览器会存储个固定时间2-30分钟）；

                                                                    ---系统缓存：浏览器缓存中没有找到需要的记录，浏览器会做一个系统的调用

                                                                  -----路由缓存：接着，前面的查询请求会发送给路由器，他一般有自己的DNS请求

                                                                   -----ISP  DNS  缓存：ISP缓存DNS服务器，在这一般能找到相应的缓存记录

                                                                  -----递归搜索：你的ISP的DNS服务器从根域名服务器开始进行递归搜索，从.com顶级域名服务器到facebook的域名服务器。一般dns服务器缓存中会有.com域名服务器的域名，所以到顶级服务器的匹配就不那么重要了

（3）浏览器和服务器之间建立TCP连接，通过socket发送http请求，发送端从应用层往链路层，接受端从链路层往应用层

（4）服务器响应请求，处理，返回数据；事实上，在进入服务器之前，可能还会先经过负责负载均衡的机器，其目的为将请求合理地分配到多个服务器上，在经过了负载均衡后，请求真正地到了服务器的Web Server，比如 Apache，Node.JS等，服务器处理请求返回http响应。

（5）客户端收到数据，TCP连接释放，浏览器加载html数据进行页面渲染