cindy_rain-CSDN博客

原创既爱又恨的inline-block

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

2016-09-15 20:59:22 842

原创构造函数constructor

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

2016-02-26 15:57:51 881

原创闭包学习笔记

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

2016-02-26 12:53:07 353

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

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

2016-02-25 20:49:53 1095

原创作用域学习--------this

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

2016-02-25 17:33:54 272

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

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

2016-02-25 16:42:43 326

原创原型学习笔记

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

2016-02-25 13:11:57 670

原创 JavaScript作用域学习笔记

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

2016-02-23 17:42:26 316

原创响应式布局

随着显示屏幕大小的变化，网页所显示的效果也不一样。如下：当屏幕在980px以上时：当屏幕在980Px和560px之间时：响应式布局可以参考：媒体查询代码奉上：<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=

2015-11-21 10:15:03 307

原创两列固定，中间列宽度自适应

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

2015-11-20 22:07:29 507

原创左侧固定，右侧宽度自适应

这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">

2015-11-20 21:34:22 1805

转载不使用border-radius实现圆角框

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

2015-11-20 20:49:07 4554

转载关于Block Formatting Context－－BFC和IE的hasLayout

转自：关于Block Formatting Context－－BFC和IE的hasLayout 一、BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环

2015-11-20 17:08:08 275

原创闭合浮动

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

2015-11-20 16:39:32 370

原创布局和定位

网页的三种布局流动模型（flow) flow:默认的网页布局模型。浮动模型（flow）可以让块级元素显示在一行，用到 float:left/right;层模型（layer）层模型有三种形式： (a)position:absolute; 这种形式将元素从文档流中拖出，然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝

2015-11-17 20:34:19 374

转载关于垂直居中

垂直居中——父元素高度确定设置父元素的height和line-height的值相等垂直居中——父元素高度不确定多行文本，图片，块状元素的垂直居中有：插入table(包括tbody,tr td)标签，同时设置vertical-align:middle;这个vertical-align:middle只在父元素为th、td时才生效。html代码<table><tbody><tr><td cl

2015-11-17 20:09:21 278

原创关于水平居中

水平居中——行内元素对于如文本，图片等行内元素，使用text-align:center;水平居中——定宽块状元素前提条件： 1. 宽度确定 2. 块状元素方法：左右margin设为auto;<div>定宽块状元素</div>div{ width:500px; margin:1

2015-11-17 19:52:25 304

转载 css的某些特殊属性

当我们为同一个元素设置了两个css属性时，这个元素会使用哪一个属性呢？<p class="style">css特殊性</p>p{ color:red;}.style{ color:blue;}p和.style都匹配到这个元素上，这个元素会选择哪个呢？浏览器会选择.style。这是根据一个叫做权值的特性来决定的。哪种权值高就使用哪种样式。权值规则 *标签权值：1

2015-11-17 19:11:08 444

原创 css实现阴影效果

用CSS实现阴影效果//今天写的html的部分的一部分<div class="main"> <h2>请选择您的身份类型：</h2></div>//css部分.main{ width:1003px; min-height:600px; margin:40px auto; padding-bottom:21px; box-shadow:0px 0px

2015-10-29 20:57:08 343

cindy_rain的博客