随笔分类 - Web前端
1
摘要：BFC的理解与应用 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。 什么是BFC（Block formatting contexts） w3c规范中的BFC定义
阅读全文
摘要：基本概念： 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 Example: div { text-align: left; } //文本居左
阅读全文
摘要：设置css的min-height属性。min-height在Firefox里有效，但IE无法识别。下面有个不错的解决方案，大家可以参考下 对于某些内容可变的层（比如用户评论），我们希望它有个最小的高度 （比如30px），这样的话，即使内容只有一行字，也不会太难看；同时又希望在内容比较多的时候，层的高
阅读全文
摘要：今天的主题是Background-size,在开始介绍Backgrond-size之前，大家一起来回忆一下CSS2中Background中带有的一些属性: background我们可以把其属性值串写在一起，同时也可以一个一个分写出来，下面简简单重温一下各属性的取值情况： 一、设置背景色：backgr
阅读全文
摘要：Background-origin是CSS3为Background扩展的第三个属性，从Background-origin字面上不难发现是指背景图片的原点，其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（background-position的
阅读全文
摘要：上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一，今天和大家一起来学习CSS3中有关于Background的第二新属性Background-clip。CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就
阅读全文
摘要：概述 CSS的white-space属性用于指定如何处理容器中的空白字符，例如：空格( )、换行(\n)、缩进(\t)等。 white-space出自CSS1，适用于块状元素，具有继承性，支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器，其默认值为norma
阅读全文
摘要：这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上找到如
阅读全文
摘要：原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事件流程 一个完整的drag and drop流程通常包含以下几个步骤: 拖拽事件 以下是拖拽产生的一
阅读全文
摘要：示例URL：http://b.a.com:88/index.php?name=kang&when=2011#first window.location和document.location互相等价的，可以交换使用 location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变
阅读全文
摘要：今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。 js获取data-
阅读全文
摘要：each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法 each处理一维数组 var
阅读全文
摘要：jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom mar
阅读全文
摘要：著名的7阶层叠水平（stacking level） 详细参考：http://www.cnblogs.com/coco1s/p/5899089.html http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-contex
阅读全文
摘要：获取ClassName元素 兼容IE、火狐、chrome的可视区域封装 封装缓速运动框架（多个属性） 匀速动画框架
阅读全文
摘要：document.compatMode用来判断当前浏览器采用的渲染方式。 官方解释： BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWid
阅读全文
摘要：浏览器记忆功能问题，需要刷新返回顶部，在代码里需要加上setTimeout 具体方法如下： setTimeout(function(){ window.scrollTo(0,0); }, 50);
阅读全文
摘要：背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景
阅读全文
摘要：居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。 注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无害的居中方法 1. 把ma
阅读全文
摘要：元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一
阅读全文
1