【面试题】html，css篇 #11

Kelichao · 2017-01-25T06:16:32Z

注以下内容仅为我个人总结得出，如有误请在issue指正，谢谢！

CSS

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko
Safari:webkit
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3.Quirks(怪癖，混杂)模式是什么？它和Standards（标准）模式有什么区别

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

为了对老版本的兼容，IE6中的混杂模式用于支持旧版的布局方式，如果不存在doctype浏览器会用混杂模式渲染。
应用：
用混杂模式渲染页面，和模型与标准模式相比，宽高会加上border跟padding。
用JS判断浏览器当前的模式： document.compatMode == "CSS1Compat// 标准模式"
document.compatMode == "BackCompat "// "混杂模式";

4.div+css的布局较table布局有什么优点？

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

5.strong与em的异同

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

6.渐进增强和优雅降级

产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
答：浏览器兼容问题，对于老浏览器增加高级效果有相当大的工作量，加大页面的开发难度与成本，而且这类老方法实现在高级浏览器上十分耗费资源，增加了图片资源的请求量，更多的无关代码，更慢的加载速度，在兼顾低级浏览器的同时，同时对高级浏览器造成了不必要的资源浪费，得不偿失，而且大部分用户使用的是高级浏览器，使用IE678的用户已经少之又少。

7.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便(可以分配最高效的CDN站点)
突破浏览器并发限制(防止多请求阻塞)
节约cookie带宽(cookie跨域将如法传输，节约带宽)
节约主域名的连接数，优化页面响应速度(动静态资源分开处理，效率更高)
防止不必要的安全问题(子域窃取主域cookie)

8.请谈一下你对网页标准和标准制定机构重要性的理解。

只有统一标准，开发者才可以放心地统一遵循统一的标准，降低开发难度与开发成本，SEO才会更好做，也不会滥用各种特性导致BUG与安全问题，从而提高网站易用性。

9.请描述一下cookies，sessionStorage和localStorage的区别？

共同点是三者都可以在网页中进行数据存储。storage储存量更大，而且有额外方法 setItem,getItem, removeItem,clear。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在,大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后（关闭网页）数据也随之销毁，且不需要持续地将数据发回服务器。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。

10.简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
　href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式（注：因此@import方式会阻塞页面）。

11 . 知道的网页制作会用到的图片格式有哪些？

老格式 png-8，png-24，jpeg，gif，svg。
新格式：
Webp ：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG的2/3，并能节省大量的服务器带宽资源和数据空间，且解析速度更快。
Apng ：是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

12 . 两列布局一列宽度固定，一列宽度不固定。传统方式，css3方式分别如何实现？

DOM

<div class="parent">
    <div class="side">侧栏</div>
    <div class="main">主栏</div>
</div>
<style type="text/css">
	body{    
	    margin:0;    
	    padding:0;   
	}   
</style>

方法一：把side改写为绝对定位

.side{    
    position:absolute;left:0;top:0;    
    width:200px;height:200px;    
    background:red;    
}    
.main{    
    margin-left:210px;    
    background:blue;    
    height:200px;    
}

方法二：把side改写为浮动

.side{    
    width:200px;    
    height:200px;    
    float:left;    
    background:red;    
}    
   
.main{    
    margin-left:210px;    
    background:blue;    
    height:200px;    
}

方法三：flex布局

.parent {
	display:flex; 
}       
.side{    
   width:200px;    
   height:200px;    
    background:red;    
    margin-right:10px;    
}    
.main{    
    background:blue;    
    height:200px;    
    flex:1;    
}

方法四：利用BFC不与浮动元素重叠的特性

.side {    
  width: 200px;    
  height: 100px;    
  float: left;    
  background: red;    
  margin-right: 10px;    
/* 这里没有flex才能按自身设定的宽度渲染 */
/* 如果有了flex则宽度设定无效 */
}    
.main {    
  /* 创建BFC   */   
  overflow: hidden;    
  background: blue;    
  height: 100px;    
}

13 . 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

答案：dns缓存(计算机处理)，cdn缓存（cdn服务器处理），浏览器缓存（浏览器处理），服务器缓存（服务器处理）。

14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载？

图片懒加载。
使用雪碧图(CSSsprite，SVGsprite，Iconfont)。
Base64技术直接放在页面中（减少请求）。
图片压缩技术，前端，服务端。

15.你如何理解HTML结构的语义化？

让网页结构更加清晰(em h1 strong header footer等)
（seo）更加容易被搜索爬虫识别关键字的权重。
便于团队开发和维护

16.谈谈以前端角度出发做好SEO需要考虑什么？

1.布局方面

了解搜索引擎如何抓取网页和如何索引网页（百度,Bing,搜狐等）
控制首页链接数量
扁平化目录结构，嵌套层级不多于3层
使用面包屑导航栏
页面大小控制在100kbit以内

2.代码方面

Meta标签关键词优化
尽量使用语义化标签
标签添加alt说明
表格要用命名
尽量使用文本的

换行
谨慎使用display:none
精简代码
将js放页面底部
尽量少用iframe框架

17.你经常使用的css3属性有哪些，请列举？

transition 动画
transform形变
display:flex;布局
box-shadow:阴影
box-sizing:border-box: 模仿IE盒模型

17.你使用过flex布局吗？请简单设计一个两列布局。

.father{
display:flex;
}
.son1{
flex:1;/*三分之一*/
}
.son2{
flex:2; /*三分之二*/
}

18.如何进行水平垂直居中(行内块元素)

dom

<div class="box" style="height:300px;width:300px;background:orange;">
    <button>按钮</button>
</div>

方案一：用display: table-cell;

内部元素如果是display:block;则无效

.box{
	display: table-cell;
	vertical-align:middle;/*垂直居中*/
	text-align:center;/*水平居中*/
}

方案二：单纯flex布局

.box{
    display: flex;
    justify-content:center;/*水平居中*/
    align-items:center;/*垂直居中*/
}

方案三：flex与margin:auto;结合

.box{
    display: flex;
}
button{margin: auto;}

方案四：绝对定位与0

.box{
    position:relative;/*需要父元素定位*/
}
button{
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

HTML

1.超链接访问过后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）。

2.什么是Css Hack？ie6,7,8的hack分别是什么？

div{
  background-color:yellow\0;    /*ie8*/
  +background-color:pink;        /*ie7*/
  _background-color:orange;       /*ie6*/
-webkit-transform:aaa;               /*chrome*/
-moz-transform: aaa                  /*mozia*/
}

3.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)：div 、 h1~6 、ul 、ol 、table
内联元素(inline): span、 a、 i 、em
行内块级元素(inline-block): input 、 img 、 button 、 textarea 、 label 。

4.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
opacity会被继承，rgba不会被继承

5.写一条媒体查询语句

/* 生效范围481 - 800px */
@media only screen and (min-width:481px) and (max-width: 800px) {}

6.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

Reset.css用于格式化元素，让不同的元素的padding，margin等清零。
用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

7.Sass、LESS是什么？大家为什么要使用他们？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
将CSS赋予了动态语言的特性，如变量，继承，运算，函数。

8.知道css有个content属性吗？有什么作用？有什么应用？

用于css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

方法一

/*一种常见利用伪类清除浮动的代码*/
.clearfix:after {
    content:"."; /*这里利用到了content属性*/
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
 
.clearfix {
    *zoom:1;
}

方法二

为父元素设置overflow:hidden

9.盒模型问题

标准盒模型不包括border与padding
标准盒模型 + border + padding = IE盒模型
标准盒模型可以用box-sizing: border-box;来模仿IE盒模型

在老版本IE与现代浏览器上代码的差异

<div class="cont" style="background:gray;height:100px;width:100px;
position:absolute;cursor:move;border:50px solid black;padding:30px;"></div>

10.谈谈你对BFC的理解

BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干(不会重叠或者受到浮动影响)。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

产生BFC的条件

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

11. 简单描述下从输入url到返回页面的整个过程。

过程概览

输入地址回车
进行域名解析，浏览器查找域名的 IP 地址，这一步包括 DNS 具体的查找过程，包括：浏览器缓存-操作系统自身缓存-路由器缓存-读取本地的host文件-浏览器发起一个DNS的系统调用(运营商)

详细介绍DNS原理

浏览器获得域名对应的IP地址后，发起HTTP“三次握手”

浏览器以一个随机端口向web服务器发起一个TCP连接请求。三次握手的过程为：浏览器询问服务器是否允许连接，服务器回应可以连接，最后浏览器进行与服务器的连接

WEB服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址。
服务器处理请求
服务器返回一个 HTTP 响应以及内容
浏览器显示 HTML
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
浏览器发送异步请求

12.文档根元素的字体大小初始值是多少px

16px

The text was updated successfully, but these errors were encountered:

Kelichao added the 笔试题 label Feb 3, 2017

Kelichao mentioned this issue May 27, 2017

实用站点-学习思想 #1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【面试题】html，css篇 #11

【面试题】html，css篇 #11

Kelichao commented Jan 25, 2017 •

edited

Loading

【面试题】html，css篇 #11

【面试题】html，css篇 #11

Comments

Kelichao commented Jan 25, 2017 • edited Loading

CSS

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

3.Quirks(怪癖，混杂)模式是什么？它和Standards（标准）模式有什么区别

4.div+css的布局较table布局有什么优点？

5.strong与em的异同

6.渐进增强和优雅降级

7.为什么利用多个域名来存储网站资源会更有效？

8.请谈一下你对网页标准和标准制定机构重要性的理解。

9.请描述一下cookies，sessionStorage和localStorage的区别？

10.简述一下src与href的区别。

11 . 知道的网页制作会用到的图片格式有哪些？

12 . 两列布局一列宽度固定，一列宽度不固定。传统方式，css3方式分别如何实现？

13 . 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载？

15.你如何理解HTML结构的语义化？

16.谈谈以前端角度出发做好SEO需要考虑什么？

17.你经常使用的css3属性有哪些，请列举？

17.你使用过flex布局吗？请简单设计一个两列布局。

18.如何进行水平垂直居中(行内块元素)

HTML

1.超链接访问过后hover样式就不出现的问题是什么？如何解决？

2.什么是Css Hack？ie6,7,8的hack分别是什么？

3.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

4.rgba()和opacity的透明效果有什么不同？

5.写一条媒体查询语句

6.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

7.Sass、LESS是什么？大家为什么要使用他们？

8.知道css有个content属性吗？有什么作用？有什么应用？

9.盒模型问题

10.谈谈你对BFC的理解

11. 简单描述下从输入url到返回页面的整个过程。

过程概览

12.文档根元素的字体大小初始值是多少px

Kelichao commented Jan 25, 2017 •

edited

Loading