随笔分类 - CSS
CSS
摘要：1. css相对长度单位Ø em 元素的字体高度Ø ex 字体x的高度Ø px 像素PixelsØ % 百分比Percentage2. css绝对长度单位Ø in 英寸Inches（1英寸=2.54厘米）Ø cm 厘米CentimetersØ mm 毫米millimetreØ pt 点Points（1点=1/72英寸）...
阅读全文
摘要：给父容器设定一个宽度值，用子容器去均分父容器的宽度值，这种做法在我们的日常工作中也是经常用到的，如一行显示固定几个图片或者内容，但每个子元素的宽度值是相同的。如：[代码][代码]显示效果：UL的宽度是：，每个LI的宽度是：每个LI得到的宽度是一样的，父容器的宽度被子元素得以均分。但如果父容器的宽度是一个奇数值呢？[代码]在IE下得到效果是：，4个LI没有像预料中的那样显示在同一行，最后一个被挤到下...
阅读全文
摘要：浏览器先对dom定位，然后解析自身属性，然后再解析内部对象,所以在书写CSS的时候要注意一下顺序。推荐的顺序是这样的：[代码]
阅读全文
摘要：1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。 This causes the blank white screen problem. The page is totally blankuntil the stylesh...
阅读全文
摘要：在 W3C 中对于 link 元素 和 style 元素 出现的位置有详细的说明: HTML permits any number of STYLE elements in the HEAD section of a document. The LINK element defines a link. Unlike A, it may only appear in the HEAD sectio...
阅读全文
摘要：难点在于两点： 垂直居中； 图片是个置换元素，有些特殊的特性。 下面是一个权衡的相对结构干净，CSS简单的解决方法： Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->.box { /*非IE的主流浏览器识别的垂直...
阅读全文
摘要：Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中，还需要 借助于!important标记。Firefox支持!important标记，而IE6忽略!important标记，因此可以使用! important标记区别Fi...
阅读全文
摘要：1. window.event * IE：有window.event对象 * FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 2. 鼠标当前坐标 * IE：event.x和event.y。 * FF：event.pageX和event.pageY。 * 通用：两者都有event.cli...
阅读全文
摘要：首先我们说说firefox和IE对CSS的宽度显示有什么不同： 其实CSS ’width’ 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer ’width’则是指整个容器的宽度，包括内容，padding ，border。 Firefox中：容器占的宽度=内容宽度+padding宽度+border宽...
阅读全文
摘要：1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和...
阅读全文
摘要：一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE7对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有...
阅读全文
摘要：一、white-space可以实现HTML中PRE标签的效果，以及单元格的noWrap效果，点此查看示例。语法：white-space : normal | pre | nowrap 取值：normal： 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre：换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compl...
阅读全文
摘要：CSS有些年头了。网页设计中，不可缺少，统一web各元素的利器。也是DOM的产物。script 和 style 一个动，一个静，修饰web的document，让整个web更加生动。让可编程性、可交互性成为可能。 废话不讲，以前知道的CSS无非就是几个字体啊、颜色什么的修饰。一般人也都仅仅用到这些。微软对其疯狂扩展，让整个DOM文档的任何部分都可以修饰，IE5以后，基本Mozilla与其不兼容，所以...
阅读全文
