html+css+js

1.HTML语义化

　　html语义化就是指在使用html标签构建页面时，避免大篇幅的使用无语义标签。例如<footer>,<header>等

　　使用语义化标签的作用：I.易于用户阅读，当页面未加载时，页面结构清晰

　　　　　　　　　　　　　II.有利于SEO，搜索引擎根据标签来确定上下文和各关键字权重。

　　　　　　　　　　　　　III.有利于开发和维护

2.盒模型

　　box-sizing,分为标准盒模型（conten-box）和怪异模型（boder-box）。默认情况下为标准盒模型，padding和border会计入盒子的实际宽高，设置的width和height为content的宽高。怪异盒模型的宽高即为盒子的实际宽高。

 

3.浮动

　　作用：I.设置浮动的元素可以实现文字环绕

　　　　　II.设置浮动的块级元素可以排列在同一行

　　　　　III.设置浮动的行内元素可以设置宽高，按照浮动方向对齐排列

　　特点：I.脱离文档流，元素不占用原来位置

　　　　　II.父盒子没有设置高度，需要子盒子撑开，父盒子高度塌陷。

　　　　　III.清除浮动：overflow：hidden / 伪元素 clear：both

 

4.样式优先级的原则

　　！important  > 行内样式 > id选择器 > 类选择器 | 伪类选择器|属性选择器

 

5.css尺寸设置的单位

　　px：像素，绝对单位长度，大小取决于屏幕的分辨率

　　em：相对单位长度，在font-size中使用是相对于父元素的字体大小，在其他属性中是相对于自身的字体大小

　　rem：相对单位长度，相对于根元素的字体大小。

　　vw：相对于视窗宽度的1% 。在做移动端响应式页面时，通常使用vm配合rem。

　　vh：相对于视窗高度的1%

 

6.BFC

　　格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

　　形成BFC的条件：

     　　 1、浮动元素，float 除 none 以外的值； 
     　　 2、定位元素，position（absolute，fixed）； 
      　　3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 
      　　4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

　　BFC的特性：

      　　1.内部的Box会在垂直方向上一个接一个的放置。
      　　2.垂直方向上的距离由margin决定（标准流中margin高度塌陷）
      　　3.bfc的区域不会与float的元素区域重叠。（可实现左右布局，其中一个宽度自适应）
     　　 4.计算bfc的高度时，浮动元素也参与计算。（可撑开标准流的父盒子高度）
      　　5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。（可清除文字环绕）

 

7.未知宽高元素垂直水平居中的方法

　　1.定位和transform：设置子元素相对于父元素绝对定位，  left、top：50% ， transform:translate(-50%,-50%)

　　2.flex布局：设置父级元素display：flex;   justify-content：center;   align-items:center

　　3.table: 设置父级元素display:table;      子元素：display:table-cell；vertical-align:middle;  text-align:center;

 

8.JS数据类型

　　1.基本数据类型：Number   String  Null Undefined Boolean Symbol（es6新出，没有重复数据，可以做object的key）   Bingint（es6新出，可以解决超出普通数据类

　　　　　　　　　　型报错的问题）

　　　　　　　　　　存储在栈中，占据空间小

　　2.复杂数据类型：object（数组，正则，日期，Math函数）

　　　　　　　　　　存储在堆内存中，占据空间大

 

9.null和undefined的区别

　　1.null：  空对象。

　　　　　　typeof判断类型为object（null二进制位全为0，被系统误判为object类型）。

　　　　　　（1）作为函数的参数，表示该函数的参数不是对象

　　　　　　（2）作为对象原型链的终点

　　2.undefined：是全局变量的一个属性。

　　　　　　　　 typeof判断类型为undefined。

　　　　　　　　（1）一个没有被赋值的变量的类型是undefined

　　　　　　　　（2）调用函数时，没有提供实参，该参数为undefined

　　　　　　　　（3）当一个对象的属性不存在却去访问，该属性为undefined

　　　　　　　　（4）一个函数如果没有使用return语句指定返回值，就会返回undefined

　　null==undefined   -->ture

　　null===undefined   ---->false  类型不同

10.变量的提升

　　代码在预解析阶段会进行变量提升，是指将变量声明明提升到它所在的作用域的最开始部分。只提升声明，不提升赋值。

　　es6中let和const没有变量提升，形成暂时性死区。

　　函数声明先于变量提升，且不会被同名变量覆盖，但会被变量赋值后覆盖。

 11.new

　　new关键字后的构造函数不能是箭头函数

　　1.创建一个空对象

　　2.为新建的空对象添加属性“__proto__”,将该属性链接至构造函数的原型对象

　　3.将新建的对象作为this的上下文

　　4.若函数无返回对象，返回this