前端面试题之html&css

1.简述chome盒模型与IE盒模型的区别？

每个元素在页面中的占位大小=content+padding+margin+border

chrome盒模型大小为content大小

IE盒模型大小为content+padding+border的和

2.行内元素和块级元素

行内：span a b strong img input textarea select em del

块级：adress center h1 p ul ol dl table div form

3.什么是弹性布局？

解决某元素中"子元素"的布局，为布局提供最大的灵活性，设flex布局后 float clear 将会失效

4.h5有哪些新特性？

canvas绘图， SVG绘图， 地理定位，web worker， web storage ，web socket

5.1px 1rem 1em各自代表的含义？

rem是长度单位 相对于根元素html元素

em相对于该元素的font-size

px是像素单位

6.什么是SPA？

单页面web应用页面初始化加载相应的html css js 一旦完成就不会重新渲染

优点：用户体验好，页面切换得快

缺点：首次加载速度慢 不利于seo

7.简述优雅降级和渐近增强

1.渐近增强：针对低版本进行页面构建 ，为了用户体验好 再追加功能

2.优雅降级：一开始就构建完整的功能 在针对低版本进行兼容

区别：优雅降级是从复杂现状开始的 并减少用户体验供给，渐进增强是从非常低的版本开始 不断扩充来适应环境需求

8.重绘与重排

重绘：一个元素改变外观所触发的浏览器行为；浏览器会根据元素的新属性重新绘制，使元素有新外观

重排：渲染树需要重新计算 比如：dom元素几何属性变化，dom树结构变化

区别：重绘不会带来重新布局

9.解释下浮动和他的原理 怎么清除浮动

浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。

清除浮动方法：1.使用空标签

                           2.after伪对象清除浮动

                          3. 溢出隐藏

                          4.浮动外部元素

10.如何让一个盒子在页面垂直水平居中

1.（已知宽高）定位 方向全为0 margin：auto；

2.（未知宽高）定位 左上为50%

11.前端性能优化方案

1.减少dom操作   2.部署前图片压缩代码压缩   3.优化js代码结构，减少http请求

4.使用内容分发cdn加速 5.静态资源缓存，图片延迟加载

12.css选择器优先级顺序

ID>类>属性>伪类>伪元素>标签>通配符

13.css3新特性

border-radius   box-shadow text-shadow transform scale translate 媒体查询 多栏布局 多背景

14.如何实现浏览器内部多个标签之间的通讯

1.定时器  2.localstorage

15.为什么初始化css样式？

1.浏览器差异   2.提高编码质量

16.css3新增的伪类？

17.精灵图

把css一堆小的图片整合到大的图片 减轻服务器对图片的请求数量

18.浏览器工作原理

1.用户界面  2.网络  3.ui后端 4.数据存储 5.浏览器引擎 6.渲染引擎 7.js解释器

19.如何进行seo？

1.合理的title，description，keywords

2.语义化html代码符合w3c规范

3.重要的html代码放在最前面

4.重要内容不要用js输出

5.少用iframe

6.非装饰性图片加alt属性

7.提高网站速度

20.less和sass的区别

less是基于js在客户端处理问题；sass是基于ruby在服务器端处理问题

less用@   sass用$

21.xhtml和html区别

xhtml比较严谨；1所有标签必须小写 2标签必须成对 3标签顺序必须正确4所有属性必须使用双引号

22.img和alt的区别

alt当图片不显示时用文字表示

title为该属性提供信息

23.active hover link visited的顺序是什么？

lvha