L_x_Ll-CSDN博客

转载 BFC、IFC、GFC、FFC

CSS2.1中只有BFC和IFC，上一篇文章简单介绍了一下BFC。现在来说一说BFC、IFC、GFC、FFC到底是什么！BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？float的值不为no

2016-10-28 21:40:21 649

原创 BFC

目前BFC已经是一个耳熟能详的词了，可是当别人问我BFC的一些相关东西时候，我还不能很有底气地去解释BFC的相关问题，所以这两天又详细阅读了一些相关资料，来与大家一起探讨一下BFC。在说明BFC之前，我们先来了解一下Formatting context这个概念，它指的是页面中的一块渲染区域，并且有一套渲染规则，决定子元素如何定位，以及与其它元素间的关系和相互作用。比较常见的Formatting

2016-10-20 16:22:08 381

原创 rem

在页面开发中，之前比较常用的css尺寸单位就是px和em。px：像素，是相对长度单位，相对显示屏分辨率而言，字体大小固定，浏览器无法自定义设置字体大小；em：指的是字体高，相对父元素的尺寸而言，一般body默认为16px，则1em=16px。em中计算公式如下：元素字体大小计算：1/父元素的font-size * 需要转换的像素值 = em值 ;元素没有设置字体大小时，padding

2016-10-18 18:14:30 464

原创 js数组常用方法总结

创建数组：方式一：var arr = new Array();var arr = new Array([size]);var arr = new Array(element0[,element1,.....elementN]]);方式二（数组字面量方式）：var arr = [1,2,3,4];转换方法：toLocaleString()、toString()、valueOf()

2016-08-13 22:19:28 713

原创 http协议浅谈（一）

http协议是属于应用层的面向对象的协议。http主要特点是：支持C/S模式。灵活：允许传输任意类型数据，由Content-Type标记类型。简单快速：客户向服务器请求数据时，只需要请求方法（GET、POST、PUT等等）和路径。无连接：一次连接只能处理一个请求，也就是服务器处理完请求并收到客户端应答时，就断开连接，这样可以节省传输时间。无状态：即对事务处理能力无记忆。也就

2016-08-02 11:14:18 699

原创 js调试

调试技术，在任何一项技术开发中都是一项必不可少的技能。掌握各种调试技巧，必定能在生活中起到事半功倍的效果。本文就简单讲解一下前端js调试技巧，也许你已经很熟悉，那就让我们一起来温习一下。骨灰级调试大师Alert在互联网刚刚起步时候，网页前端主要是以内容展示为主，浏览器脚本还只能为页面提供非常简单的辅助功能，js调试功能也非常弱，只能通过内置Window对象的alert方法来调试，虽然ale

2016-05-13 20:51:11 485

原创 iframe

定义：iframe会创建包含另一个文档的内联框架；提示：您的浏览器不支持iframe这样可以应对无法理解iframe的浏览器。iframe用处：1>.一个网页中嵌入了另一个网页:直接给iframe的src指定要嵌入的网页即可; 2>.局部刷新: ①通过和替换iframe的src实现局部刷新；eg.js:function refresh(url){document.

2016-03-25 16:58:43 901

原创前端的MVC

MVC，是model（模型）— view（视图）— controller（控制器）的缩写，MVC从最初存在于桌面应用中发展到后来成为非常受开发人员欢迎的设计软件模式，在各个方向开发过程中都很受用。下面，我们就简单看一看前端开发中的MVC。MVC已经实现了对html、css、javascript的完全控制，就以一个事件发生过程为例说一说吧：首先人机交互；控制器事件处理被触发；接着控制器从模型中请

2016-03-24 23:18:37 763

原创多栏布局和盒布局

Web页面中的布局，是指在页面中如何对标题、导航栏、主要内容、脚注、表单等各种构成要素进行一个合理的编排。css3之前，主要使用display+float+position进行页面简单布局，但是它们也存在一些缺点，譬如两栏或者多栏中元素高度不一时，可能导致底部很难对齐。因此，css3中引入了一些新的布局方式，使用这些布局除了可以修改之前布局遇到的问题之外，还可以进行更为便捷、更为复杂的

2016-03-22 16:46:02 666

原创 web安全浅谈

随着前端技术的发展，面临的安全问题也越来越多。常见的攻击：XSS(跨站脚本攻击)：用户在加载html文档时执行了非预期的恶意脚本，从而达到恶意攻击用户的目的。浏览器的同源策略没有阻止页面中加载第三方脚本，所以给了攻击者一定的可乘之机。比如，攻击者发现页面有注入脚本的漏洞，针对用户输入没有验证，直接在页面显示了输入内容，他们输入一段有攻击性的脚本使其在页面上执行，这些恶意脚本会修改页面内容，

2016-03-13 14:47:23 495

原创 js原型链

继承作为面向对象语言的重要特性，在js中主要是依靠原型链实现的。下边简单说明一下构造函数、原型对象以及实例间的关系：每个构造函数都有对应的原型对象(prototype)，原型对象中包含一个指向构造函数的指针(constructor)，另外还包括一些让实例共享的属性和方法，而实例中包含着指向原型对象的指针（_proto_）。当我们访问对象的属性时，先在基本属性中查找，如果没有时，再沿着_pr

2016-03-06 17:47:22 297

原创 js闭包

闭包就是一个函数可以访问另一个函数内部的变量，js中父函数不能访问子函数中的变量，但是子函数可以访问父函数中的变量，所以简单来说，闭包就是定义在一个函数内部的函数。在后台的执行环境中，闭包的作用域链中包含自己的作用域，外部函数的作用域以及全局作用域。我们知道，通常函数执行完毕后其中的变量就会被销毁，但是，当函数返回一个闭包时，这个函数的作用域会一直被保存在内存中直至闭包不存在为止，我们在使用过

2016-03-04 16:12:38 409 1

原创 JS作用域

前些天看到了关于JS作用域的文章，结合自己之前了解的一些，在这里做了一个小小的总结。作用域也就是变量能够在声明它的函数体以及这个函数体所嵌套函数体中都是被定义的。举个简单的例子function scope（）{var f=“foo“;if(2var a="1";console.log("f:"+f);//foo}while(1){var b="22"

2016-03-04 15:08:45 398

原创遮罩层（JS+CSS）

实现要求：点击按钮，出现遮罩层并且居中显示文字：提前写好要实现的遮罩层，css定义好样式，js控制display为none或者为block，具体代码如下CSS代码：style type="text/css"> #mask{ position:absolute; left:0; top:0; width:100%;

2016-03-01 15:04:51 640

原创计算机网络部分基础知识

1.一次完整的HTTP请求所包含的7个步骤a.建立tcp连接：Internet被称为TCP/IP网络，HTTP是比tcp更高层次的应用层协议，只有低层次的建立之后才能进行高层次的连接。b.Web浏览器向Web服务器发送请求命令；c.Web浏览器发送请求头信息：之后发送一行空白行表示发送结束d.Web服务器应答：HTTP/1.1 200 OK

2016-02-28 20:51:40 579

原创 css3动画

CSS动画分为Transition功能和Animations功能Transition功能支持从一个属性值平滑过渡到另一个属性值：在样式代码中，如果使用Firefox浏览器，需要写成“-moz-transition”的形式；如果使用Opera浏览器，需要写成“-o-transition”形式；如果使用的是Safari或者是Chrome浏览器，需要写成“-webkit-transtion”形式。

2016-02-28 20:16:07 419

原创关于Ajax

Ajax是无需刷新页面就能从服务器获取数据的一种方法。首先，负责Ajax运作的核心对象是XMLHttpRequest（XHR）对象，虽可能存在实现差异，但是XHR对象的基本用法在各浏览器间还是相对规范的，因此可以放心使用；XHR为通信设置了“相同的域，相同的端口，相同的协议”这一限制，只能实现同源通信，否则会引发安全错误。Ajax跨域：CORS（跨源资源共享）定义了在访问跨源资源时，浏

2016-02-28 19:28:38 475

原创前端性能优化方案索引

下面只是简单说明一下前端性能优化的方法，每种方案具体还需要自己再去仔细推敲。1.请求和响应缓存控制设置请求头发送If-Modified-Since以及If-None-Match来询问服务器请求内容是否更新；设置响应头 Expires可以设置过期时间，Last-Modified最近更新时间。GZIP压缩请求头里可以设置Accept-Encoding告知浏览器支持的压缩方

2016-02-27 09:53:37 515

原创 HTML Meta标签

META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词等。META标签的内容设计对于搜索引擎营销来说是至关重要的一个因素。下边是列举了4个meta标签的不常见功能：1.控制浏览器缓存：本地缓存会提高我们的访问速度，有时候当我们重新打开网页时，发现页面没有更新，而是显示的缓存内容，要解决这个问题，可以使用meta标签：也可以设置截止日期，指定文件过期时

2016-02-27 09:22:30 435

转载网站缓存技术

客户端缓存：浏览器缓存，网关、代理服务器缓存。1.网关、代理服务器缓存：是将网页缓存在网关服务器上，多用户访问同一个页面时，将直接从网关传递给用户页面。2.浏览器缓存：访问同一个页面时，将不再从服务器下载页面，而是从本机中读取，可以设置meta标签，设置时间或日期HTTP头信息如下：HTTP/1.1 200 OKDate: F

2016-02-27 09:09:41 582

转载 web storage和cookie的区别

1. Cookie的大小是受限的；2. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽；3. cookie还需要指定作用域，不可以跨域调用；4. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie；5.

2016-02-27 09:05:35 1451

原创 CSS部分要点

1、link和import区别：link语法属于标签，同时加载，实现DOM操作import语法： @inport"aa.css"属于css，后加载，不能实现DOM操作，可以在CSS中引入其它CSS2、如何理解CSS样式表的层叠性CSS层叠是指CSS在针对同一元素配置同一属性时，依据层叠规则来处理冲突。CSS使用层叠的原则来考虑继承、优先级等重要特征，从

2016-02-20 13:44:33 525

原创清除浮动的几种常用方法

使用float时，会对父元素产生一定的影响，如果父元素没有设置宽高时，则会出现高度塌陷等问题。以下是几种解决浮动问题的方法：1、给父元素加display：inline-block；2、给父元素也加浮动；3、浮动元素下加4、使用伪元素:after{content:"";clear:both;display:block}5、给父元素加overflow:hidde

2016-01-12 16:28:49 918

L_x_Ll的博客