巴黎的妖

.box{ animation: change 1s ease-in infinite ; font-size: 36px; color:#f00; font-weight: bold} @keyframes change { 0%{ text-shadow: 0 0 4px #f00} 50%{ text-shadow: 0 0

行内样式（Inline Style），如...；ID选择符（ID selectors），如#myid；类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover；类型（elements)、伪类型选择符(pseudo-elements)，如 p {...}、:first

1. 引言　　从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。　　第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《css知多少（4）——解读浏览器默认样式》那一节已经说过了。另外还有一个重点，就

1. 引言　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入

1. 清除float　　《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮动”） ？方法有很多种，我在这里介绍4中供大家参考，大家可根据实际情况来选择。　　先介绍两个比较简单，但是不常用的解决方法：为父元素添加overflow:hidden浮动父元素　　这两个方

1. 引言　　网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。　　　　其实，这部分知识都囊

1. 引言　　本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。　　如果没有定位，我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过margin和padding调

Perishable Press网站近日发表了一篇文章《3 Ways to Preload Images with CSS, JavaScript, or Ajax》，分享了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。下面为译文。预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片

预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验。在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户。不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果。先说需要知道的服务器返回的status

1. 引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。　　　　上图中，css中的两个选择器都是针对的，而且两个设置的颜色不一样，这里的到底听从谁的命令？　　上面还是比较简单的，下面在来一个复杂的：　　　　上图中的该显示成什么颜色呢？2. 特指度　　要解决以上问

对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般也就是改一改字号大小和字体样式，也没甚好说的。而最有的说的就是浏览器的默认样式。　　不同浏览器的默认样式多少有些区别，特别是老版本的浏览器之间，现在高级浏览器越来越向统一的标准靠拢，对前端程序猿来说是一件好事情。虽然有些许差异，但是绝大部分还是相同的，我先把代码粘贴出来 ，具体的解读咱们慢慢道来（只说重点，比较容易的或者

CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配。 看如下规则：示例 11#nav li {}看起来很快，实际上很慢，尽管这让人有点费解。我们中的大多数人，尤其是那些从左到右阅读的人，可能猜想浏览器也是执行从左到右匹配规则的，因此会推测这条规则的开销并不高。在脑海中，我们想象浏览器会像这样工作

html{ background:url('background.jpg') no-repeat center center; min-height:100%; background-size:cover;}body{ min-height:100%;}

首页 博客 设计 相册 论坛 关于 #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 解释一下： #menu ul {list-style:none;margin:0px;} list-style:none，这一句是取消

水平居中，如果知道元素的宽度，则可以使用 代码如下复制代码.cell{width:300px; margin:0 auto; text-align:center;}如果是内联元素居中，那么直接用text-align:center则行如果未知元素宽度，并且非内联元素，那么下面给出的几种方案也适合你。用CSS来实现

一、写在前面的秋裤早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！最近折腾iPad的一些东西，有一些3D效果的交互。有些事情，总以为是遥远的未来，谁知真正发生的时候说来就来

一、哟，requestAnimationFrame, 新同学，先自我介绍下Hello, 大家好，我就是风姿卓越，万种迷人的requestAnimationFrame，呵呵呵呵。很高兴和大家见面，请多指教！。。。。咳咳，大家不要一副不屑的样子嘛。跟你讲，我可是很有用的。所谓人如其名，看我名字这么长，表意为“请求动画帧”，明摆着一副很屌的样子！。。。

1. “层叠”的概念　　CSS——层叠样式表，其中的“层叠”是什么意思呢？层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子： 　　       上图中有两个样式来源，第一个是引用的css1.css，第二个是自己在style中编写的样式。“层叠”是个叠加的过程，可通过下图表示： 　　             上面用一个简单

1. 引言　　从本节开始，就进入本系列的第二个部分——css和html的结合——说白了就是选择器。　　CSS中定义了样式，如何将这些样式设置到相应的html节点上？就不得不通过选择器。让浏览器知道css选择了哪一个dom节点，浏览器就会乖乖的把相应的样式渲染成视图。　　至于css能把页面渲染成什么样子，这是本系列的第三部分。　　第一部分讲css样式的加载和层叠，

目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。1、absolute（绝对定位）absol

relative（相对）以及absolute（绝对）。用absolute定位时，要把其上一级的元素样式属性position设置为relative。也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构    当A的position为relative时，B的pos

Chrome 浏览器有意改变的加载方式，当其出现在中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。一.目前CSS文件的加载方式head> link rel="stylesheet" href="/all-of-my-styles.css">head>body> …content…body>CSS 会阻碍渲染，因此在all-of-

CSS设置的样式是可以层叠的，如下面[代码1][代码1]style type="text/css"> span{font-size: 40px;} .test{color:red;}style>span class="test">CSS的低权重原则span>“CSS的低权重原则”既可以的到“font-size:40px”的样式，又可以得到“color： red

Normal flow到底啥意思啊？ 首先我们从名称入手，Normal flow直译为"常规流"，我们可以猜想它有以下几个特点：作为默认的定位模式;其他定位模式均以其为基础。 各位都知道与定位系统的CSS属性position:static|relative|absolute|fixed和float:none|left|right，其中position的默

横向居中是行内元素或者行内块级元素？(inline 或者 inline-block)你可以将行内元素居中在块级元素中，就像这样：.center-children { text-align: center;}代码链接这个方法对于display属性为inline, inline-block, inline-table, inline-flex等的元

1,  Arial微软公司的网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，你可以考虑用Tahoma字体来替代。（苹果系统没有这种字体，但有一种对应于Arial的字体叫Helvetica，它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好，说

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。1、正方形最终效果：  CSS代码如下：

按钮a,input,button都可以设置为按钮a标签按钮   a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式

获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。方法一：$(function() {     var elm = $('.nav');     var startPos = $(elm).offset().top;     $.event.add(wind

首先举个例子，iphone6s的像素分辨率为1334x750,326ppi,4.7英寸。如图下面我们一个一个来解释。像素密度A.定义326ppi代表的就是像素密度(pixels per inch),指的是每英寸的长度上排列的像素点数量。a.屏幕分辨率首先1334x750，代表的是屏幕分辨率，也就是说iPhone6s的屏幕是由纵向像素1334*横向像素

1、像素宽度分类在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768pxsm：small 窄屏幕，默认指浏览器像素宽度大于等于768pxmd：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992pxlg：large 大屏幕，默认值指浏览器像素宽度大于等于

css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。首先讲的是三列布局，左右两列宽度固定，中间一列宽度自适应这个很好实现，左右两列分别左浮动和右浮动并给一个固定宽度，中间不浮动，也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。看下代码结构：

前言盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑。本文尝试全面叙述块级、行级盒子模型的特性。作为近日学习的记录。何为盒子模型?盒子模型到底何方神圣居然可以作为CSS的基础？闻名不如见面，上图了喂!再来张切面图吧!下面我们以为栗子。标签被浏览器解析后会生成div元

先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位：px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下：① 什么是绝对长度单位？什么是相对长度单位？ ② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ ③ 什么是ppi、dpi、dp、dip

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界

盒模型接触过 CSS 的人应该都知道 CSS 的盒模型：由内容边缘（Content edge）包围形成的是内容盒（Content Box），类推还有内边距盒（Padding Box）、边框盒（Border Box）、外边距盒（Margin Box）。其中内容盒、内边距盒、边框盒的背景由background属性决定，而外边距盒的背景是透明的。CSS margi

之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合，得知很多同学都在使用下面的骨灰级解决办法：.clear{clear:both;height:0;overflow:hidden;}上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。

前面的话　　CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕 版本更迭　　flexbox布局的语法规范经过几年发生

首先，layout-flow:也是控制对象文本内容的流向（但是这个属性可以被writing-mode属性替换）在css中writing-mode和direction都是用来设置文本的展现方式的，两者有些共同点又有本质的区别。下面先介绍一下两者的用法：writing-mode语法： writing-mode : lr-tb | tb-rl  参数： l

什么是viewport，为什么需要viewportviewport：视口，视觉窗口，显示区域。在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏 览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设