04 2011 档案
摘要：工作中常常碰到很多的表单提交，表单对齐的问题，下面来总结下我碰到的问题。也欢迎大家补充。1）表单对齐问题 曾今做了这么个表单，当时关于这个表单对齐的问题上可是花费了一些时间，即使是设置vertical-align：middle，也没有对齐。后来是通过添加margin-top：-2px来解决这个问题的。这个其实和字体的设置是有很大关系的，我们的字体是font:12px/1.5 arial,宋体; 首选的是arial字体，所以必须是通过添加margin-top：-2px来解决（我是用的12px字体），其实只要把字体换成tahoma字体的话，然后再设置vertical-align：middle。就可
阅读全文
摘要：首先看看w3c的解释： 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。理解这句话的深刻含义，可以看出有一个包含，包裹的意思。它的值可能为值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。ie不支持inherit特性，包
阅读全文
摘要：首先看2个问题： 1）line-height和font-size 有联系吗，什么联系？ 2）line-height的继承特性有什么特殊性？如果你对这2个问题很清楚的话，你可以跳过本文。首先看看w3c的解释：line-height 属性设置行间的距离（行高，行间距）。 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是
阅读全文
摘要：网上有很多这样的信息，很多的图表对各个浏览器进行比较，关于特性的支持，其实有些不全面，本文就日常常见的一些css选择器进行一个总结（本文在标准模式下）。1）关于:active,:link,:hover,:visited伪类在css1的规范中，这四个伪类仅作用在a 标签上。在后来的所有浏览器中都是支持a标签的这个属性。所以为了鼠标特效能够支持各种浏览器，a标签是一个首选的标签，利用display：block或者display：inline-block可以使a标签具有很多的特性。我经常用它来做按钮，来实现3态，效果很好，不过在表单中就不推荐来做按钮了。 ：link 和:visited 从表面上来看
阅读全文
摘要：写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。 官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的） ，ie6，ie7 是不支持这个属性的。ie6,7 如何支持这个属性呢？ 对于块级元素，直接让块级元素成行内元素， 然后再触发layout。 {display：inlin
阅读全文
摘要：首先看看w3c中是怎么描述的。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。默认值是baseline。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置元素的垂直对齐方式。 很重要的一点就是它是针对行内元素起作用的，如果不是行内元素或者没有设置成display:inline或者display：inline-block的元素就可能出现各种各样的问题，有的生效了，有的却没有生效。这里我举例来说明一下。 代码如下所示：1<!DOCTYPEHTML>2<html&g
阅读全文
摘要：用CSS开发也很久了。早就打算对我使用的CSS做一个总结，在接下来的一段时间我打算逐个解析下CSS的一些用法。下面是目录：1）vertical-align在不同浏览器的表现2）display:inline-block在在浏览器中的应用3）line-height 在浏览器中的应用以及最佳实践4）overflow：hidden在各个浏览器中的应用5）水平居中&&垂直居中的一些想法6）表单问题总结与最佳实践7）html&& body 标签与滚动条研究
阅读全文
摘要：上周末翻译了molliza 和google关于高效CSS 的写法的文章，觉得他们的说法有一些共同之处，就是CSS解析引擎是从右到左开始解析的，我们要做的就是减少CSS引擎的解析时间，所以避免一些低效的CSS 选择器去匹配大量元素能够减少页面加载的时间。结合我自己编写CSS的经验，我总结如下：1) CSS 的层级选择器不要超过3个，保持3个以内 bad case： .class1 ul li a{} good case .class a{}2) 尽量少使用标签选择器，但是也是可以使用的，比如写列表（ul li语法）的时候，如果给每个li一个class，那样相反不仅代码难看，而且也无疑的增加了代码
阅读全文
摘要：style 也是标签（在非ie内核的浏览器中支持），直接上图我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。附上我研究的代码：[代码]23/html参考文章：http://css-tricks.com/show-an...
阅读全文
摘要：这篇文章是翻译http://haslayout.net/haslayout这篇英文的。写的挺好的。介绍这篇文章是一个总结haslayout的文章。更新：haslayout在ie8的标准模式下已经被废弃了，但是在ie7的兼容版本以及以下的版本是仍然存在的。什么是haslayout？MSIE有一个很早很早，过时的渲染引擎Mosaic . 在表格布局的时代。几乎是所有的元素（除了内联内容）都是一个盒子。内容几乎不可能超过表格的单元格。表格的单元格不可能超出表格。很多年过去了。微软开始采用Tridentengine来使用CSS，但是，CSS改变了最初的这个古老引擎的假设（最重要的一点就是任何元素都会包
阅读全文
摘要：上代码：<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"> .mod-test1{ font:20px/1.5; color:red; } .mod-test1.bg{ background:#dfdfdf; display:inline-block; padding:5px 10px
阅读全文
摘要：ie6下是不支持position：fixed的，这是ie6下的一个bug，ie7+ firefox，chrome都支持固定定位的。怎么解决这个问题呢？有两种方案：1）针对ie6写hack，其他的浏览器仍然用position：fixed属性。使用position：fixed 很简单，这里就不再叙述了。下面介绍下怎么解决ie6下的问题。使用position：absolute 绝对定位来解决。构造一个滚动条，这个滚动条是包含该文档的内容滚动条（它可以是body的，也可以是某个div的）。很明显position：absolute是绝对定位的。他脱离了整个文档流，他不相对该滚动条包含的文档，而应该是滚动
阅读全文
摘要：上篇我写了我对浮动的认识（一），里面主要说了float的初衷和浮动带来的一些实际本质的问题。聪明的css开发者利用css的占位特性进行布局，的确起到了一些很好的效果，但是也会带来一些实际的问题。比如浮动后没有高度，高度为0.这个现象 ，请广大的css开发者留意。不然可能出现一些很莫名奇妙的问题。如何解决这个问题呢？亦即清除浮动有2种方式：1）使用伪对象（不用增加新的标签），代码如下：.clearfix:after{content:".";display:block;height:0;clear:both,visibility:hidden}.clearfix{ zoom:1
阅读全文
摘要：直接写的代码，在各个浏览器测试总结的结果。如果有什么不全面，请各位大侠指正。结果在代码：<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">h4{margin:5px;padding:0px;border-bottom:1pxsolid#000;}</style><title>微
阅读全文
摘要：刚才在研究浮动的问题的时候发现，图片被包含的时候下面总有一个空隙。分析一下，先上图：代码：<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"> .item {border: 2px solid #dfdfdf} .item img {padding:2px; border:1px sol
阅读全文
摘要：浮动布局是我之前用的比较多的一种布局，在用的过程中我也碰到了很多很诡异的问题，今天有空我花了些时间研究了下浮动布局，发现以前对浮动的理解有些不对，特来记录下。欢迎大家拍砖。浮动在历史上最初是做什么的？ 在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。代码：<!DOCTYPE HTML><html ><head> &l
阅读全文
摘要：前阶段做了一个简洁版博客，里面涉及到了闪光字（类似qq空间，百度空间里面的那样闪光字），处理的时候出现了一些问题，记录下。分析里面的原理，其实还是很深刻的。在标准模式下<!DOCTYPE HTML><html ><head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title></title></head><body><DIV style="O
阅读全文
摘要：以下文章是 翻译 google高效css写法文章地址：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors使用高效的css样式总体 避免一些低效的key selectors去匹配大量的元素能够加速页面的展现 。细节 当浏览器解析html的时候，它构造了一个文档树来展现所有被显示的元素。它在特定的样式表中去匹配元素，根据标准的css的层叠，继承和顺序规则，在mozilla的实现中（可能其他的也是这样），对于每一个元素，css引擎通过规则去寻找匹配，css引擎评估每一个规则是从右到左
阅读全文
摘要：这2天整理了下web前端开发工具，如下图结合平时的开发习惯，总结的。工具是提高工作效率的，其实用什么都无所谓。用一两个熟悉的就可以。
阅读全文
摘要：本文是翻译 https://developer.mozilla.org/en/Writing_Efficient_CSS目录：1.样式系统选择器的分类 样式系统将规则断开为下面4中基本种类 （1）id选择器 （2）class选择器（类别） （3）标签选择器（tag） （4）全局选择器理解这些规则是很重要的，因为他们是选择器匹配的基本单元组成部分。在下面中我讲使用key selector，key selector是选择器的最后的那个部分（它匹配自己，而不是匹配着祖先元素）比如在下面的规则中： a img, div > p, h1+ [title] {…}key selector分别是img
阅读全文
摘要：select 是列表型元素中的一个很重要的代表。总结下他的一些书写注意事项。1.关于innerHTML ，在ie下不支持innerHTML的形式添加option选项，firefox，chrome是支持的。2.添加option，使用 ele.options.add(option),但是这里的option 可以是new Option(text,value)的形式构造的，也可以是通过原生的函数document.createElement函数创建的。此外add的方式不会覆盖以前的。option不能是html的形式。3.选定特定的一个option的方式 ele.value = option.value;
阅读全文
摘要：环境： ie6 （window sp3） ie7,8,9 firefox3.6， chrome10，opera10.62 （window7）本文先列举出几种常见的字体的显示问题以及优点，然后再列举几个web字体的最佳实践，一一作一分析。1） Tahoma&&Arial字体比较（1）字体下划线问题：Tahoma在ie6下的li元素里面显示很好，其他的所有浏览器中，下划线都会粘连中文文字，英文问题没有粘连；但是Arial字体除了ie6，firefox3.6，其他浏览器都是下划线粘贴着文字。（2）13px中文问题：ie6 和firefox3.6 显示很难看，用的是14号字体，其他浏览
阅读全文
摘要：在css开始设计的时候，多想想那些可以是继承的，可以节省很多的代码，维护也方便。1） 所有的text 相关属性都被继承：如 font-family font-size; font-style;font-weight;font;font-variant;letter-spacing.line-height;text-align text-indent; text-transfrom word-spa...
阅读全文
摘要：css的优先级2010-10-21 15:591）id > class>标签，他们之前的权重大约是4：2：12）指定的比继承的级别要高3）具体的级别要高4）内部的样式高于外部嵌入的样式5）important级别最高。在写css的时候，先总体的考虑一下，设计一下。那些可以复用，可以节省很多的时间，同时代码也优美，在此记录一下。
阅读全文
摘要：总结下平时自己css 书写的思考过程。记录下1）观察页面结构，划分小模块，2）在结构上找相同相似的（那些是相同的，那些是可以合并的），3）对相似的结构进行抽取（对页面进行规划），4）对css进行规划（粒度划分，利用继承），5）布局页面（先主要的后次要的，有利于SEO检索）6）调试浏览器的兼容性。先ff，然后ie（最后ie6，ie下使用zoom:1,position:relative,）7）优化css（合并使用相同的css样式，margin,border等等，css sprites）
阅读全文