前端面试系列(7)

一、css盒模型

1、基本概念:

css的盒模型本质是一个盒子,封装周围的HTML元素,包括:外边距、边框、内边距和实际内容。

  • Margin(外边距):边框以外的区域,外边距是透明的
  • Border(边框):围绕在内边距和内容外的边框
  • Padding(内边距):内容与边框之间的区域,内边距是透明的
  • Content(内容):盒子的内容
2、标准盒模型和IE盒模型

区别:标准盒模型和IE盒模型的width和height的计算方式不同

举个栗子:假设设置一个元素宽高各为100px,为了方便观察设置背景色为red,代码如下:

<style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
    }
</style>
</head>
<body>
    <div id="div1">盒模型</div>
</body>

然后在浏览器审查元素的时候你就会发现,元素的大小并不是自己设置的100px,而是变成了120px。

这是因为在默认情况下的盒模型是标准盒模型,设置的width、heigh仅仅只是内容的宽高,不包含padding、border等;所以在添加了padding之后自然整体宽高都会变大,不是自己之前设置的了。

  • 标准盒模型的定义的width指的是content-width,
  • IE盒模型定义的width指 border+padding+content-width

设置

  • 标准模型(默认)box-sizing:content-box
  • IE盒模型 box-sizing:border-box

二、link和@import的区别

1、首先来说一下link和@import是用来干什么的,在HTML中引入css的方式有四种:

内联方式:直接在HTML标签中style属性中添加css样式

<div style="background: red"></div>

嵌入方式:在HTML头部中的style标签中写下css代码

 <head>    
 <style>    
    .content {background: red;}      
</style> 
 </head>

链接方式:在HTML头部的<head>标签中引入外部css文件

<head>     
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

导入方式:是指使用css规则引入外部css文件

<style>
    @import url(style.css);
</style>

所以link和@import是将css引入HTML中的方式,虽然都是css引入方式,但是可能对大家而言link比较熟悉,使用的次数比较多,相比之下@import就很少被使用。为什么都是导入方式大家都喜欢用link,而不是@import,这就要看一下他两之间的区别了。

2、区别:

  • 加载方式不同,link可以在页面载入的同时进行加载,而@import只能在页面加载完成之后才能进行加载。
  • link属于HTML,不存在兼容问题,@import是css2.1才提出的概念,所以浏览器版本较低时可能就无法正确导入外部样式文件。
  • @import是css提供的语法规则,只有导入样式表的作用,而link属于html,不仅可以导入样式表,还可以定义rel等属性。
  • link支持使用JavaScript来改变DOM样式,@import不支持

三、绑定事件的三种方式

1、DOM元素直接绑定,简单来说就是在html标签中绑定事件的话,需要在js中写上事件处理的程序,然后在html中使用同名的html特性来调用。

 <button type="button" onclick="messageShow()">clickme</button>    
 <script>    
     function messageShow(){      
         alert("Yes");    
    }    
 </script>

2、在js中绑定事件,这是我们最常用的一种绑定事件的方式,先获取到html元素,再在js里绑定事件

<button type="button">clickMe</button>
<script>    
  var oBtn=document.getElementsByTagName("button")[0];    
  oBtn.onclick=function(){        
  alert('Yes1');     
  }    
</script> 

3、使用事件监听绑定事件

 <button type="button">clickMe</button>    
 <script>    
 var oBtn=document.getElementsByTagName("button")[0];     // 给元素绑定事件监听函数     oBtn.addEventListener('click',function(){        
     alert(this.type);  
    },false)    
     var Show=function(){        
         alert('OK!');  
    };    
 </script>

需要注意的是使用事件监听绑定事件时,有三个参数,addEventListener(事件名,事件处理程序,布尔值),最后一个参数是布尔值,如果是true,表示在捕获阶段调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序,一般都是false。

四、typeof和instance的区别

  • 基本数据类型:number、string、Boolean、undefined、null
  • 引用数据类型:object
1、typeof

typeof可以检测给定变量的数据类型,返回值为一个字符串,可能是number、boolean、string、function、undefined、object。

 console.log(typeof(Array));  //"function"
 console.log(typeof(Object)); //"function"
 console.log(typeof(null)); //"Object"

要注意以上三种情况,Array和Object的数据类型是function,因为Array本身就是js内部创建的构造函数。null是指空对象,所以输出来为Object类型。

typeof一般用来判断一个变量是否存在:

 if(typeof(a)!="undefined"){      
 console.log("ok");  
 }

如果存在的话返回ok。

2、instanceof

instanceof的作用是判断一个变量是否是某一个对象的实例,A instanceof B(判断A是否是B的实例,是的话返回true,不是的话返回去false)。

   var a=new Array;  
   console.log(a instanceof Array);  //"true"    
   console.log(Array instanceof Function); //"true"  
   console.log(Object instanceof Function);//"true"    
   console.log(a instanceof Function);//"true"

上面的例子也证明了typeof的输出结果,Array和Object是Function的实例,所以检测出来Array和Object的数据类型为function。

因为Array是function的实例,而a又是Array的实例,所以a就是Function的实例,a instanceof Function会返回一个true。

五、src和herf的区别

  • src是将指定资源嵌套进当前文档
  • herf是在当前文档和指定资源之间开辟了一条通道

六、从输入一个url开始,到页面加载完成,都会发生哪些操作?

1、DNS解析

DNS(域名解析)实现了网址到IP地址的转换,通过主机名,获取到与主机名相对应的ip地址。其实就是一个递归查询到过程,从本地域名->根域名->顶级域名,比如com->google.com->www.google.com

2、TCP连接(三握四挥)
  1. 发送http请求
  • 发送http请求就是构建http请求报文,并通过TCP协议发送到服务器的指定端口(http是8080,https包括443/tcp 443/udp)。
  • http请求报文一般包括请求方式、请求报头、请求正文
  • 请求行:

Method Request-URL HTTP-Version

请求方法 请求URL HTTP版本

常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。

2.服务器响应请求并返回http报文

  • http响应报文由三部分组成:状态码、响应报头、响应报文
  • 状态码:

1××:指示信息-表示请求已接收,继续处理

2××:成功-表示请求已经成功接收、理解、接受

3××:重定向-表示要完成请求必须进行更近一步的操作

4××:客户端错误-请求有语法错误或者请求无法实现

5××:服务器错误-服务器无法完成合法的请求

3、浏览器解析并渲染页面
  • 解析html文档,构建DOM树。
  • 下载css文件,开始构建css树。
  • css树构建完成之后,和DOM树一起构成渲染树。
  • 布局:计算出每个节点在页面中的位置。
  • 显示,通过显卡显示页面

DOM树和渲染树的区别:

  • DOM树与HTML标签一一对应,包括head和隐藏的节点
  • 渲染树不包括head和隐藏的元素,并且每个节点都有与之对应的css样式。

重绘和重排(这个也需要划重点):

  • 当页面中的元素样式发生变化时(颜色等),不影响节点的布局时,会引起浏览器的重绘
  • 当页面中的DOM元素的位置,尺寸等影响布局的样式发生变化时,会引起浏览器的重排
  • 重排一定会引发重绘
  • 但是重绘不一定能引起重排

在任何时代,

教育说起来都是一件高大上的事,

但却没有什么真正有价值的东西是教得会的,

没有任何一种文化模因

可以说清楚一个个体的全部问题。

在任何时代,

想要抓住人性的弱点来赚钱都非常容易,

没有一点高级。

相反,想要建设一种文化,

耐心地拆除信息壁垒,

并且能够坚持下来,

那真不是一般的不易。

在任何时代,

在一秒钟内看到本质的人,

和花半辈子看不清的人,

自然是不一样的命运。

每一天,你将受到才哥的理论,结合历史、政治、文化、艺术、商业故事,令人防不胜防的高纯度无死角知识轰炸。以及,不间断的私藏书籍、电影推荐。

有时候,某件事虽记不清楚,但总感觉这样的事在很久很久以前发生过...

有时候,某个人虽从未见过,但总感觉面前的人在另一个时空里曾遇见...

那时候相忘于江湖的事,或许穿越了时光,有了新的世界

那时候不远万里追寻的梦,也许穿行过人海,也有了新的意义

而对于我们来说,那个惦念的江湖,那个执着的梦,其核心都是在偌大的世界里,寻找到更真实更好的自己!

知道你会来

所以我一直在这里等

岁月不饶人,我亦未曾绕过岁月

最后,大家有什么想要吐槽的,就在留言区说出你的想法。

本文分享自微信公众号 - 李才哥(liqi13695515224)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小闫笔记

JavaScript高级

首先更正一个小问题,昨天的JavaScript入门一文中,末尾的“网页换肤”这个小案例的代码插入的有问题,插入的是名片案例的代码,排版不严谨向您致歉,现在补发更...

12130
来自专栏宋先生的Coding之旅

Bootstrap: 简单使用

http://www.bootcss.com,下载用于生产环境的Bootstrap即可。

12840
来自专栏小闫笔记

html和css进阶

5.0之前没有placeholder新增功能,之前是value(提示的文字需要用户删除,而且字的颜色也没有变暗)实现的

38240
来自专栏腾讯技术工程官方号的专栏

卡牌特效: svg不规则倒计时动效

? 导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,...

17830
来自专栏小闫笔记

web前端入门

8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

12050
来自专栏Android进阶之路

知乎Matisse源码解析,探究高效图片选择库的秘密

可以看到 Matisse 的可拓展性是非常强的,不仅可以自定义我们需要的主题,而且还可以按照需求来过滤出我们想要的文件,除此之外,Matisse 采用了建造者模...

15710
来自专栏算法与编程之美

前端|利用CSS制作动画效果

大家是否觉得上面这个图形需要用到的代码会很复杂?其实不然,我们利用简单的css即可达到此种效果。

14540
来自专栏前端达人

「小技巧」console的用法,不仅仅只有console.log()

在JavaScript开发调试中,console.log()是我们最常用的方法,但是还有其它几个常用的方法,值得我们试一试,也许会起到意想不到的效果。

9920
来自专栏xyjincan

tomcat 崩溃疑问笔记

版权声明:本文为博主原创文章,转载请保留出处 ...

14730
来自专栏算法与编程之美

Web|网页制作秘密武器之列表

列表(list)是指是指在网页中讲相关信息以及条目的方式有序或无序排列而形成的表。常用的列表有无序列表(ul),有序列表(ol)和定义列表(dl)等,接下来,我...

9620

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励