前端常用知识小结

1.闭包

使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当容易造成内存泄漏。

2.cookie

    一,每个特定于明霞最多生成20个cookie,

            (1)ie6或更低版本最多20个cookie

            (2)ie7和之后的版本最后可以有50个cookie

            (3)firefox最多50个cookie

        (4)chrome和safari没有做硬性限制

    二,cookie的最大 大约为4096字节,为了兼容性,一般不超过4095字节

    优点:极高的扩展性和可用性

        (1)通过良好的编程,控制保存在cookie中的session对象的大小

        (2)通过加密和安全传输技术(ssl),减少cookie被破解的可能性

        (3)只在cookie中存放不敏感数据,即使被盗也不会有重大损失

        (4)控制cookie的生命周期,使之不会永远有效,偷盗者很可能拿到一个       过期的cookie。

    缺点:

        (1)cookie数量和长度的限制,长度超常会被截掉

        (2)安全性问题,如果cookie被人拦截,就可以取得所有的session信息,即使加密也于事无补,因为拦截者原样转发cookie就可以达到目的了。

        (3)有些状态不可能保存在客户端。例如 为了防止重复提交表单会在服   务器保存一个计数器。

    3.浏览器本地存储

        (1)sessionStorage:本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储,仅仅是会话级别的存储。

        (2)localstorage:用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    4,webstrage和cookie的区别

        cookie的大小是受限制的,并且每次请求一个新页面的时候cookie都会           被 发送过去,这样无形中浪费了带宽,另外cookie需要指定作用   域,               不  可以跨域调用cookie,需要前端开发者自己封装setcookie,getcookie

3.link和@import的区别

    (1)link是属于html标签,@import是css提供的

    (2)页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完在加载

    (3)import 只在ie5以上才能识别,而link是html标签,无兼容问题

    (4)link方式的样式的权重高于@import的权重

4.box-sizing属性

    box-sizing:content-box      ------  传统盒模型

    box-sizing:boder-box  -------  宽高包括 border+padding+content

5.BFC(块级格式化上下文)

实例:https://www.jianshu.com/p/fc1d61dace7b

BFC:是css中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外部元素互不干扰。它不会影响外部的布局,外部的布局也不会影响到它。

创建BFC:

    (1)float的值不是none

    (2)position的值不是static或者relative

    (3)display的值是inline-block,table-cell,fex,table-caption,inline-flex

    (4)overflow的值不是visible

BFC的特性

    (1)内部的box会在垂直方向上一个接一个的放值

    (2)与同一个BFC的两个相邻的box的margin会发生重叠,与方向无关

    (3)每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此

    (4)BFC的区域不会与float的元素区域重叠

    (6)计算BFC的高度时,浮动子元素也参与计算

    (7)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。

BFC在布局中的应用:

    (1)要阻止margin重叠,只要将两个元素别放在一个BFC即可

    (2)避免高度塌陷:父元素设置为overflow:hidden,因为在创建BFC时,子浮动元素也会参与高度计算

    (3)与浮动元素相邻的已生成BFC的元素,不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式,特点在于左右两栏的宽度固定,中间栏可以根据浏览器宽度自适应。

6.null和undefined的区别

    undifined : 无 的原始值,转换为数字为NAN

        (1)变量被声明了,但没有被赋值,为undifined

        (2)调用函数时,应该提供的参数没有提供,改参数等于undifined

        (3)对象么有赋值的属性,改属性的值为undifined

        (4)函数没有返回值时,默认返回undifined

    null:一个无的对象 转换为数值时为0

        (1)作为函数的参数,表示该函数的参数不是对象

        (2)作为对象原型链的终点

7.document.write   innerHTML的区别:前者是重绘整个页面,后者是可以重绘页面的一部分

8.

9.css 居中

(1)水平居中

        1.   .parent{ text-align:center}  .child{ display:inline-block}

        2    .child{ display:table;  margin:0 auto}

        3.   .parent{position:relative}   .child{  position:absolute;left:50%;transform:translateX(-50%)}

        4  .   .parent{ display:flex; justify-content: center}

    (2)垂直居中

        1.  .parent{ display:flex; align-items:center}

        2. .parent{ display:table-cell; vertical-align:middle}

        3.   .parent{ display:relative}  .child{position:absolute; top:50%; transform:translateY(-50%)}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍...
    55lover阅读 632评论 0 6
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,326评论 0 25
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,453评论 1 19
  • 我想学习一下新的方法
    平者阅读 143评论 0 0