随笔分类 - css相关
摘要：这个问题是在组件css加载方案中碰到的 场景： 元素的样式我们可以写在style里面，也可以写到外链css里面，如果没有设置，也会读取浏览器默认的css的，现在我们要计算getComputedstyle某个元素的最终所使用的css样式 区别： 1）style 是行内样式的写法，如果style 内有值的话，就会读取出来，如果没有，那么就为空，可读可写 2）getComputedstyle 是读取元素的最终所使用的css的值，只读的 解决方案： 在ie和非ie下是不一样的处理办法的。 在ie下： 通过element.currentStyle 可以获得当前元素的样式 非ie...
阅读全文
摘要：我们在项目中一直都是使用JS来控制如果文字内容超过的时候，用...来表示，其实是可以通过CSS来控制的，下面提供几种办法测试的浏览器：ie6，ie7，ie8，chrome17 ，firefox101）css方法 text-overflow-fag{ width:500px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; }该方法在ie6,7,8 chrome17,firefox10 下均测试通过2）网上别人提供的一个负margin定位的方法，我觉得比较好。 ...
阅读全文
摘要：首先看看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，那样相反不仅代码难看，而且也无疑的增加了代码
阅读全文
摘要：上代码：<!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
阅读全文
摘要：刚才在研究浮动的问题的时候发现，图片被包含的时候下面总有一个空隙。分析一下，先上图：代码：<!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引擎评估每一个规则是从右到左
阅读全文
摘要：本文是翻译 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
阅读全文