`

CSS各种长度

    博客分类:
  • CSS
css 
阅读更多

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:
<p>以这个<span>例子</span>为例。</p>
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)。

分享到:
评论

相关推荐

    CSS3漂亮的圆角自适应长度按钮特效.rar

    在CSS文件中,我们会看到上述提及的各种CSS3属性和规则的实现。 总的来说,这个特效涉及到的知识点包括:CSS3的`border-radius`属性实现圆角效果、Flexbox布局模型实现自适应宽度、其他CSS3属性如阴影和渐变增强...

    css控制td内容长度

    table中的内容经常超过了我们固定的td长度,这个css控制td的内容,如果超过了td长度则自动隐藏超过长度的字符,显示... 鼠标移过时,显示完整的td信息。

    html+css实现的PK进度条.根据双主的数据生成相应长度的红色蓝色条

    通过`width`属性控制条纹的长度。 2. **颜色和样式**:利用`background-color`定义条纹的颜色,可以是纯色或渐变。`border-radius`用于圆角处理,增加视觉效果。 3. **动态更新**:如果数据是实时变化的,可以使用...

    前端开源库-postcss-css-variables

    变量可以是任何有效的CSS值,包括颜色、尺寸、长度等。它们通过`--`前缀定义,例如`--primary-color`,并可以通过`var()`函数来引用。这使得全局样式的一致性和维护性大大增强,因为只需要更改一处变量,就能影响到...

    【 border虚线】CSS border虚线边框属性教程

    学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。

    css+js背景自适应文本长度的精美导航条

    "css+js背景自适应文本长度的精美导航条"是一个利用CSS(层叠样式表)和JavaScript技术实现的动态导航条设计,具有背景自适应文本长度、滑动效果以及偏金属色调的质感特点。下面我们将详细探讨这些知识点。 首先,...

    css+div布局和css教程和css的api

    5. CSS长度单位、颜色值和字体单位:了解各种单位的用途,以便精确控制样式。 通过阅读《DIV+CSS布局大全.pdf》和解压后的《css2.0api.rar》文件,你可以获得更深入的理论知识和实际案例。而《css教程》则提供了...

    精通CSS精通CSS

    3. 属性与值:CSS提供众多属性来控制元素的样式,如`color`、`font-size`、`background-color`等,值可以是颜色、长度单位、百分比等。 二、CSS盒模型 盒模型是理解CSS布局的关键,包括内容(content)、内边距...

    jquery+css 各种不同样式的登录页面

    本资源包含使用jQuery和CSS创建的各种不同样式的登录页面,旨在帮助开发者实现更具吸引力和功能性的登录界面。jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作,动画效果和事件处理;而CSS则...

    css文件代码css文件代码css文件代码

    CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制着网页的布局和视觉样式,包括字体、颜色、大小、位置以及元素间的相互作用。CSS文件是CSS...

    CSS新世界1

    作者简单介绍了几个常见的数据类型,如长度单位、颜色、百分比等,帮助读者理解CSS属性值的定义语法。同时,书中还讨论了CSS全局关键字,如`inherit`、`initial`、`unset`和`revert`,这些关键字在处理继承和重置...

    CSS3 动画卡顿性能优化的完美解决方案

    在处理CSS3动画时,开发者常常会遇到动画卡顿的问题,这对用户体验会产生极大的负面影响。浏览器虽然是单线程运行的,但它包含了两个重要的执行线程:主线程和合成线程。这两个线程负责渲染网页的大部分工作。 主线...

    CSS在线编辑

    CSS,全称Cascading Style Sheets,是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS描述了如何在媒体(如屏幕、打印机)上展示元素。通过使用CSS,我们可以控制网页的布局,...

    css2.0手册 css2.0手册

    在版面布局方面,CSS2.0引入了长度单位,如像素(px)、百分比(%)、em和ex等,以及对页面边距、填充和边框的控制。表格样式也得到了增强,可以独立控制各部分的边框和间距。 CSS2.0还包含了媒体查询(media ...

    HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……

    HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……

    《CSS权威指南》(附CSS参考手册)

    2. **函数和单位**:解释CSS中的各种函数,如calc()和var(),以及长度、百分比、颜色等单位的用法。 3. **浏览器兼容性**:提供各个CSS特性的浏览器支持情况,帮助开发者了解哪些功能可以在哪些浏览器上安全使用。 ...

    CSS 2.0 中文手册.zip

    CSS 2.0 提供了多种长度单位,如像素(px)、百分比(%)、em、rem等。相对单位允许元素尺寸随其父元素或字体大小变化,而绝对单位则固定在特定的物理尺寸。 ### 6. 浮动与清除 - **浮动**: `float` 属性允许元素...

    纯js+css写的柱状图

    在网页开发中,数据可视化是一种重要的技术,用于将复杂的数据以图形的方式呈现出来,便于用户理解和分析。...通过深入研究和改进这个组件,开发者可以提升自己的技术能力,并且能够灵活地应用于各种网页项目中。

Global site tag (gtag.js) - Google Analytics