首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端面试系列(7)

前端面试系列(7)

作者头像
李才哥
发布于 2019-07-30 03:28:13
发布于 2019-07-30 03:28:13
42000
代码可运行
举报
文章被收录于专栏:李才哥李才哥
运行总次数:0
代码可运行
一、css盒模型
1、基本概念:

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div style="background: red"></div>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <head>    
 <style>    
    .content {background: red;}      
</style> 
 </head>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<head>     
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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特性来调用。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <button type="button" onclick="messageShow()">clickme</button>    
 <script>    
     function messageShow(){      
         alert("Yes");    
    }    
 </script>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button type="button">clickMe</button>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>    
  var oBtn=document.getElementsByTagName("button")[0];    
  oBtn.onclick=function(){        
  alert('Yes1');     
  }    
</script> 

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <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。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 console.log(typeof(Array));  //"function"
 console.log(typeof(Object)); //"function"
 console.log(typeof(null)); //"Object"

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 if(typeof(a)!="undefined"){      
 console.log("ok");  
 }

如果存在的话返回ok。

2、instanceof

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   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元素的位置,尺寸等影响布局的样式发生变化时,会引起浏览器的重排
  • 重排一定会引发重绘
  • 但是重绘不一定能引起重排

在任何时代,

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

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

没有任何一种文化模因

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

在任何时代,

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

没有一点高级。

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

耐心地拆除信息壁垒,

并且能够坚持下来,

那真不是一般的不易。

在任何时代,

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

和花半辈子看不清的人,

自然是不一样的命运。

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

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

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

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

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

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

知道你会来

所以我一直在这里等

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 李才哥 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
2025最新出炉--前端面试题七
回答: 盒模型是 CSS 布局的核心概念,每个元素都被视为一个矩形盒子,包含以下部分:
全栈若城
2025/02/13
2600
前端系列第8集-Javascript系列
在 JavaScript 中,类型转换(Type Conversion)是将一种数据类型转换为另一种数据类型的过程。JavaScript 中的类型转换主要发生在以下情况下:
达达前端
2023/10/08
3000
看不完的那种!前端170面试题+答案学习整理(良心制作)
圆角border-radius,阴影box-shadow,对文字加特效text-shadow,线性渐变gradient,变化transform,伪元素::selection,媒体查询,多栏布局,图片边框border-image。
达达前端
2021/01/18
12K0
21道前端面试题,值得收藏~
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
王小婷
2020/10/23
6110
一年前端面试打怪升级之路
一个进程就是一个程序的运行实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。进程是运行在虚拟内存上的,虚拟内存是用来解决用户对硬件资源的无限需求和有限的硬件资源之间的矛盾的。从操作系统角度来看,虚拟内存即交换文件;从处理器角度看,虚拟内存即虚拟地址空间。
loveX001
2022/11/02
4330
前端面经笔记 - wuuconix's blog
上个月才下定目标,决定找一份前端的工作,在这之前我对我应该选择什么岗位是迷茫的,前端?后端?安全岗?
wuuconix
2023/03/16
2.8K0
前端面经笔记 - wuuconix's blog
前端面试必备技巧
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂……
solocoder
2022/03/31
1K0
前端面试必备技巧
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
=============================================================
全栈程序员站长
2022/09/05
2K0
求职 | 史上最全的web前端面试题汇总及答案
作者 | 樱桃小丸子儿 链接 | http://www.jianshu.com/p/abadcc84e2a4 HTML&CSS img的alt和title的异同? alt 是图片加载失败时,显示在网页上的替代文字; title 是鼠标放上面时显示的文字,title是对图片的描述与进一步说明; 这些都是表面上的区别,alt是img必要的属性,而title不是。 对于网站seo优化来说,title与alt还有最重要的一点: 搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包
用户1097444
2022/06/29
1.6K0
求职 | 史上最全的web前端面试题汇总及答案
总结一些前端的知识点 (一)
一、W3C 标准盒模型和 IE 盒模型区别: 1. W3C 标准盒模型: 盒子的高宽是由盒子的内容区仅由 width, height 决定的,不包含边框,内外边距。 2. IE 盒模型: 在 IE
用户1667431
2018/04/18
8280
总结一些前端的知识点 (一)
JS的面试题(一)
从自身开始,沿着__proto__指向,一直到Object.prototype,这样一条链式结构,终点是null
世间万物皆对象
2024/03/20
4560
前端面试比较好的回答
DNS占用53号端口,同时使用TCP和UDP协议。 (1)在区域传输的时候使用TCP协议
loveX001
2022/11/09
1.3K0
Web前端面试宝典(最新)
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
半指温柔乐
2018/09/11
3.3K0
前端面试如何回答,这些题目或许可以给你一些提示
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
loveX001
2022/11/15
6660
BOM大详解
了解: 1.BOM架构全局对象的使用. 2.根据案例来讲解 3:大总结。 4;效果.
贵哥的编程之路
2020/11/06
5500
2018年最全面的前端面试题都在这里了
意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的使用无语义的标签div和span; 2.在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利; 3.不要使用纯样式标签,如:b、font、u等,改用css设置。 4.需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i); 5.使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td; 6.表单域要用fieldset标签包起来,并用legend标签说明表单的用途; 7.每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
前端达人
2018/10/16
7.6K0
一个合格的初级前端工程师需要掌握的模块笔记
<form></form>表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
达达前端
2021/02/05
3.9K0
一个合格的初级前端工程师需要掌握的模块笔记
【前端面试题】我靠它拿到了大厂Offer
instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
前端修罗场
2023/10/07
1.2K0
【前端面试题】我靠它拿到了大厂Offer
前端核心基础知识总结
做前端开发的小伙伴都清楚HTML 是前端开发的基础,它用于构建网页的结构,它由一系列元素组成,这些元素可以定义文档的结构和内容。关于HTML模块的使用也是非常重要的,那么以下分享一下是 HTML 相关的关键知识点。
三掌柜
2024/09/01
3940
前端核心基础知识总结
曾经面试踩过的坑,都在这里了~
  前段时间面试(包括阿里巴巴的电话面试),遇到过一些面试题,且面试中出现机率较高的提问/笔试,有些答的不是很好挂掉了,今天终于有时间整理出来分享给大家,希望对大家面试有所帮助,都能轻松拿offer。
苏南
2018/11/30
1.1K0
曾经面试踩过的坑,都在这里了~
推荐阅读
相关推荐
2025最新出炉--前端面试题七
更多 >
LV.2
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档