qq_27278679的博客

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs

这是《前端总结·基础篇·CSS》系列的第一篇，主要总结一下布局的基础知识。一、显示（display） 1.1 盒模型（box-model） 1.2 行内元素（inline） & 块元素（block） 1.3 行内块元素（inline-block IE8+ IE6-7/tools） 1.4 flex（IE11+ IE10/-ms-） 1.5 none二、

一、动画（animation）(IE10+)（CSS3） 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二、过渡（transition）（IE10+）（CSS3） 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三、转换（transform）（IE10+,-ms-,-webkit-,-

一、移动端 1.1 视口（viewport） 1.2 媒体查询（media query） 1.3 相对字体大小（rem/em）二、选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级三、样式重置（reset） 3.1 常用重置 3.2 重置插件（Normalize.css）四、浏览器前

由于工作需要，需要一个页面适配不同的显示设备，开始了解媒体查询，虽然早有耳闻但从来没有系统的学习过，今天将自己学习的成果做个分享，部分是从网上摘录的，也有自己的理解。若有不足还希望大家指出我会加以修改。废话过后，进入正题。现今无论是手机还是电脑，各种显示设备五花八门，这让开发者很是头疼。所以想要pc的页面同时适配手机等其他设备，我们的响应式设计就诞生了。实现响应式设计的主要方法是使用css的媒体查

使用requestAnimationFrame有什么好处？浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减

理论篇width:100%的相对于谁想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位于都有一个基准。那么width:100%是基于谁呢？ 我把可能出现的几种情况列在下面，并以DEMO说明，在最后进行总结。 一般层级元素复制 type="text/css">.demo-parent {width:400px;height:60px;line-height:3

save方法是把canvas当前的坐标系特征数据保存在一个stack中的方法，restore方法是从这个stack中移除顶层的数据的方法。那这个坐标系特征数据指的是哪些数据呢？看看save方法的google官方解释/** * Saves the current matrix and clip onto a private stack. Subsequent * calls to trans

1.content有5种属性  a.content：“”                     //为空  b.content：attr（title）     //可以获取当前选中标签的属性值     eg：    div:after{content:attr(class)}   结果：lang  c. content:"大浪"               //页

HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就随时可以查到这些特殊字符的表示方法。简单的介绍一下其使用方法：1、这些字符属于unicode字符集，你的文档需要声明为”utf-8“

方法一：（不支持火狐）[javascript] view plain copy"font-size:14px;">"font-size:14px;">"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

如何修正DIV float之后导致的外部容器不能撑开的问题  在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子：HTML4STRICT代码： style="width:200px

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-th

一、前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet  有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：head> 

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看

原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html原作很强悍导航前言基本知识绘制矩形清除矩形区域圆弧路径绘制线段绘制贝塞尔曲线线性渐变径向渐变（发散）图形变形（平移、旋转、缩放）矩阵变换（图形变形的机制）图形组合给图形绘制阴影绘制图像（图片平铺、裁剪、像素处理[不只图像、包

HTMLDoctype作用？标准模式与兼容模式各有什么区别?（1）、声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工

公共样式手机上的切换标签中英切换标签样式各种点（空心点、实心点、蓝色点、橙色点）箭头航线两种不同方式实现的warning大小不一的radio各种不同的checkbox详情（也就是三横线）公共样式应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。最近领导决定花大时

阅读目录写在前面快速切换文件在源代码中搜索在源代码中快速跳转到指定的行使用多个插入符进行选择设备模式设备传感仿真格式化凌乱的js源码颜色选择器改变颜色格式强制改变元素状态（方便查看不同状态下元素的样式）利用chrome来查看和编辑本地文件选择下一个匹配项可视化的DOM阴影回到顶部写在前面之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的

方法一：采用正则表达式获取地址栏参数：（ 强烈推荐，既实用又方便！）function GetQueryString(name){     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");     var r = window.location.search.substr

var getXmlHttpRequest = function () { try{ //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); }catch(e){ //低版本的IE浏览器没有提供XMLHttpRequest对象，IE6以下 //所以必须使用IE浏览...