html&css

1、如何理解html语义化？

让开发员更容易读懂代码，也让百度等搜索引擎更容易读懂，网站更好的SEO

2、哪些是块级和内联

1. 块级元素有：display：block和table。元素标签div、h1、table、p标签等
2. 内联元素有：display：inline和inline_block,元素标签span、表单标签input、radio等

3、盒模型如何计算宽高

1. div宽度+内边距+边框
2. 使用box-sizing:border-box设置宽度

4、形成BFC条件，如何应用

1. 块级格式化上下文
2. 一块独立的渲染区域，内部元素不会影响边界以外元素
3. 使用float-left，float-right，display-flex-inlineblock，position-absolute和fixed,overflow不是visible

6、flex布局思路和常用方法有哪些

1. flex常用的属性是flex-direction确定主轴方向，
2. just-content设置主轴布局
3. align-items设置次要轴方向布局
4. flex-wrap超过宽度是否换行
5. align-self子元素可以自己设置次要轴方向布局，但没有align-items权重高

7、手写清除浮动？

.clearfix:after{
    clear:both;
    content:'';
    display:table;
}

8、position有哪些属性，分别有哪些影响

1. absolute绝对定位最近一层的定位元素
2. relative是相当于自身位置
3. fixed是相对于浏览器窗口

10、line-height有哪些坑？

1. line-height基本用三个单位，固定px，百分比，整数1，
2. 但是该属性会自动传给子元素，固定px和整数会按照子元素自己的fontsize动态设置高度，
3. 如果使用百分比的话会在父元素算成px，然后子元素直接继承固定高度，不会根据自己的fontsize动态设置高度

11、如何实现响应式？

一般PC响应式基本有4种方法，

1. 一种是media，根据可视窗口的宽度预设元素的宽高，但是这样会产生阶梯性变化，但影响不大。
2. 第二种是使用rem单位，根据可视窗口的宽度设置font-size，动态设置大小
3. 第三种是使用vw和vh根据可视窗口的宽高和百分比来布局
4. 第四种是px2rem库去解决，这是最常见的，因为设计稿里都是px，我们按照px开发出来后直接用px2rem会根据可视窗口自动编译成rem

12、如何实现浏览器css兼容？？

1. normal.css
2. 架构上尽量使用兼容性高的css方法

13、你常用的选择器有哪些？

1. 递归子集div p、不递归子集div > p、
2. 同级紧挨着的下一个 div + p、同级后面所有p div ~p
3. 伪类nth-child(1),nth-last-child(1)，基本用在循环组件的第一个或最后一个元素上
4. 伪元素::after 用在清除浮动上

14、css是如何架构的？

1. css架构有多种架构方案，现在流行的主要包括BEM、ACSS、ITCSS

• BEM在OOCSS面向对象的css架构上增加命名规范，比如有个div里面有个按钮，按钮上有个文字，设置样式就是先设置B，block，就是div的classname为a，然后设置E，element，就是按钮的class名称a_b，最后设置M，model的最后按钮的class名称为a_b_c
• ACSS就是一个样式属性，一个类名叫left10，顾名思义就是left10px，极强的复用性，但是破坏了语义化
• ITCSS分七层
• 第一层是setting基础单位，存放颜色、边框、字体等样式；
• 第二层是tools存放mixin和function，minxin里面有清除浮动，多出内容显示...等，function输出一些ACSS架构的class名称，比如循环出left1到100的class名称
• 第三层是generic，统一多个浏览器的默认样式，比如chrom的默认有padding
• 第四层是base层，自定义默认样式，比如a标签和button的默认样式。
• 第五层是object层，组件的骨架样式，layout布局、栅格布局；
• 第六层是compents层，组件样式；
• 第七层是trumps层，可用import、zindex等方法微调样式，

2. 现在优秀的ui框架都是集这些架构的长处，自定义自己的架构Bootstrap,elementui、antdesign都有自己的架构
3. 但是这些架构基本包含几个特点，

• 第一个基础样式，包括color、边框、字体等
• 第二个就是工具tools里的mixin、和function
• 第三个就是浏览器差异，基本都是normal.css，
• 第四个就是基于normal.css加入自定义样式，比如a链接需要黄色，按钮需要圆角5px等，然后就是layout和栅格，组件样式
• 第五个是使用BEM命名规范和ACSS的一个属性一个样式，这些在三大ui框架里特别常见

15、css遇到的哪些坑？

1. 样式污染、
2. 样式重复
3. 过度伪类

16、css如何进行性能优化？

1. 尽量有一个css架构
2. 布局尽量使用flex，
3. 通过webpack打包独立出去，然后用压缩放到CDN上。

17、scss和sass区别？

scss带括号，sass不带括号，我喜欢scss带括号的

18、css架构的mixin和function是什么？

1. mixin和function基本都放在tools里，
2. mixin里放比如省略号，清除浮动。
3. function里循环出左边距1到100的class名称，放在

2、你用哪些方法操作DOM树的？

1. DOM基本有增删改查操作
2. 使用createElement创建标签，innerHTML插入内容用appendChild添加到DOM树上
3. removeChild删除节点
4. 通过property和attrubite来修改节点内容，基本上attrubite的范围大一点，不仅能修改propery能修改的属性还能增加属性。
5. 查询节点基本用documentGetElementById，tagName，className，selectorAll

5、BOM有哪些功能？

1. 浏览器信息相关的navigator
2. 屏幕相关的screen
3. url相关的location
4. url前进后退的history

7、你对事件是如何理解的？

1. 事件常用的有冒泡、默认行为、事件绑定，
2. 冒泡是子元素的点击事件会冒泡的上层元素上，
3. 默认行为是a标签点击完成后跳转且会变颜色，
4. 事件绑定一般是将子元素的事件直接绑定在上层元素上，自身没有点击事件

8、document的load和ready的区别

1. document.addEventListener('DOMContentLoaded',function(){})DOM渲染完成即可执行，此时图片视频可能还没有加载完
2. window.addEventListener('load',function(){})页面全部资源加载完成，包括图片视频

9、ajax请求get和post区别

1. get会将数据拼接在url上，post会封装在请求体内，
2. post请求体积比get大
3. post更安全，可以防止CRSF攻击

10、对xmlHttpRequest有何理解？与fetch区别？

1. http请求的核心API，由浏览器提供
2. 传入请求方式，地址，是否异步
3. 返回有个5个状态，01234，

• 012是发送前准备
• 3是增在解析相应内容，
• 4是响应内容解析完成

11、你对跨域有什么理解？

1. 跨域是浏览器的一种安全保护机制，浏览器的同源策略规定协议、域名、端口都要相同，否则就产生跨域，
2. 但是浏览器加载图片、css、js不会促发同源策略，加载图片基本用于统计打点或者第三方服务，图片一般用于CDN
3. jsonp是基于加载js实w现的，在js路径上面加请求，再掉个callback函数，后端用jsonp返回，前端就能通过window.callback函数获取值

19、如何阻止事件冒泡和默认行为？

1. 使用even.stopPropagation()阻止冒泡
2. 使用even.preventDefault()阻止默认行为

21、如何获取url当前参数

一种是location，一种是新的API，URLSearchParams

25、什么是resfult API？

resfultAPI把url当作唯一资源，多了put和delete请求方式，让接口看起来更易理解

27、https和http

1. https比http多了一个认证，让数据传输更安全，
2. 从互联网开始数据传输安全就有很多做法，
3. 先是怕数据被查看就加了公钥和私钥，
4. 怕传输数据被篡改加了md5，
5. 又怕收错了信息，就又加了数字签名，
6. 但是签名了我也不知道真假，于是找权威机构为大家发放证书，大家都用https的证书进行认证，没有https之前常用的工具都可以监听网络查看发送和接受消息内容，https之后常用软件不能监听到网络传输的内容