这篇文章主要介绍“CSS中的长度值有哪些”,在日常操作中,相信很多人在CSS中的长度值有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中的长度值有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司始终致力于在企业网站建设领域发展。秉承“创新、求实、诚信、拼搏”的企业精神,致力为企业提供全面的网络宣传与技术应用整体策划方案,为企业提供包括“网站建设、响应式网站建设、手机网站建设、微信网站建设、微信平台小程序开发、商城系统网站开发、平台网站建设秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
下面注意一个特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。如下代码:
html:
以这个例子为例。
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
3、百分比
p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。
到此,关于“CSS中的长度值有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网页标题:CSS中的长度值有哪些
网站网址:http://scgulin.cn/article/gecede.html