关闭

既爱又恨的inline-block

今天被inline-block坑了初出茅庐,第一天实习的我就被inline-block坑了,在平时的练习中从未碰到这个坑,幸亏公司的一个热心的小伙伴指点,我才解决。也怪我学艺不精啦。好了,来说说我是怎么被坑的吧。 OK,模拟一下场景,怎么调都不对,愚蠢的我居然没有去想inline-block的锅。 图(1) 我们从图中可以看到中间黄色方块的底部是和旁边红色方块的英文字对齐的,和蓝色方块的...
阅读(609) 评论(0)

构造函数constructor

constructor指的就是对象的构造函数.function Fn(){ var a = 1; } var foo = new Fn(); console.log(foo.constructor);从这个例子中,我们可以很清楚地看到foo的构造函数是Fn,即foo.constructor === Fn(). 函数也是对象,也应该是有构造函数的,那么函数的构造函数又是什么呢?console...
阅读(226) 评论(0)

闭包学习笔记

参照学习Javascript闭包(Closure) 参照理解 Javascript 的闭包概念闭包是指有权访问另一个函数作用域中的变量的函数。用途 读取函数内部的变量。 让这些变量的值始终保存在内存中。 function f1(){ var n = 999; nAdd = function(){n++}; function f2(){ console.log...
阅读(144) 评论(0)

作用域--------上下文环境

除了全局作用域外,每个函数还能创建自己的作用域。作用域在函数定义时就已经确定了。而不是在函数调用时确定。 现在讲作用域和上下文环境放在一起,有助于了解作用域。var a = 10; var b = 30; function fn(x){ var a = 100; var c = 20; function f1(x){ var a = 1000;...
阅读(532) 评论(0)

作用域学习--------this

我们知道,无论何时,this都是有值的。this的取值也是不确定的,定义函数时这个this值是暂时的,函数真正执行时才确定。因为this的取值是执行上下文环境中的一部分,每次调用函数时,都会产生一个新的上下文执行环境,所以,this的取值有可能不同。全局函数var a = 5; function fn(){ console.log(this); //window console....
阅读(133) 评论(0)

作用域学习------执行上下文环境

参考深入理解javascript原型和闭包(8)——简述【执行上下文】上概念执行上下文环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为JS代码在真正一句一句执行之前,浏览器已经做了一些准备工作。我们首先从这个例子入手。例1console.log(a);//undefinedconsole.log(a);//undefined var a = 100;var a; console.log(...
阅读(133) 评论(0)

原型学习笔记

参考《Javascript高级程序设计》 参考JavaScript探秘:强大的原型和原型链 参考js原型链原理看图说明 参考深入理解javascript原型和闭包 什么是原型?原型是一个对象,其他对象可以通过它实现属性继承。任何一个对象都可成为原型。哪些对象具有原型?所有对象在默认情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又是一个原型(例外,默认的对象原型在原型链的最顶端)。...
阅读(253) 评论(0)

JavaScript作用域学习笔记

Javascript作用域原理 理解 JavaScript 作用域和作用域链 作用域 作用域就是对变量和函数可访问的范围,作用域控制着函数和变量的可见性和生命周期 全局作用域在代码中,任何地方都能访问到的的对象具有全局作用域。以下三种情况具有全局作用域。 最外层函数和在最外层定义的变量具有全局作用域。var name = "cindy"; //全局变量 function func(...
阅读(178) 评论(0)

响应式布局

随着显示屏幕大小的变化,网页所显示的效果也不一样。如下: 当屏幕在980px以上时:当屏幕在980Px和560px之间时:响应式布局可以参考:媒体查询 代码奉上: <meta name="viewport" content="width=device-width, initial-scale=...
阅读(173) 评论(0)

两列固定,中间列宽度自适应

首先,我先举两个例子,一个是圣杯型布局,另外一个是双飞翼型。双飞翼型是某博主由圣杯型参考后自创的一个布局方式。 1. 圣杯型布局 尝试之路考虑以下DOM结构: div id="page"> div id="hd">div> div id="bd"> div class="main">di...
阅读(264) 评论(0)

左侧固定,右侧宽度自适应

这里用到两种方法实现实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度,我们可以看到红色区域不发生改变,红色区域随着黄色区域宽度的改变而改变。 html部分 DIVA ...
阅读(600) 评论(0)

不使用border-radius实现圆角框

原文:基本的圆角框 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次...
阅读(1051) 评论(0)

关于Block Formatting Context--BFC和IE的hasLayout

转自:关于Block Formatting Context--BFC和IE的hasLayout 一、BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环...
阅读(122) 评论(0)

闭合浮动

原文:那些年我们一起清除过的浮动 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 清除浮动:就是clear,属性有clear:left/right/none; 闭合浮动:就是是浮动闭合,从而减少浮动带来的影响; 两者的区别: 通过两个图片的对比,我们可以看出清除浮动和闭合浮动的区别:清除浮动不能解决高度塌陷的问题。 二.浮动...
阅读(151) 评论(0)

布局和定位

网页的三种布局 流动模型(flow) flow:默认的网页布局模型。 浮动模型(flow) 可以让块级元素显示在一行,用到 float:left/right; 层模型(layer) 层模型有三种形式: (a)position:absolute; 这种形式将元素从文档流中拖出,然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝...
阅读(187) 评论(0)
19条 共2页1 2 下一页 尾页
    个人资料
    • 访问:5378次
    • 积分:195
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类