实现最小宽度的几种方法及CSS Expression[转]

实现最小宽度的几种方法及CSS Expression[转]

实现最小宽度的几种方法:css表达式尽量不用

支持FF IE7  IE6

.test

{

background:blue;

min-width:300px;

width:auto !important;

width:300px;

float:left;

width:expression(document.body.clientWidth <= 300? "300px": "auto" );

}

支持FF IE7

.test

{

background:blue;

min-width:300px;

width:auto !important;

width:300px;

float:left;

}

支持FF  IE7  IE6

.test

{

width:expression(document.body.clientWidth <= 300? "300px": "auto" );

min-width:300px;

}

CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码:

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression,实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。不要让您的用户感觉打开你的页面,机器会变的很慢。

时间: 2024-08-02 13:13:36

实现最小宽度的几种方法及CSS Expression[转]的相关文章

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况.而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本.但是在这里笔者要讲解的是使用CSS完成fixed效果. 千言万语不及实例一个: 以上是笔者在IETester下测试IE6的fixed,注意看滚动条.其中导航采用的是po

两种方法实现CSS垂直居中

利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法 方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器的高度也为500px,同样可以实现垂直居中,但是用它来实现垂直居中,也是有缺点的,就是如果内容过多,文字就会跑到下一行,那么内容就不可能垂直居中了. HTML代码: <h1>

逐帧动画 两种实现方式 css和js

第一种: css部分: <style> #foxtail{ background: url(../img/foxtail.png) 0 0 no-repeat; width: 156px; height: 156px; } @keyframes playfox{ 0%{background-position: -6864px 0;} 100%{background-position: 0 0;} } @-webkit-keyframes playfox{ 0%{background-posit

三种方法的优先级

有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使用嵌入式CSS来设置文字为红色. 3.最后又使用外部式设置文字为蓝色(style.css文件中设置). 但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色.因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式 但是嵌入式>外部式有一个前提:嵌入式css样式

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

CSS中清楚浮动的几种方法

清除浮动的几种方法 2017-02-16  19:03:17 当某元素的子元素设置浮动时,该元素就会产生塌陷,无法自适应高度.这种情况的出现严重影响了网页排版,因此我们必须要清除浮动来避免浮动溢出,父元素塌陷的发生.以下有几种清除浮动的方法: 方法和描述 代码示范 优弊 一.浮动后在结尾加一个空的标签(如:<div>.<p>等),设置属性clear:both; 这样可以让父级元素自动获得高度 <!-----HTML代码----> <div> <div

网页设计制作CSS实现隔行换色两种方法

网页设计制作CSS实现隔行换色两种方法 2007-12-21 20:59:44  来源:网页教学网 网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type="text/css">UL.myul1 LI{}</style><ul class="myul1"><li id="li1">111</li><li id="li2"

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic

CSS垂直居中6种方法

转自http://blog.csdn.net/wolinxuebin/article/details/7615098 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可. Line-Height Method 试用:单行文本垂直居中,demo 代码: html 1