wuyou1336的博客

在手机网页中点击某一个链接或是文本框后通常会在上面出现一个蓝色的透明的框（不同手机颜色有差别）。在网页中可以使用一个css修改这个框的颜色。* { -webkit-tap-highlight-color:transparent;}

转载 http://www.w3cplus.com/css3/how-to-use-css3-calc-function.htmlcalc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，

转载 http://www.w3cplus.com/content/css3-multi-columns-span前面集中精力介绍了CSS3 Multi-columns中的column-width、column-count以及column-gap、column-rule。而其中Multi-columns中还有列的分栏符（break-before,break-after,break-

转载 http://www.w3cplus.com/css3-multi-columns-column-gap-and-column-rule上一节主要介绍了"Multi-column"中多列布局模块（CSS Multi-column Layout Module）的《CSS3 Multi-columns 之列数和列宽》,今天主要来和大家一起继续学习其中的第二部分：colum

转载 http://www.w3cplus.com/content/css3-multi-columns-count-and-width“Multi-column”译成中文就是“多列”，这个"Multi-column"是W3C给CSS3增加的一个多列布局模块（CSS Multi-column Layout Module）。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并

转载 http://www.w3cplus.com/css/creaet-equal-height-columns高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Ta

转载 http://www.w3cplus.com/content/css3-border-colorCSS3中有关于Border的属性一共有三个：圆角border-radius，图片边框border-image,边框多颜色border-color，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用border-radius来实现，具体的使用

转载http://www.w3cplus.com/content/css3-multiple-backgrounds前面几节和大家一起学习了CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。这样一来，CSS3中的Background功

转载  http://www.w3cplus.com/content/css-background-originBackground-origin是CSS3为Background扩展的第三个属性，从Background-origin字面上不难发现是指背景图片的原点，其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（back

转载 http://www.w3cplus.com/content/css3-background-clip上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一，今天和大家一起来学习CSS3中有关于Background的第二新属性Background-clip。CSS3中的Background-clip属性，其主要是用来确定

转载 http://www.w3cplus.com/content/css3-background-sizeBackground大家一定不会陌生，但是ＣＳＳ3开始，给这个Background属性增加了几个新的属性值 ：Background-size,Background-clip和Background-origin。那么从今天开始分几节内容分别来介绍一下background

转载 http://www.w3cplus.com/css/px-to-em使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。

转载 http://www.w3cplus.com/css3/basic-selectorsCSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。CSS是一种用于屏幕上渲染html，xml等一

转载 http://www.w3cplus.com/css3/attribute-selectors上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某

转载http://www.w3cplus.com/css3/pseudo-class-selector前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:foc

问题 在一次开发过程中，对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ，理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，元素属性并没有生效。原因 根据W3C的说法，如下The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their

一、什么是响应式图片？根据不同的屏幕分辨率，和设备像素比来尽可能选择高分辨率的图片。或者换个角度来说，当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽啦。1、同样是普通屏幕（相对与retain等高清屏幕而言）上，在手机屏幕上显示小图片，在电脑浏览器上显示大图片。 2、同样大小的屏幕上，普通设备上显示普清图片，高清屏幕（如 retain屏幕）的设备上显示高清

转载http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.htmlBFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。什么是BFC（Bloc

转载 http://www.w3cplus.com/css/ten-most-common-ie-bugs-and-how-to-fix-them-part-3有关于IE的Bug系列，我们前面一共介绍了四个部分：创建IE条件样式——《浏览器兼容之旅的第一站:如何创建条件样式》；浏览器各种Hack写法——《浏览器兼容之旅的第二站:各浏览器的Hack写法》；IE下十个经典B

转载 http://www.w3cplus.com/ten-most-common-ie-bugs-and-how-to-fix-them-part-2《浏览器兼容之旅的第三站:IE常见Bug——part1》中介绍了IE浏览器下十种经典的Bug产生的原因，以及如何在写代码中避免这些Bug的产生，或者说Bug发生后，又如何来解决这些Bug。这节我们接着来看IE下的相关Bug。尽量了解并掌

转载 http://www.w3cplus.com/css/ten-most-common-ie-bugs-and-how-to-fix-them-part-1Internet Explorer——前端攻城师的的恶梦，十个有九个前端人员都认为他为祸人间不浅，本应早点灭掉他，可是上天有好生之德，因而没有灭之，在此情况下，前端的攻程师们将就将就过吧。前面在《浏览器兼容之旅的第一站:如何创建

转载http://www.w3cplus.com/css/create-css-browers-hacks前面一节《浏览器兼容之旅的第一站:如何创建条件样式》和大家一起探讨了如何创建条件样式，了解和学习了创建IE条件样式的方法以及他们所起的作用，特别是知道了条件注释所起的作用。那么这一节将和大家一起学习：浏览器兼容之旅的第二站:各浏览器的Hack写法虽然和大家在一起学习

转载 http://www.w3cplus.com/create-an-ie-only-stylesheetIE对于大家来说一定很熟悉了，作为一名Web前端开发人员或者是说前端攻程师来说，浏览器的兼容问题一定处理过不少了，特别是IE6的兼容问题，如果你的用户是针对中国市场来说，IE6下的效果是必须得处理了，一个让人头痛而又不得不去面对的一件事情，特别是对于刚接触CSS的童子们，

转载 http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部，羡慕死人了，但自己就是做不出这样的效果。后来在google和baidu搜寻了一下，仔细思考，并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。我们先来看看效果图吧：

转载 http://www.w3cplus.com/css/css-specificity-things-you-should-know.html除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你

转载  http://www.w3cplus.com/css/css-selector-performance前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS基本选择器、CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣那就跟

转载 http://www.w3cplus.com/css/css-hr标签是html4用来制作水平线的。如果你在网页制作中使用了标签来制作水平分隔线，你知道在没有样式设置的情况下，他是很难看的。在各浏览器的显示常常是100%的宽度，2px的高度,3D边框风格渲染。默认情况是不太好看，或者也不符合你的网页风格，但是你给标签设置了样式，这样他看起来就不会那么难看，同时也更能适合你的页面风

转载 http://www.w3cplus.com/css/clear-float众所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说，假如你在写CODE时，其中div.A（这个就是说页面中有一个div，并且把其命名为class="A"）中包含了两个或多个子元素div.B,div.C

转载 http://www.w3cplus.com/css/vertically-center-content-with-css作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法

转载： http://www.w3cplus.com/content/css3-word-wrapCSS3中有关于文本效果的属性，前面在《CSS3 Text-shadow》和《CSS3 Text-overflow》介绍了文本阴影，文本注解的使用，今天主题是超长英文文本自动换行word-wrap的使用，在介绍这个属性的同时，我还把word-break和white-space两

目前 W3C 关于竖排文本的排版规范统一在「CSS Writing Modes Module Level 3」中。主要有以下几个属性：一、「writing-mode」设置文字的书写方向IE 在文字排版方面一直是先驱，早在 IE 5.5 就实现了私有属性「writing-mode」，后来被 W3C 在 CSS2 中采纳作为规范。在 Level 3 草案中「writing-mo

转载 http://www.w3cplus.com/content/css3-text-overflowCSS3中Text Effects属性一共有三个；text-shadow;text-overflow;word-wrap。其中text-shadow是CSS3中一个常用的属性，在《CSS3 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主要跟

转载 http://www.w3cplus.com/blog/52.htmltext-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出现过，但在cs

转载： http://www.w3cplus.com/css3/border-radius今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。当时，对于圆角的制作，我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置

转载：http://www.w3cplus.com/content/css3-rgba今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。语

转载 http://www.w3cplus.com/content/css3-gradientCSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gec

问题描述当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。可以使用下面的代码在 iOS 中进行测试。 iOS click bug test .container {

行内元素（又叫内联元素inline element）:①不占据一整行，随内容而定，有以下特点：②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。    常用的内联元素有：a - 锚点，b - 粗体(不推荐

复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般不能满足我们的需求，设计师喜欢一些漂亮的图片，用css做出此效果。 input#gps_open_close[type="checkbox"]{-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;background-

使用opacity不仅使目标元素的背景变得半透明，而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本、图片也一样都具有同样的透明度，这个效果肯定不是我想要的。解决办法：可以用 rgba()解决 : background: raba(x1, x2, x3, y); x1 x2 x3取值是0-255之间的整数，y取值是0-1之间（0，0.1，0.2，0.3，0.4，