ready

小情绪
254 阅读6分钟

当高度确定时,如何设置一个左右宽度固定,中间宽度自适应

浮动,定位,flex,table-cell,grid

盒模型

标准模型/ie模型分别是什么?他们之间的区别?
标准模型的width不包括padding/border/margin
ie模型的width包括padding和border

css如何设置这两种模型?

box-sizing:content-box;//标准模型
box-sizing:border-box;//ie模型

js如何设置获取盒模型对应的高和宽?

dom.style.width/height
dom.currentStyle.width/height
window.getCopmputedStyle(dom).width/height
dom.getBoundingClientRect().width/height

实例题(根据盒模型解释边距重叠)
数值方向上边距重叠(父子,兄弟) 会取最大值

子元素的margin-top会将父元素也掉下来

BFC(边距重叠解决方案)

  • BFC的基本概念
    BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
  • BFC的原理
  • 如何创建BFC
/*overflow: auto;!*auto或hidden*!*/
            /*float: left;!*除了none的所有属性*!*/
            /*position: fixed;!*fixed或absolute*!*/
            /*display: table-cell;*/
            /*display: table-caption;*/
            /*display: flow-root;*/
            /*display: inline-block;*/
  • BFC使用场景
    边距重叠的情况

dom事件

  1. 基本类型:dom事件的级别
    dom0
element.onclick = function(){}

dom2 false=>指定事件是否在捕获或冒泡阶段执行。false:冒泡(默认) true:捕获

element.addEventListener('click',function(){},false)

dom3 相对于dom2增加了很多方法

element.addEventListener('keyup',function(){},false)
  1. dom事件模型
    捕获(从上而下) 冒泡(从下往上)
  2. dom事件流
    鼠标左键的点击是怎么传到页面上,事件通过捕获到达目标元素,从目标元素上传到window对象也就是冒泡
  3. 描述dom事件捕获的具体流程
    window=>document=>html标签=>body=>页面标签
    冒泡就是反过来
  4. event对象的常见应用
event.preventDefault();//阻止默认行为
    event.stopPropagation();//阻止冒泡
    event.stopImmediatePropagation();//绑定的多个事件 只执行优先级第一个
    event.currentTarget;//事件代理 当给一个父元素的十个子元素都绑定了事件后 获得当前绑定的时间
    event.target;//当前被操作的元素
  1. 自定义事件
var eve = new Event('custom');
    document.getElementById('btn').addEventListener('custom',function () {
        console.log('custom');
    })
    document.getElementById('btn').dispatchEvent(eve);

customEvent也是自定义方法,还可以指定obj

http协议

  1. http协议的主要特点
    简单快速,灵活,无连接,无状态

重绘和回流

浏览器使用流式布局模型 (Flow Based Layout)。
浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。
一句话：回流必将引起重绘，重绘不一定会引起回流。

  1. 回流:当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
    会导致回流的操作：
    页面首次渲染
    浏览器窗口大小发生改变
    元素尺寸或位置发生改变
    元素内容变化（文字数量或图片大小等等）
    元素字体大小变化
    添加或者删除可见的DOM元素
    激活CSS伪类（例如：:hover）
    查询某些属性或调用某些方法
    一些常用且会导致回流的属性和方法：
    clientWidth、clientHeight、clientTop、clientLeft
    offsetWidth、offsetHeight、offsetTop、offsetLeft
    scrollWidth、scrollHeight、scrollTop、scrollLeft
    scrollIntoView()、scrollIntoViewIfNeeded()
    getComputedStyle()
    getBoundingClientRect()
    scrollTo()

  2. 重绘:当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

HTTP协议类

  1. HTTP协议的主要特点：
    简单快速，灵活，无连接（连接一次就会断掉），无状态（HTTP协议不能区分状态）
  2. HTTP报文的组成部分
    请求报文分为 请求行（http方法 页面地址 http协议 版本），请求头（要哪些内容 什么形式），空行，请求体 响应报文分为 状态行（多状态码），响应头，空行，响应体
  3. HTTP方法
    get获取资源 post传输资源 put更新资源 delete删除资源 head获取报文头部
  4. post和get的区别
  • get在浏览器回退时是无害的 而post会再次提交请求
  • get产生的url地址会被收藏，post不可以
  • get会被浏览器主动缓存，post不会，除非主动设置
  • get只能进行url编码，而post支持多种编码方式
  • get参数会被完整保留在浏览器历史记录中，而post参数不会被保留
  • get请求在url传输的参数是有长度限制的，而post没有限制
  • 对参数的数据类型，get只接受ascll字符，而post没有限制
  • get比post更不安全，因为参数直接暴露在url上
  • get参数通过url传递，post放在request body中
  1. HTTP状态码
  • 1xx 指示信息-表示请求已接受，继续处理
  • 2xx 成功 206 当请求太大时会返回，如请求视频时
  • 3xx 重定向-要完成请求必须进行更进一步的操作
    301 永久重定向 302 临时重定向 304 资源没有发生变化，有缓存跨域直接用
  • 4xx 客户端错误-请求有语法错误或请求无法实现
    400 客户端请求有语法错误，不能被服务器所理解
    401 请求未经授权
    403 对被请求页面的访问被禁止
    404 请求资源不存在
  • 5xx 服务器错误-服务器未能实现合法的请求
    500 服务器发生不可预期的错误
    503 请求未完成 服务器临时过载或宕机，一段时间后可能回复正常
  1. HTTP持久连接（Keep-Alive）
    1.1版本支持，持久连接即客户端到服务端的连接持续有效，当出现对服务器的后续请求时，Keep-Alive功能呢避免了建立或重新建立连接
  2. 管线化
    通过持久连接完成，请求和回应不是一来一回，而是请求1请求2请求3回应1回应2回应3
    只有get和head可以进管线化，post有限制
    第一次连接的时候不要开启管线化，因为对方不一定时1.1
avatar
文章
阅读
粉丝