加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 电商 > 正文

CSS中的指定值、初始值和计算值学习教程

发布时间:2020-03-15 09:57:30 所属栏目:电商 来源:站长网
导读:副标题#e# CSS 中的声明,由 CSS 的特性和值,中间以 : 隔开组成。 我们可以使用 CSS 选择器,为选中的元素设置需要的样式。 在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然

如上代码中,DIV 元素设置 'left' 值为 "1em",计算后的值为 "16px";但是,'left' 特性并不适合于非定位元素。
1.长度值
长度值适用于水平或垂直方向的尺寸。
长度值表示为 <length>。长度值的格式是: <number> + 单位( e.g., px, em, etc.),注意,一定要有单位,除非这个值是0。 如果长度值是0,单位可有可无。
可用此类值的 CSS 特性很多,例如,'margin'、'padding'、'height' 和 'width'等。
有些特性支持负的长度值,比如 ‘margin’。但是如果给一个不支持负长度值的特性设置一个负的值,那么这个声明会被忽略。
长度的单位有两种:相对长度和绝对长度。下面对这两类单位详细介绍。
(1)相对长度
相对长度会随着它参考值的变化而变化,不是固定的值。
em : 与 'font-size' 的大小有关,与作用到元素上的 'font-size' 的值大小相等;
ex : 一个小写字母 x 的高度;
px : 像素数( pixels )。
例如:

XML/HTML Code复制内容到剪贴板

h1 { margin: 0.5 em }      /* em */   

h1 { margin: 1 ex }        /* ex */   

p  { font-size: 12 px }    /* px */  

(2)绝对长度
in : 英寸 — 等于2.54厘米
cm : 厘米
mm : 毫米
pt : 点 — CSS 2.1里 1pt 等于 1/72 英寸
pc : 皮卡 — 1pc 等于 12pt,也就是 1/6 英寸
例如:

XML/HTML Code复制内容到剪贴板

h1 { margin: 0.5in }      /* inches  */   

h2 { line-height: 3cm }   /* centimeters */   

h3 { word-spacing: 4mm }  /* millimeters */   

h4 { font-size: 12pt }    /* points */   

h4 { font-size: 1pc }     /* picas */  

2.百分比值
百分比值表示为 <percentage>。它的格式是:<number> + %。
常见可用百分比为值的 CSS 特性如:'height'、'width' 等。
百分比值总是跟其他的值有关,比如长度值。

使用值
在处理计算值的过程中,文档没有被格式化,因此,有些值是无法确定的。比如,百分比宽度的元素,最终宽度是与它包含块的宽度有关, 所以,值只有在包含块确定下来之后才能确定。
可以说,使用值是将计算值和有依赖关系的值最终转化成的绝对的值。
利用 JavaScript 来获取元素的使用值,可以采用如下函数:

JavaScript Code复制内容到剪贴板

function getStyle(obj, style) {   

      var _style = (style == "float") ? "styleFloat" : style;   

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读