css expression自适应,CSS中的行为——expression

IE5及后续版本支持在CSS中使用expression特性,该特性允许开发者将CSS属性与JavaScript脚本结合,实现动态调整样式的效果。例如,可以根据浏览器窗口大小动态调整元素的位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 是不是感觉上面的文字有点晦涩?没有关系,你只需要知道:我们可以通过expression把Javascript脚本写放在css文件中,通过它来实现一些很方便的功能与效果。

#myDiv {

position: absolute;

width: 100px;

height: 100px;

background:#c00;

left: expression(document.body.offsetWidth - 180 "px");

top: expression(document.body.offsetHeight - -80 "px");

text-align:center;

line-height:90px;

color:#fff;

}

ie浏览器css中的行为expression详解

CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...

去掉CSS中的表达式Expression

在IE中,CSS是可以嵌入js表达式的,可以在CSS类中定义,但是将含有表达CSS类从DOM对象中移除,样式表达式是不会失效的. 经过研究找到了答案,需要使用js调用style对象的removeExp ...

css中的expression

最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...

CSS中表示cellpadding和cellspacing的方法

本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍 ...

CSS中新属性calc()

CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

CSS中的偏僻知识点

一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...

优化网站设计(七):避免在CSS中使用表达式

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

CSS中@support的用法 及其calc、media用法

背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...

CSS(中)篇

1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...

随机推荐

什么是java 键值对

所谓键值对,你可以查看jdk文档,找MAP接口,它的实现类都是键值对的形式保存数据的 键:就是你存的值的编号值:就是你要存放的数据

剑指Offer20 栈的压入弹出序列是否正确

/************************************************************************* > File Name: 20_IsPopO ...

Filezilla中文字符文件看不到或显示乱码的解决办法

Filezilla确实是跨平台的好软件,可之前我就在ubuntu下郁闷为什么看坛子FTP里竟然是空的.最近换MAC版的FZ结果还是这样就奇怪了. 后来想Filezilla应该是支持字符集转换的,所以在 ...

web app开发中 iPhone、iPad默认按钮样式问题

webapp开发过程中,用html5+css3很方便,而且可以很方便的编译到Android ios等不同平台,但是ios需要单独处理一下,不然会出现一些想象不到的问题.下面就介绍一下各种问题的解决方法 ...

poj 1811 Pallor Rho +Miller Rabin

/* 题目:给出一个数 如果是prime 输出prime 否则输出他的最小质因子 Miller Rabin +Poller Rho 大素数判定+大数找质因子 后面这个算法嘛 基于Birthday Pa ...

数组名取地址所算数运算应注意的"trap"

数组名取地址所算数运算应注意的"trap" 直接看代码: #include int main() { int array[5]; printf(&q ...

『HTMl5』学习日志

w3g提供在线校验页面:http://validator.w3.org/ 1.文本框获取焦点

c专家编程摘录

C专家编程摘录 c操作符的优先级 有时一些c操作符有时并不会像你想象的那样工作. 下方表格将说明这个问题: 优先级问题 表达式 期望的情况 实际情况 . 优先级高于* *p.f (*p).f *(p. ...

PlateSpin备份服务器时SQL Server的一些活动信息

以前写过一篇文章IO is frozen on database xxx, No user action is required", 主要是介绍PlateSpin在服务器层面做DR备份时 ...

### CSS实现高度自适应布局的最佳实践 在现代Web开发中,通过CSS可以轻松实现高度的自适应布局。以下是几种常见的方法及其适用场景: #### 方法一:使用`flexbox`布局 Flexbox是一种强大的布局模式,能够使容器内的子项自动调整大小以填充可用空间。当父容器的高度发生变化时,子项会随之调整其尺寸。 ```css .container { display: flex; flex-direction: column; /* 垂直排列 */ } .item { flex-grow: 1; /* 子项按比例扩展以填满剩余空间 */ } ``` 这种方法适用于需要动态分配垂直空间的情况[^1]。 --- #### 方法二:利用`min-height`和`max-height` 对于某些特定需求,可以通过设置最小高度(`min-height`)和最大高度(`max-height`)来控制元素的高度范围。配合`overflow:auto`可以让内容超出部分滚动显示而不破坏整体布局。 ```css .element { min-height: 100px; /* 设置最小高度 */ max-height: 300px; /* 设置最大高度 */ overflow-y: auto; /* 超过最大高度时启用滚动条 */ } ``` 这种方式适合处理不确定内容量的情况下保持界面美观度。 --- #### 方法三:采用`grid`布局 Grid布局提供了更灵活的方式管理二维空间中的项目分布。它允许定义行高列宽的比例关系以及间距等参数,非常适合构建复杂的响应式设计。 ```css .grid-container { display: grid; grid-template-rows: auto 1fr auto; /* 定义三行结构,中间占主要区域 */ } ``` 此技术特别适配于多区块组合而成的应用页面或者仪表盘样式的设计方案[^1]。 --- #### 方法四:应用百分比单位(%) 如果希望某个块级元素依据父级元素改变自身的高度,则可以直接指定相对百分比作为该属性值的一部分计算逻辑之一种形式;但是需要注意的是只有在其直接祖先设置了具体数值(而非auto)的前提下才会生效。 ```css .parent { height: 50vh; /* 使用视口单位设定固定参照系下的尺度 */ } .child { height: 80%; /* 继承并缩放来自parent的实际测量结果 */ } ``` 这种技巧简单直观,在简单的嵌套层次下表现良好[^2]。 --- #### 注意事项 尽管存在多种途径达成目标效果,但在实际操作过程中还需考虑兼容性和性能影响等因素。例如避免滥用旧版特性如`expression`表达式,因其可能带来额外负担甚至安全隐患[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值