CSS取值与单位Values and Units(一)【CSS 长度(Length)】

最新推荐文章于 2023-11-29 14:54:45 发布
最新推荐文章于 2023-11-29 14:54:45 发布
阅读量549 收藏 2
点赞数
分类专栏： HTML5+CSS|CSS3

长度取值 Length Data Types

长度单位

长度取值版本描述
文本相对长度单位
emCSS1相对于当前对象内文本的字体尺寸
exCSS1相对于字符“x”的高度。通常为字体高度的一半
chCSS3数字“0”的宽度
remCSS3相对于根元素(即html元素)font-size计算值的倍数
视口相对长度单位
vwCSS3相对于视口的宽度。视口被均分为100单位的vw
vhCSS3相对于视口的高度。视口被均分为100单位的vh
vmaxCSS3相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
vminCSS3相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin
绝对长度单位
cmCSS1厘米
mmCSS1毫米
qCSS31/4毫米（quarter-millimeters）; 1q = 0.25mm
inCSS1英寸（inches）; 1in = 2.54cm
ptCSS1点（points）; 1pt = 1/72in
pcCSS1派卡（picas）; 1pc = 12pt
pxCSS1像素（pixels）; 1px = 1/96in

<length>

说明：
<number>接长度单位

  • 特殊值0可以省略单位。例如：margin:0px可以写成margin:0
  • 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
  • 长度单位包括包括：相对单位和绝对单位。
  • 相对长度单位包括有：em,ex,ch,rem,vw,vh,vmax,vmin
  • 绝对长度单位包括有：cm,mm,q,in,pt,pc,px

rem

相对长度单位，相对于根元素(即html元素)font-size计算值的倍数

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>

<style>
html,
h1 {
	font-size: 12px;
}
p {
	font-size: 2rem;
}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍：</h1>
<p>我是html定义的12px的2倍，字体大小为24px</p>
</body>
</html>

效果图：
在这里插入图片描述

px

相对长度单位，像素（Pixels）

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

示例代码：

div{font-size:12px;}
p{text-indent:24px;}

实例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>

<style>
h1{margin:10px 0;font-size:16px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:8px;background:#ccc;}
.in{width:1in;}
.pt{width:72pt;}
.pc{width:6pc;}
.px{width:96px;}
.cm{width:2.54cm;}
.mm{width:25.4mm;}
</style>
</head>
<body>
<h1>单位转换对比：</h1>
<ul>
	<li class="in">1in</li>
	<li class="pt">72pt</li>
	<li class="pc">6pc</li>
	<li class="px">96px</li>
	<li class="cm">2.54cm</li>
	<li class="mm">25.4mm</li>
</ul>
<p>1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px</p>
</body>
</html>

效果图：
在这里插入图片描述

风神.NET
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
聊一聊CSS中的长度单位的使用
12-11
CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此CSS也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和pica（pc）；有的是专门为CSS发明的单位，比如：px。 使用场景 那么这些属性和单位怎么配合使用呢？特定的属性需要使用特定的单位吗？其实并非如此，单位和属性无关，同一个属性任何单位都适用，何时使用何种单位是没有限制的，如果属性接受以px为单位的值（比如
css下的文本长度控制
玲玲的专栏
12-24 788
./*******强制换行 */ .break-all { word-break: break-all; word-wrap: break-word; }  什么情况下使用强制换行呢？我们要显示多行文本，文本可能出现一长串的数字或者英文，这个情况下，会出现不换行的现象，此种情况使用。 /*不换行，超出部分隐藏且以省略号形式出现*/ .ellipsis { overflow: hidden
CSS权威指南（四）值和长度
volit的博客
01-05 621
all表示除direction和unicode-bidi之外的所有属性都从父元素上继承。CSS3中定义了几个“全局”关键字，规范中的每个属性都能使用：inhert、initial和unset。数字值是是整数或者实数，实数是指整数后面跟着一个点号，再跟着一些整数。整数值由一到多个数组成，前面可以有+、-号表示正负。百分数值是在数字后面跟一个百分号%。（1）+和-两侧的值必须使用相同的单位类型。（3）/计算的两个值中右边那个必须是数字。（2）*计算的两个值必须有一个是数字。（4）任何情况下都不能除0。
CSS：calc() 函数 / 动态计算长度值 / 不同场景使用
最新发布
snowball的博客
11-29 5848
CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式，从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值，还可以使用括号来改变优先级。这个样式规则中，div 元素的宽度为整个父容器的宽度减去 20px。当浏览器窗口大小发生变化时，div 元素的宽度会自动重新计算，以适应新的窗口大小。这个样式规则中，div 元素的上下内边距为 10px 加上父容器宽度的 2%，左右内边距为 20px 减去父容器宽度的 5%。
CCS 使用小知识
学海无涯，回头是岸........
12-17 9551
1.include 路径添加 右键工程--build propertie--C2000 compile-- include options   2.堆栈大小更改 右键工程--build propertie--C2000 Linker-- Basic Options   3.支持FPU 右键工程--build propertie--C2000 compile -->RunTi
css 中动态获取宽度,css中的calc动态计算长度值
热门推荐
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
CSS的em、px、pt长度单位转换示例
01-19
在IE6.0字体设定为中的时候，如果字体未做任何CSS设定或者元素的设定，默认的字体是12pt，或者16px，或者1em，或者font size=3。em、px、pt的换算关系如下： 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=...
老生常谈CSS中的长度单位
01-21
本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们...
CSS 长度单位详细总结
单枪匹码
11-04 7682
一、CSS中的长度单位： 在CSS中以不少值是以长度作为值的，盒子模型的属性就是一些明显的值属性：width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值，像偏移量offset、box-shadow的大小或字体大小、间距等，在CSS中存在众多的长度单位，下面我们就来说一下长度单位以及它们的用途。 二、简单的介绍：（长度单位都有哪些：） 在...
css slice后的长度_长度(Length)
weixin_32752813的博客
02-23 151
[CSS3参考手册](http://css.doyoe.com/)»[单位列表](#)»长度单位相关内容：[**其它长度单位参考**选择其它项](#)# CSS Length Units- CSS长度单位### 长度单位 Length UnitsLength Units长度单位CSS Version版本Description简介文本相对长度单位 Font-relative Length Unit...
用CSS来控制字符长度和显示长度
tzbo0811的专栏
04-09 922
<br />在网页排版设计中，会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法，与程序员的直接字符截取的方式有些区别，其优势是可以自动控制文本显示的长度；缺点是不同浏览器的兼容性并不完美。<br />使用overflow，text-overflow，white-space这三个主要的属性，其他的代码属于修饰作用。<br />CSS代码：<style> .texthidden{ width:20
css动态计算元素的高度及宽度
MarryLinDa的博客
04-07 6382
原文：https://www.cnblogs.com/zhang1f/p/12574774.html 1、px 　　像素，我们在网页布局中一般都是用px。 2、百分比 　　百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了 3、Viewport 当已知一个div的高度时，它的同胞div高度是根据窗口高度减去已知div高度而得到，此时就需要calc函数 　　viewport：可视窗口，也就是浏览器。 　　vw Viewport宽度， 1vw 等于viewport宽度的1% 　　vh
获取元素的宽度，高度
jerny2017的博客
05-07 7293
1. style.width 适合行内样式&lt;div style="width:100px;"&gt;&lt;/div&gt;2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法3. elem.clientWidth 可视宽度 padding+元素宽度，对于行内元素，元素的宽度获取不了，此属性也不起作用    获取网页的高度：...
css中的尺寸和单位
weixin_33834628的博客
01-21 226
前言 本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn <length>类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, margin, font-size,text-shadow等属性, css的lengt...
CSS中相对长度单位
张波的技术积累
01-08 4251
相对长度单位是网页中常用的长度单位，其中包括em、ex和ps    em：定义文字时font-size属性定义的值的单位，例如，在font-size属性中，定义文字大小为12pt，那么此时1em就是12pt的长度。    ex：定义文字时字母x的高度，因为不同的字体中x的高度是不同的，所以单位ex的实际大小也不同。    px(像素)：将显示器分成非常细小的方格，那么每个方格就是一个px，p
css中相对长度单位_看看CSS中的长度单位
culi3118的博客
08-14 1182
css中相对长度单位Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself. 衡量事物与Web设计一样重要。 CSS中至少有10个不同的...
RN style使用以及常用样式总结
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
04-16 8987
React-Native 编写的应用的样式不是靠css来实现的，而是依赖javascript来为你的应用来添加样式1、声明样式导入必要文件import React, { StyleSheet } from "react-native";const styles = StyleSheet.create({ base: { width: 38, height: ...
React Native 单位详细说明
HAPP NEW JAVA
12-01 5035
之前在 ReactNative笔记（二） 中总结了一点， RN长宽单位默认对应DP：所谓与密度无关就是密度变化不引起物理尺寸的变化，这一点DP与RN官方说的一致. 现在想想，也就是说1DP在物理尺寸上不管屏幕的分辨率怎么变化，它的物理尺寸是固定不变的是核心 脑海里想象我的电脑是一个手机屏幕，我把分辨率调高了，也就是屏幕密度变大了，物理尺寸没有变，那么一个像素代表的物理
div+css 横向滚动公告，公告只有一条 自适应公告长度
06-02
要实现只有一条并且自适应长度的横向滚动公告，可以使用CSS3的flex布局和animation动画。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值