html/css
什么是盒模型？
常说的CSS盒模型包括标准盒模型和IE盒模型
两者的区别为
.red{
width:100px;
height:100px;
border:10px;
padding:20px;
margin:30px;
background:red;
}
在标准盒模型与怪异盒模型中与margin无关
在标准盒模型中 红块 大小为 140px * 140px
在怪异盒模型中 红块 100px*100px
BFC
什么是BFC
块级格式化上下文，是一种边距重叠解决方案，通俗的讲，BFC是一个容器用于管理块级元素。
如何创建BFC
- float 值不为none
- overflow 为 hidden|auto|scroll
- display 为 table-cell | table-caption | inline-block | inline-flex | flex
- position 为 absolute | fixed
- 根元素
BFC使用场景
- BFC解决垂直方向边距重叠问题
<style>
#margin{
background: #1890FF;
overflow:hidden;
}
#margin p {
margin:15px auto 25px;
background:yellowgreen;
}
</style>
<section id = "margin">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</section>
上下边距发生了重叠，重叠的原则就是取较大值，所以每个p标签的距离都是25px;
通过给某个子元素添加一个父元素，然后给这个父元素添加一个BFC，可以解决孩子元素的边距重叠问题
<style>
#margin {
background: #1890FF;
overflow: hidden;
}
#margin p {
margin: 15px auto 25px;
background: yellowgreen;
}
</style>
<section id="margin">
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
<p>4</p>
</section>
- BFC不与float重叠
<style>
#layout {
background: blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.right {
height: 150px;
background: yellowgreen;
}
</style>
<section id="layout">
<div class="left">1</div>
<div class="right">2</div>
</section>
为了消除重叠可以给右侧div设定overflow:hidden来创建一个BFC元素消除重叠
<style>
#layout {
background: blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.right {
height: 150px;
background: yellowgreen;
overflow: hidden;
}
</style>
<section id="layout">
<div class="left">1</div>
<div class="right">2</div>
</section>
-BFC子元素即使是float元素，也会参与高度计算
<style>
#float {
background: blue;
}
.float {
float: left;
color: yellowgreen;
}
</style>
<section id="float">
<div class="float">这是一个浮动元素</div>
</section>
因为子元素浮动所以父元素高度为0
<style>
#float {
background: blue;
overflow: hidden;
}
.float {
float: left;
font-size: 35px;
color:yellowgreen;
}
</style>
<section id="float">
<div class="float">这是一个浮动元素</div>
</section>
子元素浮动还是撑起了父元素的高度
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素：a b i span input select strong textarea
块级元素： div ul ol li dl dd dt h1-h6 p section table
空元素：br hr img input link meta
行内元素
- css的display属性是inline，不会独占一行
- 相邻行内元素会排列在同一行中，直到一行排不下才会换行
- 行内元素其宽度随元素内容的变化而变化，设置高度和宽度的话不会起作用
- 水平方向上的margin，padding会产生效果，竖直方向上的margin，padding不会产生效果
块级元素
- css的display属性是block，会独占一行
- 默认情况下其宽度自动填满父元素宽度，宽高可以设置，但设置了宽度还是独占一行
行内元素-----块级元素转换
- 修改display为inline-block时可以吧行内元素变成块级元素，修改display为inline，可以把块级元素变成行内元素
- display为inline-block时，可以使行内元素保持在一行内，但具有块级元素的特点
简述src和href的区别
href 是指向网络资源所在位置常用与链接
src 指向外部资源位置 指向的内容将会嵌入到文档中当前变迁所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时将会暂停其他资源的下载和处理，知道将该资源加载编译执行完毕
这就是为什么将js脚本放在底部而不是头部
浏览器是如何渲染页面的
- 解析HTML生成DOM树。
- 解析CSS生成CSSDOM规则树
- 将DOM树与CSSOM规则树合并在一起生成渲染树
- 遍历渲染书开始布局，计算每个节点的位置大小信息
- 将渲染书每个节点绘制到屏幕
当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。
所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：
- CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
- JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。
页面导入时，使用link和@import有什么区别
- 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
列举几个前端性能方面的优化
网络方面
- 减少http请求
- 合并js文件
- 合并css文件
- 使用雪碧图
- 使用base64表示简单的图片
（前面两种可以用webpack之类的打包工具进行打包，后两种也有专门的制作工具） - DNS缓存
数据方面
- 图片懒加载
- 图片预加载
- 优化异步请求 使用正常json数据格式进行交互
- 避免在document上直接进行频繁的DOM操作
垂直上下居中的方法
- 绝对定位+margin：auto
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 240px;
height: 160px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<div class="wrp wrp1">
<div class="box box1">
<h3>完全居中层1：</h3>
<h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3>
</div>
</div>
- display:flex-box
响应式布局原理
响应式布局概念
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
清除浮动
什么是CSS清除浮动？为什么要清除浮动？
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动的方法？
- 使用带clear属性的空元素
- 使用css的overflow属性
- 给浮动的元素容器添加浮动
- 使用临接元素处理
- 使用css的 :after伪元素
浮动溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="first">
<div class="first_one">
123
</div>
<p>当容器的高度为auto，且容器的内容中有浮动
（float为left或right）的元素
，在这种情况下，容器的高度不能自动伸长以
适应内容的高度，使得内容溢出到容器外面而
影响（甚至破坏）布局的现象。这个现象叫浮
动溢出，为了防止这个现象的出现而进行的C</p>
</div>
<div class="second">
123456
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first{
background: red;
}
.first_one{
width: 300px;
float: left;
}
.first p{
width: 600px;
float: right;
}
.second{
height: 100px;
background: blue;
}
</style>
在浮动元素后使用一个空元素如
<div class="clear"></div>
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 br hr来进行清理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="first">
<div class="first_one">
123
</div>
<p>当容器的高度为auto，且容器的内容中有浮动
（float为left或right）的元素
，在这种情况下，容器的高度不能自动伸长以
适应内容的高度，使得内容溢出到容器外面而
影响（甚至破坏）布局的现象。这个现象叫浮
动溢出，为了防止这个现象的出现而进行的C</p>
<div class="clear">
</div>
</div>
<div class="second">
123456
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first{
background: red;
}
.first_one{
width: 300px;
float: left;
}
.first p{
width: 600px;
float: right;
}
.second{
height: 100px;
background: blue;
}
.clear{
clear: both;
}
</style>
- 优点：简单，代码少，浏览器兼容好
- 缺点：需要添加大量无语义html元素，代码不够优雅，后期不容易维护
给浮动元素的容器添加overflow:hidden 或 overflow:auto 可以清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="first">
<div class="first_one">
123
</div>
<p>当容器的高度为auto，且容器的内容中有浮动
（float为left或right）的元素
，在这种情况下，容器的高度不能自动伸长以
适应内容的高度，使得内容溢出到容器外面而
影响（甚至破坏）布局的现象。这个现象叫浮
动溢出，为了防止这个现象的出现而进行的C</p>
</div>
<div class="second">
123456
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first{
background: red;
overflow: auto;
}
.first_one{
width: 300px;
float: left;
}
.first p{
width: 600px;
float: right;
}
.second{
height: 100px;
background: blue;
}
</style>
这种方式就是将浮动元素的父元素做成BFC
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
总结：
一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。
var let const 的区别
- 使用 var 声明的变量会被提升到作用域的顶部
- 在全局作用域下使用 let 和 const 声明变量，变量并不会被挂载到 window 上，这一点就和 var 声明有了区别。
- 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
- var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
- var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
- let 和 const 作用基本一致，但是后者声明的变量不能再次赋值
简述同步和异步的区别
众所周知，javascript是单线程的语言，所谓的单线程，就是从上至下，依次执行，当然这里的依次执行要抛开javascript的预解析机制。javascript最初是为了操作DOM，而操作DOM不能使异步的，不然的话。两个异步任务同时修改DOM结构的话，会导致浏览器不知道执行哪一个。
同步是阻塞模式，异步是非阻塞模式，同步就是在执行某个请求的时候，若该请求需要一段时间才能返回信息才继续执行下去，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。
异步是进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。到有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
怎样添加、移除、复制、创建、查找节点
查找节点
getElementByTagName() 通过标签名称查找节点
getElementByName() 通过元素的Name属性的值
getElementById() 通过元素Id，唯一性
getElementByClassName() 通过类名获取节点
添加 移除 替换 插入
appendChild() 添加子节点
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore() 在已有子节点钱插入一个新的子节点
createElement() 创建一个具体的元素
let box = document.getElementById('box');
box.appendChild(document.createElement('span'));
createTextNode() 创建一个文本节点
let box = document.getElementById('box');
box.appendChild(document.createTextNode("我是文本"));
createDocumentFragment() //创建一个DOM片段
<div class='box'>
<ul id='ul' > </ul>
</div>
/**
*我们都知道，对DOM的操作次数越多，性能消耗也就越大。像这样的循环添加节点，循环了多少次，就对
*DOM操作了多少次，性能消耗明显是不划算的。我们就会想，能否把要插入的节点进行打包，然后一次性
*添加呢？如果可以的话，那就只对DOM做了一次操作了。要实现打包，这就要用到我们的主角
*createDocumentFragment。
*/
//createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
// 获取页面的ul
var element \= document.getElementById('ul');
// 创建一个document.createDocumentFragment()
//
var fragment \= document.createDocumentFragment();
var browsers \= \['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'\];
browsers.forEach(function (browser) {
var li \= document.createElement('li');
li.textContent \= browser;
fragment.appendChild(li); // 此处往文档片段插入子节点，不会引起回流 （相当于打包操作）
});
element.appendChild(fragment); // 将打包好的文档片段插入ul节点，只做了一次操作
实现一个函数clone
实现一个函数clone，可以对JavaScript中的5种主要数据类型（Number、String、Object、Boolean、Function、Array）进行值复制
function clone(data){
let obj;
switch (typeof data){
case "undefined":
break;
case "string":
obj = data+'';
break;
case "number":
obj = data-0;
break;
case "boolean":
obj = data;
break;
case "object":
break;
跨域资源请求
什么是跨域
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况：
- 网络协议不同，如http协议访问https协议
- 端口不同，如80端口访问8080端口。
- 域名不同
- 子域名不同
- 域名和域名对应的ip 如 www.a.com 访问 20.205.28.90
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
