SuperCoooooder的博客

在最近的开发过程中，由于是关于文件上传的功能，需要两个Input框堆叠在一起，并有一个是透明的，然而就是一个opacity属性让我发现了元素的层叠顺序的问题，于是就动手试了一下，发现平民加了主角光环（opacity）就可以起到逆袭的作用：     首先为三个最普通不过的position为static的div以下称为小红小蓝小绿： .box{

相信混迹前端的各位大侠们都对verticle-align和line-height两个形影不离的好基友不陌生，他们解决了我们大部分的垂直居中问题，图片、文字等等牛的要上天的江湖侠士都拜倒在他们的基友剑法之下，不得不乖乖按规矩站好。无奈在下赵日天虽是对这两基友有一定自己的理解，但还是在今天在他们的剑法之下翻了船，欲知详情，且听日天一一分解。     人物介绍：    1.line-heig

我们知道，对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定，但是对宽度的计算就并非这样了，当没有显式得定义容器的高度时，其高度由其包裹的内容决定，当显示得定义高度时，容器的高度就为设定的值，使用overflow可以对超出高度的内容进行处理。         有时我们不明确高度，需要使用height:100%来设定高度时，有时并不能达到预期的效果，主要原因就是当我们使用h

其实我对于各个浏览器的兼容性知道的是少之又少，所了解的也不过是event||window.event , e.target||e.srcElement,element,nextSibling||nextElementSibing等等之类的日常需要用到的一些属性的兼容性写法，关于这些，如果有朋友不知道，我改日抽空会把自己封装出的一些小方法贴出来，并讲解一下，如果是大神就一笑而过就好了。    进

MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:

渐变可以创建类似于彩虹的效果，低版本的浏览器不的不使开发者用图片来实现，CSS3将会轻松实现网页渐变效果。要得线性渐变效果，我们这样去定义CSS3样式：background-image: -moz-linear-gradient(top, #8fa1ff,#3757fa); /* Firefox */background-image: -webkit-gradient(linear

transition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”一、transition语法：transition:[||||||||||||||]transition

我们都知道，行内元素不能设置height、width、padding/margin-top/bottom属性值，但是有一天在做一个响应鼠标的滚动导航条时发现，当我们给span、a这些行内元素设置float属性的时候，他们的高、宽都可以进行设置，经过查阅研究发现，当我们给行内元素设置position:absolute/fixed、float:left/right的时候，行内元素变成了块级元素，也就是

在做项目的时候使用到了Iframe，可是在实现点击iframe内的元素动态改变父窗口导航栏相应条目高亮active的时候发现在iframe内Jq不能选取父容器的元素，仔细一想，确实是不应该选取到的，毕竟两者不是同一个网页，于是乎就寻找度娘了，在这里总结一下解决的方法：       关于Jq在iframe内选取父窗口的元素：              要点就在于在普通的Jq选择器内容后面添加

在使用bootstrap并结合网页进行调试的时候，经常看见：before与:after这两个东西，而刚开始并没有在意，只是经常使用:hover :focus :visited :link :active这些比较常见的伪类，这些都顾名思义，表示了一个元素的某个状态，直到发现有些艺术的效果竟然是用:after :before来做出来的，随后才真正重视起来。       伪类主要有以下几种：

H5给我们提供了许多方便的属性以及更加语义化的标签，但是浏览器的兼容性还是一大问题，首先想要使用placeholder属性浏览器需要支持H5，而对于支持H5的浏览器来说显示效果也是有一定区别，当我们仅仅想要改变Input框内文字的颜色，使其能与placeholder的灰色区别开来，比如红色（input{    color:red;    }）时，chorme和safari都完成了我们预期的目标，而

在日常开发的过程中，一些小图标，例如小箭头，都是比较常用的，最近看到了一个用CSS绘制小箭头的方法，但是对其实现原理不是很清楚，于是就探究了一下：    先贴一下绘制箭头的代码：HTML: CSS: .arrow{ width: 0; height: 0;

CSS3新增了许多选择器如nth-child/last-child等，这让我们在写样式的时候可以更加灵活，而让我们广大前端程序员熟知的JQ的选择器也正是根据CSS选择器来做的。当然HML DOM也为我们拓展了querySelector与querySelectorAll来使用CSS选择器进行DOM操作，这实在比之前的getElementByXX方便了许多，然而或许之前的CSS选择器会让我们在使用CS