随笔分类 -  Web 前端-CSS

摘要：语法：@media screen and (min-width: 320px) and (max-width : 479px)media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外，就是高像素比的终端，比如 iphone4以上的retina屏，一个ipho 阅读全文

摘要：我们在开发中我们常会在IE中遇到很多莫名的bug，尤其是老态龙钟的IE6浏览器。为了提高我们的开发效率，需要经常总结，整理工作中遇到的问题。我们在网络上找到的IE Bugs 资料是零散的。不过，在老外的http://haslayout.net/css/网站上,他就系统的总结了IE的一些Bugs，分享一下。目前，这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”，所有的这些Bug有58个指南和70个解决方法。这个列表目前更新到：2009年8月19日，周三 ，15时38分47秒。最新发表的教程：该网站包含44 I 阅读全文

摘要：自动换行div{word-wrap:break-word;word-break:normal;}强迫不换行div{white-space:nowrap;}带有浮动效果的　不换行<divid="pic"><ul><li><imgsrc="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg"/></li><li><imgsrc="http://192.168.1.103/hibeans/web/imag 阅读全文

摘要：z-index最大值:IE FireFox Safari的z-index最大值是2147483647 。Opera的最大值是2147483584.。IE Safari Opera在超过其最大值时按最大值处理。FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层最小值IE FireFox Safari的z-index最小值是-2147483648Opera的z-index最小值-2147483584FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定 阅读全文

摘要：两点细节：1、checkbox和文字的中线重合2、点文字可对checkbox发生作用 动态分页 描述文字默认 描述文字14px字体 描述文字12px字体 两点启示：1、代码有些冗余，但是能保证其稳定性2、组合可以减少代码量，应用灵活，但是在规范不健全的情况下保证自己的代码健壮，不污染别人的代码尤为重要简易处理：.con-label-checkbox { font-size: 12px; }.label-checkbox { vertical-align: middle; font-family: tahoma... 阅读全文

摘要：CSS hack：针对IE6，IE7，firefox显示不同效果做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。区别不同浏览器的CSS hack写法：区别IE6与FF： background:orange;*background:blue;区别IE6与IE7： background:green !important;background:blue;区别IE7与FF： background:orange; *background:green;区别FF，IE7，IE6： background:orange;*background:green !important;*back 阅读全文

摘要：前几篇博客写了一些关于IE6的事情，原本IE6不支持大多数属性选择器，但是我们有了对付他的办法就可以放心的使用属性选择器在我们的样式表中了，那就一起研究一下吧：a[href] 选择所用含有href属性的a标签a[href='http://w3.org/'] 选择所有含有链接“http://w3.org/”的a标签，注意上面的匹配是严格对比，区分大小写div[class~='panel'] 选择所有被指定class包含panel的div标签，如果不加~就成为了上一条规则，class="panel weather"的div是不被选择的，结合以空格 阅读全文

摘要：.class:hover div{} 鼠标移上外层元素，内层元素改变样式_behavior: url(../resources/js/lib/csshover.htc); 解决IE6不支持非a标签的hover伪类border-left-color: 还有这样不常见的属性定义.selected,:hover{} 配合js实现鼠标移上和点击选中表现相同效果，而又互不干扰background:url() center center; 背景设置一张宽一点的图，再加上padding实现自适应选中背景切换选择器权重计算A，B，C，DA:内敛样式B：idC：classD：标签注：!importent比A权重 阅读全文

摘要：神器一、csshover.htc解决IE6不支持非a标签的hover伪类。引入方式：在样式表中引入例： body { _behavior: url(csshover.htc); } 应用： class="out" 用CSS控制页面特效 .out{ width:200px; height:200px; border:1px so... 阅读全文

摘要：关于这两种格式，以及png-8与png-24的理论知识在网上很多，我来点实战的，经过验证的。作为网页元素的背景图（可能是精灵图片）的兼容性如下面两张图：IE6非IE6（以火狐为例）做几点总结：1、gif支持动画，png不支持2、用ps和firework生成png图片是有区别的，在大小和质量上都是，fw更好一些3、fw生成的png-24不透明（哪位可以生成透明的请指教方法）4、对图片“右击/属性/详细信息/位深度”，24位和32位png图片的位深度都是325、png-32无毛边，fw生成的png-8无毛边6、ps产生的png-24，png--8有毛边7、IE6下png-8和gif透明，png-2 阅读全文

摘要：上篇是CSS盒模型，在盒模型的基础上说明一下position定位：position的四个属性值： 1、static 2、relative 3、absolute 4、fixed下面分别讲述这四个属性。1、staticposition的默认属性，在这方面个浏览器解析与渲染是一致的，top，left，bottom，right不产生作用2、relative相对定位，重点是“相对的对象”--想对谁？答案是它本身的位置。也就将relative改为static，再在视觉上加上top，left，bottom，right值，就是relative所呈现的视觉效果。可以这样理解，如果不设置relative时... 阅读全文

摘要：CSS的核心就是和模型，很多复杂的布局及浏览器兼容性解决方案都可以回归到盒模型。对于浏览器的兼容问题令很多前端开发人员叫苦不迭，解决方案也是多种多样。用{*rule !important}css规则去解决浏览器兼容问题越来越多的出现在样式表中，但是我不推荐这种解决方案，最起码在初始布局阶段不建议这么做（在调整n年前的页面时可能迫不得已采用这种方式）。我更倾向于写统一的样式表，也就是所有浏览器公用一套样式。这样做有几个优点：1、代码结构清晰2、便于js操作3、开发成本低4、客户端加载快先上一张图：为以后做准备我们在这里创建一个模型，包括一个坐标背景（每格10px），和一个简单和模型。 阅读全文