03 2016 档案

Flex 布局教程：语法篇
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种 阅读全文
posted @ 2016-03-24 19:51 AutismTune 阅读(237) 评论(0) 推荐(0) 编辑
css中的hack
摘要：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏 览器会先给元素使用 阅读全文
posted @ 2016-03-24 19:28 AutismTune 阅读(188) 评论(0) 推荐(0) 编辑
深入理解选择器权重
摘要：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符” 那 么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的css图书中采 用了10进制的简单相加计算方式 阅读全文
posted @ 2016-03-24 19:23 AutismTune 阅读(780) 评论(0) 推荐(1) 编辑
FOUC
摘要：如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为： 1，使用import 阅读全文
posted @ 2016-03-24 19:20 AutismTune 阅读(245) 评论(0) 推荐(0) 编辑
CSS框模型：一切皆为框 — 从行框说起
摘要：css 行框 各部分详解 上图代表了框模型中的行框。line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为 阅读全文
posted @ 2016-03-18 18:57 AutismTune 阅读(3351) 评论(1) 推荐(1) 编辑
block，inline和inline-block概念和区别
摘要：总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一 阅读全文
posted @ 2016-03-18 13:47 AutismTune 阅读(164) 评论(0) 推荐(0) 编辑
巧用cssText属性
摘要：给一个HTML元素设置css属性，如 这样写太罗嗦了，为了简单些写个工具函数，如 发现 Google API 中使用了cssText属性，后在各浏览器中测试都通过了。一行代码即可，实在很妙。如 和innerHTML一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需 阅读全文
posted @ 2016-03-15 21:54 AutismTune 阅读(1047) 评论(0) 推荐(0) 编辑
js中的toString
摘要：返回对象的字符串表示 objectname.toString([radix])参数 objectname 必选项。要得到字符串表示的对象。 radix 可选项。指定将数字值转换为字符串时的进制 说明 toString 方法是所有内建的 JScript 对象的成员。它的操作依赖于对象的类型： 对象 操 阅读全文
posted @ 2016-03-15 20:54 AutismTune 阅读(291) 评论(0) 推荐(0) 编辑
用Javascript获取页面元素的位置
摘要：制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先，要明确两个基本概念。 一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。 浏览器窗口的大小，则是指在 阅读全文
posted @ 2016-03-11 10:29 AutismTune 阅读(3800) 评论(0) 推荐(0) 编辑
负值之美：负margin在页面布局中的应用
摘要：一、左右列固定，中间列自适应布局 此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。 HTML： <div class="main"> <div class="main_body">Main</div> </div 阅读全文
posted @ 2016-03-10 14:13 AutismTune 阅读(287) 评论(0) 推荐(0) 编辑
负margin
摘要：自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo 阅读全文
posted @ 2016-03-10 13:51 AutismTune 阅读(160) 评论(0) 推荐(0) 编辑
CSS布局奇淫巧计之-强大的负边距
摘要：css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素（指不是浮动 阅读全文
posted @ 2016-03-10 13:03 AutismTune 阅读(251) 评论(0) 推荐(0) 编辑
由浅入深漫谈margin属性
摘要：margin 在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。 一、margin的基本特性 margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用 阅读全文
posted @ 2016-03-10 09:25 AutismTune 阅读(190) 评论(0) 推荐(0) 编辑
双飞翼布局和圣杯布局的对比
摘要：在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？ 在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。 DOM结构：main内层增加了一个 阅读全文
posted @ 2016-03-06 21:20 AutismTune 阅读(182) 评论(0) 推荐(0) 编辑
圣杯布局的实现过程
摘要：圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇文章会讲到。 圣杯布局：用到浮动、负边距、相对定位，不添加额外标签 DOM结构： <div class="header">Header< 阅读全文
posted @ 2016-03-06 21:19 AutismTune 阅读(396) 评论(0) 推荐(0) 编辑
CSS实现垂直居中的5种方法
摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短 阅读全文
posted @ 2016-03-06 20:18 AutismTune 阅读(203) 评论(0) 推荐(0) 编辑
JavaScript之作用域与闭包详解
摘要：前言： JavaScript是一种应用非常广泛的语言，其也有一些自身特点和优势，本文重在讲述其作用域机制以及闭包，会从一些实例来探讨其机理。 作用域在JavaScript程序员日常使用中有不同的含义，如下所示： this绑定的值； this绑定的值定义的执行上下文； 一个变量的“生命周期”； 变量的 阅读全文
posted @ 2016-03-06 16:26 AutismTune 阅读(203) 评论(0) 推荐(0) 编辑
js闭包（三）
摘要：场景一：采用函数引用方式的setTimeout调用 闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数。例如，在web环境中，一个函数作为setTimeout函数调用的第一个参数，是一种很常见的应用。 setTimeout将要执行的函数(或者一段javascript代码，但这不是我们要 阅读全文
posted @ 2016-03-05 19:05 AutismTune 阅读(208) 评论(0) 推荐(0) 编辑
js闭包（二）
摘要：一、何谓“闭包”？ 所谓“闭包(Closure)”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。 描述的如此学术的官方解释，相信很少人能够理解，其实所有的函数都是一个闭包，不过我们所说的“闭包”通常指的是函数嵌套所产生的闭包。这种闭包更 阅读全文
posted @ 2016-03-05 19:04 AutismTune 阅读(322) 评论(0) 推荐(0) 编辑
CSS制作水平垂直居中对齐 多种方式各有千秋
摘要：作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收 集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对 于我这样 阅读全文
posted @ 2016-03-04 21:40 AutismTune 阅读(452) 评论(0) 推荐(0) 编辑
渲染机制
摘要：从上面这个图中，我们可以看到那么几个事：1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。CSS，解析CSS会产生CSS规则树。Javascript，脚本，主要是通过DOM API和CSSOM 阅读全文
posted @ 2016-03-04 21:14 AutismTune 阅读(207) 评论(0) 推荐(0) 编辑
DOM操作优化
摘要：缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能，我们经常要根据用户的操作来动态的增加和删除元素，或是通过AJAX返回的数据动态生成元素。比如我们获得了一个很多元素的数组data[]，需要将其每个值生成一个li元素插入到一个id为container的ul元素中 阅读全文
posted @ 2016-03-04 20:48 AutismTune 阅读(263) 评论(0) 推荐(0) 编辑
render tree与css解析
摘要：浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧，我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到了CSS的相关知识。从MVC 阅读全文
posted @ 2016-03-04 20:39 AutismTune 阅读(1105) 评论(0) 推荐(0) 编辑
网站性能
摘要：【第311期】网站的灵魂——性能 2015-08-04 飘扬的红领巾 前端早读课 来自早读君： 以前分享性能，更多的会分享在前端部分，这么多年过去了，性能优化还是那些，今天来看看整体的是什么样的？这次分享分享会涉及到服务端，有兴趣的可以多了解下。 正文从这开始～ 什么是性能 有人说性能就是访问速度快 阅读全文
posted @ 2016-03-04 20:33 AutismTune 阅读(183) 评论(0) 推荐(0) 编辑
IE双边距bug
摘要：标准参考 根据 W3C CSS2.1 规范中的描述，对于非替换的浮动元素，若 'margin-left' 或 'margin-right' 特性的计算值为 'auto'，则它们的实际使用值为 '0'。 除此之外，'margin-left' 与 'margin-right' 特性的计算则采用其自身定义 阅读全文
posted @ 2016-03-04 20:18 AutismTune 阅读(554) 评论(0) 推荐(0) 编辑
CSS条件注释
摘要：由于浏览器版本的不同，对CSS里某些元素的解释也不一样，针对浏览器版本不同而选择不同CSS的代码，其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧。 阅读全文
posted @ 2016-03-04 20:03 AutismTune 阅读(346) 评论(0) 推荐(0) 编辑
ie7下z-index失效问题解决方法
摘要：绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法： 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先，其中包含的 阅读全文
posted @ 2016-03-04 19:58 AutismTune 阅读(150) 评论(0) 推荐(0) 编辑
placeholder兼容性问题
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or 阅读全文
posted @ 2016-03-04 19:43 AutismTune 阅读(205) 评论(0) 推荐(0) 编辑
CSS清浮动处理（Clear与BFC）
摘要：在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <tit 阅读全文
posted @ 2016-03-04 10:28 AutismTune 阅读(219) 评论(0) 推荐(0) 编辑
IE的haslayout
摘要：haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元 素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性 阅读全文
posted @ 2016-03-04 09:53 AutismTune 阅读(156) 评论(0) 推荐(0) 编辑
伪类与伪元素
摘要：伪类： 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化 的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它 是基于文档 阅读全文
posted @ 2016-03-04 09:34 AutismTune 阅读(177) 评论(0) 推荐(0) 编辑
js实现鼠标拖拽
摘要：主要原理： 1、当鼠标按下时，记录鼠标坐标，用到的是 onmousedown； 2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是 onmousemove； 3、当鼠标松开时，清除事件，用到的是 onmouseup； 了解的知识： 1、div 的 offsetLeft 与 style.left 的区 阅读全文
posted @ 2016-03-02 10:47 AutismTune 阅读(417) 评论(0) 推荐(0) 编辑
ie6下会拒绝高度小于字号的设置
摘要：<div style="height: 5px;background-color: yellow">wojitianhenkaixin</div> 此时浏览器显示为 此时IEbug问题 解决方案一：<div style="height: 5px;overflow:hidden;background- 阅读全文
posted @ 2016-03-02 10:16 AutismTune 阅读(252) 评论(0) 推荐(0) 编辑
CSS外边距margin上下元素重叠
摘要：两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 阅读全文
posted @ 2016-03-02 09:58 AutismTune 阅读(4496) 评论(0) 推荐(0) 编辑
IE6中浮动双边距bug
摘要：想要创建出漂亮的网页设计， 除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码， 漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的 阅读全文
posted @ 2016-03-02 09:47 AutismTune 阅读(296) 评论(0) 推荐(0) 编辑