浅析CSS 属性之中经常出现的百分比

   2015-11-07 0
核心提示:CSS 的属性值中经常会出现百分比,搞清它们的基数是一件很重要的事情,下面通过示例为大家介绍下
CSS 的属性值中经常会出现百分比,搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准,在此整理下:

百分比单位

乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含块的高度 top, bottom, height, max-height, min-height

关于包含块(containing block)的概念,不能简单地理解成是父元素。如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素,它的包含块是视口(viewport)。具体可以参考 W3Help。

乘以元素的字体大小 line-height

乘以元素的行高 vertical-align

背景定位中的百分比 background-position 分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的(50%, 50%)这一点与框的(50%, 50%)处对齐,相当于设置了 center center。同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom。

字体大小中的百分比 font-size 中的百分比值应该乘以元素所继承到的字体大小,也就是父元素的字体大小。

其他字体单位 既然说到了字体大小,顺便八一八其他的字体单位吧,有些可能平时并不会用,但是了解一下也没有坏处。有两个相对单位是:

em——相当于当前的字体高度,称作“全身方框”(em square)。如果在 font-size 上使用这个单位,应该乘以父元素的字体大小。用在 font-size 之外的属性上,则应该乘以元素自身的字体大小。 ex——相当于字体中的”x”的高度。 以下是绝对单位:

in——英寸(inch),相当于 2.54cm。 cm——厘米(centimeter)。 mm——毫米(millimeter)。 pt——磅(point)。1pt 相当于 1in 的 1/72。 pc——皮卡(pica)。1pc = 12pt。 px——像素(pixel unit)。1px = 0.75pt。

百分比的继承

如果某个元素设置了百分比的属性,则后代元素继承的是计算后的值。例如:

复制代码
代码如下:

p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%。
 
标签: CSS属性 百分比
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 转:css属性大全
    CSS 属性大全文字属性「字体族科」(font-family),设定时,需考虑浏览器中有无该字体。「字体大小」(font-size),注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数)「字体加粗」(font-weight),除了 normal(正常)、bold(
    03-08
  • css属性设置-显示与隐藏、盒子阴影、固定定位
    显示与隐藏!DOCTYPE htmlhtmlheadmeta charset="utf-8"title显示与隐藏/titlestylebody {margin: 0;}div {width: 200px;height: 200px;background-color: orange;font: 30px/200px 'Arial';color: red;text-align: center;margin: 0 auto;border-radius: 50%;
    03-08
  • 03-08
  • JS之路——JS获取CSS属性 css获取js变量吗
    1.获取内联样式  element.style.attr2.获取css内部样式!DOCTYPE htmlhtmlheadtitle/titlestyle type="text/css"div{width: 100px;height: 100px;background: red;}/style/headbodydiv /divscript type="text/javascript"function getStyle(element , attr)
    03-08
  • css简单学习属性 css属性代码大全
    css简单学习属性 css属性代码大全
      1:内联元素和块级元素1).块级元素,默认是独自占据一行的。比如是p、h1、h2、h3、h4、h5、h6、ul、ol、dl、pre、hr /2).内联元素,默认是几个内联元素都可以在同一行上显示。比如是a、span等。2:内联元素可以变成块级元素,块级元素可以变成内联元素。!DOCT
    03-08
  • css浮动、定位到底什么鬼? 浮动定位的两个关键
    css操作元素位置有以下几种方式:float、position、top等。 I float part1.浮动首先会先将元素在正常文档流中删除,父容器无法获取元素高度,但是该元素依然影响布局。2.任何元素被浮动后先生成一个块级框,然后为自己指定一个包含块。3.浮动元素与正常元素
    02-08
  • css3动画加停止 可设置动画暂停的css属性为
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titlec3播放暂停/titlestyle type="text/css".animation{width: 100px;height: 100px;margin: 50px auto;background: deeppink;animation: move 2s linear infinite alternate; }input{displa
    02-08
  • JS笔记一:动态修改css样式 js动态增加css属性
    ---恢复内容开始---最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解。一、通过Javasript修改图片大小通过函数来传递图片id,height,width,使用document.ElementByID来控制图片的大小,也就通过id 控制图片,之前有学过一句document.getEle
    02-08
  • Css继承属性和非继承属性 css属性有哪些
    一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、he
    02-08
  • 【CSS3】table的css属性 css中table
    【CSS3】table的css属性 css中table
    table的css属性border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。table-layout设置显示单元、行和列的算法。1.border-collapse:设
    02-08
点击排行