2018前端面试题 css 部分

最新推荐文章于 2023-04-13 12:15:27 发布

大脸猫&蓝皮鼠

最新推荐文章于 2023-04-13 12:15:27 发布

阅读量268

点赞数

本文链接：https://blog.csdn.net/duanran0/article/details/87871690

版权

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

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/行内元素，块级元素，空元素有哪些，区别