一半设计一半前端

上篇传送门：CSS3:grid网格布局终于来了！上篇下篇来讲作用在grid items上面的属性。一、网格格子占据的区域范围首先要明白有哪几种方法可以指定网格的位置。1、命名区域（Named Areas）通过grid-template-areas属性可以为每一个网格区域命名，从而可以指定某个子项属于...

这篇教程拖了一年多才写，今天总算想把这个坑给填了。grid网格布局是一种典型的二维布局，由行和列构成，其实就是很智能的一种表格，比起flex的一维轴向上的布局，grid对多行多列的布局控制要强大很多。当然，任何布局都有自己的优势和缺点，合适的场景选择合适的布局方式才是明智之举。首先，IE肯定是不支持...

以前看规范的时候，感觉这属性讲的太绕，没有去深究，不过不知其所以然的问题终究有一天还是要面对，毕竟明白自己无知就是学习的最大动力了。百度了一下，看到了一篇靠谱的文章，但是还不够全面，到底谁是原创不太好判定，我就以发布时间最早的为原创帖链接了。[翻译]Flex Basis与Width的区别不过，里面推...

border-image这个属性因为要IE11才支持，所以刚开始使用不太广，不过我认为使用不够广的原因还有一点，就是素材有一定的要求，要考验设计师的想象，虽然功能强大，但是使用场景其实比较限制。这个属性就是设置容器边框的图片，用以代替以前的边框只有纯色。比如这个图片素材，可以利用它生成各种大小的，具...

当用flex布局的时候，大部分的分布都会使用space-between的方式，但是当最后一行的个数和上面行的个数不一样的时候，最后一行的分布就显得尴尬。比如我们想要这样的效果：但是却出现这样的效果：如果每一行列数不确定，宽度不确定，间隔不确定的情况下，最好的方法就是为最后一个元素设置margin-r...

尽管flex布局已经是大势所趋，但是IE11的支持都还不是很友好，在要兼容IE9的PC端，浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell，在一些特殊布局方面提供了很好的帮助，还是需要掌握。翻了很多文章，终于看到一篇介绍详细...

最近在备CSS基础的课程，以为很简单的事情，结果却在一些基本的概念上翻了车，有时候你以为简单的事情，其实你并不理解它的原理。在百度上翻了一下午，终于找到了一篇好文章，是翻译自国外的，很有意义，所以转载到自己博客上。这是中文的链接：你所不知道的vertical-align这是英文的链接：Vertica...

学习了拖拽后，那么碰撞就是拖拽一个对象去碰另一个对象，检测是否碰上了。这里的碰撞是两个矩形对象的碰撞，如果是圆形或者不规则形状，方法又不一样了。这个小案例是拖动老鼠去碰撞灯，老鼠只能在可视区内移动，碰上了灯，灯变亮了。具体效果点击查看知识点：1、利用getBoundingClientRect( )方...

布局是网页的框架，灵活的布局可以让页面信息得以合理的摆放，强健的布局方案可以适应不同分辨率下页面的显示。1、上中下三栏式2、左右两栏式3、左右加页眉页脚4、左中右三栏式       浮动布局    &...

HTML5现在已经有了拖放的API，也就是说拖放已经成为了HTML5的标准，不过还是先了解一下JavaScript最原始的拖拽原理。一、拖拽的基本原理拖拽是基于三个事件触发的：onmousedown : 选择元素onmousemove : 移动元素onmouseup   : 释放元素oDi...

一、事件流当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器团队遇到一个很有意思的问题：页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致...

以前都是直接为对象绑定一个事件处理函数，但是这种方法会导致事件的覆盖。//给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() {     ale...

event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。这个有点像飞机的黑匣子。事件对象必须在一个事件调用的函数里面使用才有内容。事件函数：事件调用的函数，一个函数是不是事件函数，不在定...

基于事件的响应，让页面和用户之间产生交互行为是JavaScript的一大特征。比如，当下面的事件发生的时候，就产生了一个JavaScript事件。当用户单击鼠标时当网页已加载时当图像被加载时当鼠标移动到元素上时当输入字段更改时提交HTML表单时当用户敲击一个键时HTML DOM事件允许JavaScr...

查找到html元素之后，很大一部分操作都需要修改元素的css样式。一般操作CSS样式的方法有如下几种：一、style对象element.style.properties这个style对象的属性是可读可写的，只是它只能读取和设置元素对象的行间样式表。比如：element.style.color=&qu...

元素节点可谓是关键，对于元素节点的增删改查是最常用的。一、获取元素节点的方法document.getElementById()  document(Element).getElementsByClassName()document(Element).getElementsByTa...

因为只讨论HTML DOM，所以，html文档下面的所有对象都是document下面的对象。html最外面的对象就是document了。所以，我们也只讨论document下面的对象的属性和方法。通过这些对象的属性和方法，我们就可以对html所有的元素进行操作。比如增删改查html元素，操作html元...

如果说ECMAScript是JavaScript语言的硬核部分的话，那么DOM就是JavaScript的宿主环境之一。使用HTML DOM，JavaScript可以访问和更改HTML文档的所有元素。DOM（Document Object Model）:文档对象模型当一个html页面被加载后，浏览器就...

在ES6之前，匿名函数一般是这样的：var fn=function(x,y){     return x+y; }ES6提供了一种更简单的函数写法，就是箭头函数：参数 => 函数体var f ...

要理解var和let的区别，先了解一下关于变量的声明以及作用域。一、变量的声明和提升在ES6之前，都是用var关键字来声明变量。var x; // 声明 x如果还没有为变量赋值，此时的变量是undefined。也可以先赋值，再声明，这就是变量提升。也可以理解为...