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数据进行页面渲染

2018前端面试题 css 部分相关推荐

前端面试题-CSS选择器性能优化
一.CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS ...
web前端面试题-css方面
web前端面试题-css 1. display: none; 与 visibility: hidden; 的区别 2 link 与 @import 的区别 3 display,float,positi ...
2018 前端面试题（不定期更新）
前端基础面试题以下更多的题目,希望大家能掌握更多的前端知识,发现自身的不足.不单单是看题目,背答案. 面试题应该反映出的只是你掌握前端知识的冰山一角.别把冰山全貌给展现出来咯 HTML/CSS 1. ...
2018前端面试题（八）
人生也有涯而知也无涯以有涯随无涯殆已! –庄子部分内容转载自网络,侵立删!如有错误,请指正! 1.手写jsonp的实现参考自: http://www.qdfuns.com/notes/167 ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
重要前端面试题，来自一个2022年面试大牛(上)
面经链接 2022高频前端面试题--CSS篇 - 掘金精心整理HTML/CSS面试题(2022求职必看) - 掘金(今天正在看的) 一.css面试题 1.Dom事件模型(分为捕获和冒泡) 一个事件发 ...
前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）
前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面"内容是什么"的问题. 2.表示层:由 ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...

2018前端面试题 css 部分

css部分

2018前端面试题 css 部分相关推荐

最新文章

热门文章