【22届】【秋招】前端向复习指北（上）

进击的Oliver
1,288 阅读9分钟

https://pic1.zhimg.com/80/v2-cb0e4f8cfc2ba10cdb1ae881b005d1c7_720w.jpg?source=1940ef5c

写在前面

题主是22届的北邮计算机应届生。
秋招将至，为了能够拿到理想offer，遂开始准备并记录下复习提纲给各位小伙伴们分享。如果有知识点整理得不清楚或者出错希望可以再评论区指出讨论哦。

HTML篇

DOCTYPE作用

  • 告知浏览器的解析器用什么文档标准解析这个文档。（一般使用<!DOCTYPE html>）
  • DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

Meta标签

1. 字符集

<meta charset="UTF-8">

2. name属性

<meta name="keywords" content="前端">	//	关键字
<meta name="description" content="这是我的博客">	//	描述
<meta name="viewport" content="width=device-width, initial-scale=1">	//	移动端窗口
<meta name="author" content="xxx">	//	作者
<meta name="copyright" content="xxx">	//	版权声明

3. http-equiv — http头部信息

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

行内元素与块级元素

  • 常见的行内元素有：a span img button input label

  • 常见的块级元素有：div p h1-6 ul ol header footer nav section

  • 区别：

    （1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
    （2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
    （3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响。

空元素

  • 标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
  • 常见的空元素有：br hr img input link meta

为什么DOM操作慢

一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。

H5的新功能

  • <canvas>：画布
  • <video>，<audio>：媒体标签
  • localStorage：本地离线存储
  • sessionStorage ：数据暂存，在浏览器关闭后自动删除。
  • article、footer、header、nav、section：语义化标签
  • calendar、date、time、email、url、search：表单input的type
  • webworker, websocket：新的技术

H5语义化的理解

我认为 html 语义化主要指的是我们应该使用适合的标签来划分网页内容的结构。

  • 用正确的标签使html结构更清晰可读性更强：导航栏用nav，页首用head，页尾用footer
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO

html文档解析

  • 网络进程接收到响应报文后，若响应头 content-type: text/html ，说明返回的是html页面，则网络进程通知浏览器主进程准备进行html渲染。

  • 浏览器进程接收消息后，创建一个新的渲染进程：

    1. 向渲染进程发送“提交文档”消息
    2. 渲染进程收到消息后，与网络进程简历数据传输管道进行数据接收。当数据下载完毕后，渲染进程通知浏览器主进程“文档提交确认”。
    3. 浏览器进程收到消息后作以下更新： a. 更新前进（→）、后回（←）转台 b. 更新地址栏url c. 将页面初始化为空白

  • DOM解析： html ==> DOM

  • CSS解析: CSS ==> styleSheets

  • 生成布局树：根据DOM树和styleSheets生成布局树

  • 分层: transform发生在这个阶段

  • 绘制

重排、重绘

  • 重排（回流） 是消耗最大的更新方式：更改CSSOM树，触发布局、分层、绘制。 常见触发重排的方式 width height left right

  • 重绘 改变stylesheets，但不触发布局和分层。 常见触发重绘的方式：color background

head标签中必不可少的是

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

href 和 src

  • src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
  • href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

简单来讲src阻塞，href并行。

CSS篇

盒模型

  • 盒模型都是由四个部分组成的，分别是margin、border、padding和content。
  • 区别：
    • 标准盒模型的宽高范围只包含了content
    • IE盒模型的宽高范围包含了border、padding和content。

CSS选择符

  1. id选择器（#myid）

  2. 类选择器（.classname）

  3. 标签选择器（div,h1,p）

  4. 后代选择器（h1 div）

  5. 相邻后代选择器（子）选择器（ul > li）

  6. 兄弟选择器（li~a）：同一父元素下，选中在 li 标签后出现的 a 元素（无需紧跟）

  7. 相邻兄弟选择器（li+a）：同一父元素下，选中紧接在 li 标签后出现的 a 元素

  8. 伪类选择器（ a:hover, li:nth-child(n) ）：选中兄弟元素中的第n个

    <style>
    li:first-child{
        color: red;
    }
</style>
<body>
	<ul>
        <li> 1 </li>
        <li> 2 </li>
        <li> 3 </li>
    </ul>
</body>

  9. 伪元素选择器（::before、::after）：

     .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }

  10. 通配符选择器（*）

伪类和伪元素

  • 在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。

  • 伪类一般匹配的是元素的一些特殊状态，如hover、link等。

  • 伪元素一般匹配的特殊的位置，比如after、befor等。

CSS优先级

  • !import优先级最高
  • 行内样式其次
  • id > class > 元素/伪元素选择器

为什么不建议选择器嵌套层级过多

css合成 styleSheets 过程中是从右向左解析的。
例如 .ctn > .btn > div{} 会先检索所有div再进行筛选，效率很低。

居中

  1. 水平居中

    div {
  width: 200px;
  margin: 0 auto;
}

  2. 单行文本

    #wrapper{	//父元素
            width: 500px;
            height: 500px;
}
 
#wrapper div{	//子元素
            line-height: 500px; //行高=父级的height，垂直居中。
            text-align: center; //水平居中
}

  3. 绝对定位

    • 已知高度

              #wrapper{
            position: relative;//父级
            width: 500px;
            height: 500px;
        }
 
        #wrapper p{
            position: absolute;//子级用绝对定位
            top: 50%;		   //先定位到50%的位置
            left: 50%;
            height: 300px;	   //已知的高度
            width: 400px;
            margin-top: -150px;//往上提本身高度的一半
            margin-left: -200px;
        }

    • 未知高度

      #wrapper{
            position: relative;//父级
            width: 500px;
            height: 500px;
        }
 
        #wrapper p{
            position: absolute;//子级用绝对定位
            height: 300px;	   //已知的高度
            top: 50%;		   //先定位到50%的位置
            left: 50%;
            transform: translate(-50%,-50%);
        }

  4. flex居中

    .container {/*父元素*/
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.div {/*子元素*/
  width: 100px;
  height: 100px;
}

  • 总结

    一般常见的几种居中的方法有：

    对于宽高固定的元素
    1. 我们可以利用margin:0 auto来实现元素的水平居中。
    2. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
    3. 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。
    4. 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对 齐，然后它的子元素也可以实现垂直和水平的居中。
    对于宽高不定的元素

    上面的后面两种方法，可以实现元素的垂直和水平的居中。

display有哪些值

  • none 元素不显示，并从文档流中移除。
  • block 块级元素。默认宽度为父元素宽度，可设置宽高，换行显示。
  • inline 行内元素。默认宽度为内容宽度，不可设置宽高，同行显示。
  • inline-block 行内块元素。等价于可以设置宽高的inline元素。
  • table 表格。

relative，positive，fixed的定位原点

  • relative定位的元素，是相对于元素本身的正常位置来进行定位的（不脱离文档流）

  • absolute定位的元素，是相对于举例该元素最近的，position值不为static的祖先元素来进行定位的。若不存在position不为static的元素则相对浏览器窗口定位。

  • fixed：相对浏览器窗口进行定位。

  • sticky：兼容很差，没了解过。

CSS3特性

  • 新增各种CSS选择器 el:nth-child(n) ；li~a

  • 圆角 border-radius

  • 阴影 box-shadow

  • 弹性盒子 flex

  • 变换（transform）： 缩放，定位，倾斜

    例如：transform: translate(-10px,-10px) / scaleX(2) / rotateZ(45deg)

  • 过渡 transition：属性名 时长 过渡方式 延迟

    例：transition: left 1s linear 1s, top1s linear 2s

    ​ 注意：display: none => display:block 无法过渡，一般该用visibility:hidden => visibility:visible

  • 动画 animation

对BFC的理解？

更多：www.yuque.com/hvvsva/gifi…

  • BFC指的是块级格式化上下文，BFC 中的元素如何排列不会影响到 BFC 之外的元素。
  • 创建BFC的方法
    1. float
    2. position：absolute
    3. display：inline-block
    4. display：flex
    5. overflow：hidden

margin合并、塌陷

margin重叠指的是【在同一个bfc中】垂直方向上，两个相邻元素的margin发生重叠的情况。

  • margin合并：相邻兄弟元素的marin-bottom和margin-top的值发生重叠。

    1. 分别设置相邻兄弟为BFC（float：left）
    2. 为下方的兄弟设置BFC

  • margin塌陷：父元素的margin-top和子元素的margin-top发生重叠。我们可以：

    1. 为父元素设置border-top、padding-top值来分隔它们（不推荐）。

    2. 将父元素设置为BFC。

清除浮动

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;	/*clear CSS 属性指定一个元素是否必须移动到在它之前的浮动元素下面。*/
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

元素竖向的百分比设定是相对于容器的高度吗？

  • 如果是height的话，是相对于容器的高度。

  • 如果是padding或者margin竖直方向的属性则是相对于容器的宽度。

transition 和 animation 的区别

transition关注的是CSS属性的变化。

animation作用于元素本身而不是样式属性，可以使用关键帧的概念，可以实现更自由的动画效果。

CSS和JS做动画

  • CSS 做动画：触发 GPU 加速，调用 GPU 能力，帧率高（60）。难动态设置。

  • JS 做动画：占用 JavaScript 引擎，使用 CPU 计算，帧率低（30-50）。易动态设置。

flex布局

参考：www.cnblogs.com/echolun/p/1…

flex-direction	// 主轴方向

flex-wrap	// 是否自动换行：nowrap则会强行压缩item宽度；wrap会自动换行

flex-flow（flex-direction与flex-wrap结合）

justify-content	//item在主轴上的对齐方式

align-item	//item在副轴上的对齐方式

align-content	//多行item的副轴对齐方式

order：// 顺序

align-self: flex-start;	//	个别元素的副轴对齐方式

flex-grow： 1 // 有剩余空间时进行缩放的比例

flex-shrink：0 // 当页面缩放至过小时，对应元素压缩的比例（flex-shrink越大，被压得越窄）

flex：默认0 1 auto	//（分别为flex-grow flex-shrink flex-basis）

多栏布局

  • flex统一解决：
    定长栏：固定长度
    不定长栏： flex-grow:1

  • 定位解决：
    定长栏：固定长度
    不定长栏：不设置宽高，利用top bottom left right进行拉伸。

    body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

实现三角形

.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomato transparent transparent transparent;
}
avatar
文章
阅读
粉丝