html + css篇

1. Px，rem，em 的区别
   

Px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的

em 相对长度单位，相对于当前对象内文本的字体尺寸

em 的值并不是固定的

em 会继承父级元素的字体大小（参考物是父元素的 font-size）

em 中所有的字体都是相对于父元素的大小决定的

rem 相对于 html 根元素的 font-size

1em=1rem=16px 在 body 中加入 font-size：62.5% 这样直接就是原

来的 px 数值除以 10 加上 em 就可以

2.网页的三层结构有哪些

结构（

html 或 xhtm 标记语言）表现（

css 样式表）行为（

js）

请简述媒体查询

媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css

样式，达到自适应的目的。

Rem 缺点

比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小，

就会导致看文章的时候特别费眼

3.三栏布局方式两边固定中间自适应

3.1 margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。

中间栏被宽度为 100%的浮动元素包起来

3.2 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后

3.3 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，

中间的主体栏用左右 margin 值撑开距离。

3.4 flex 左右固定宽 中间 flex：1

3.5 网格布局

3.6 table 布局

4.Doctype 作用

声明文档类型

5.说一下 HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

6.对 HTML 语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，

便于阅读，比如nav 表示导航条，类似的还有article、header、

footer等等标签。

7.web 性能优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，

webP，lazyLoad。加快请求速度：预解析 DNS，减少域名数，并

行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存

localStorage。渲染：

JS/CSS 优化，加载顺序，服务端渲染，pipeline。

8.浏览器缓存机制

缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决强缓存相关字段有 expires，cache-control。如果 cache-control 与

expires 同时存在的话， cache-control 的优先级高于 expires。

协 商 缓 存 相 关 字 段 有 Last-Modified/If-Modified-Since ，

Etag/If-None-Match

9.浏览器输入网址到页面渲染全过程

DN

解析 TCP

连接

发送 HTTP 请求

服 务 器 处 理 请 求 并 返 回

HTTP 报文浏览器解析渲

染页面

连接结束

10.画一条 0.5px 的线

采用 meta viewport 的方式

<meta name="viewport" content="initial-scale=1. 0, maximum-scale=1.0, user-scalable=no" />采用 border-image 的方式 采用 transform: scale()的方式