原理

  • 1、同源策略

    同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

    一个源的定义:如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,则两个页面具有相同的源。

    下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例:

    URL 结果 原因
    http://store.company.com/dir/inner/another.html 成功 同一域名
    http://store.company.com/dir2/other.html 成功 同一域名下不同文件夹
    https://store.compa
  • 1、javaScript的变量类型

    (1)基本类型:
    5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。

    (2)引用类型:
    存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。

    JavaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷

  • 开本 issues ,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

    解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

    不断更新,不断更新,不断更新,重要的事情说三遍。

    2、类似下面这个图形,只使用一个标签,可以有多少种实现方式:

    backgroundClip

    假设我们的单标签为 div:

    <div></div>

    定义如下通用 CSS:

    div{
        position:relative;
        width: 180px;
        height: 180px;

  • 介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用。

    vw and vh

    1. 1vw 等于1/100的视口宽度 (Viewport Width)

    2. 1vh 等于1/100的视口高度 (Viewport Height)

    综上,一个页面而言,它的视窗的高度就是 100vh,宽度就是 100vw 。看个例子:

    CodePen Demo

    响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办?

  • 什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷。在 CSS 层面亦不例外。

    一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下:

    • 很多实验性功能未成为标准却被大量使用;
    • 需要兼容多终端,多浏览器,而各浏览器对某一新功能的实现表现的天差地别;

    所以有了优雅降级渐进增强的说法,在这种背景下,又想使用新的技术给用户提供更好的体验,又想做好回退机制保证低版本终端用户的基本体验,CSS 特性检测就应运而生了。

    CSS 特性检测就是针对不同浏览器终端,判断当前浏览器对某个特性是否支持。运用 CSS 特性检测,我们可以在支持当前特性的浏览器