长度单位

3 月，跳不动了？>>> 先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位： px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下： ① 什么是绝对长度单位？什么是相对长度单位？ ② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ ③ 什么是ppi、dpi、dp、dip、sp、px？他们之间的关系是什么？ ④ 什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？ 1、什么是绝对长度单位？什么是相对长度单位？ 绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位，72pt的长度为1英寸。pc也是印刷上用的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。 2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 屏幕尺寸： 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率： 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。

1、font-size:大小 作用： 用于设置字号 p{ font-size:20px; } 单位 可以使用相对长度单位，也可以使用绝对长度单位 相对长度单位比较常用，推荐使用像素单位，绝对单位使用较少 相对长度 说明 em 相对于当前对象内文本的字体尺寸 px 像素，最常用，推荐使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 2、font-family：字体 作用： 设置字体 p{font-family:“微软雅黑”；} 网页中最常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑 可以同时指定多个字体，中间一逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直接找到合适的字体 p{font-family:Arial,“Microsoft Yahei”,“微软雅黑”；} 常用技巧： 各种字体之间必须使用英文状态下的逗号隔开 中文字体必须用英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前 如果字体名之前包含空格，#，$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:“Times New Roman”;. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示 3、font-weight:字体粗细

px 相对长度单位。像素（Pixel）。 像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 em 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 pt 绝对长度单位。点（Point）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc pc 绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。 1in = 2.54cm = 25.4 mm = 72pt = 6pc in 绝对长度单位。英寸（Inch）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc mm 绝对长度单位。毫米（Millimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc cm 绝对长度单位。厘米（Centimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 来源： https://www.cnblogs.com/wbpmrck/archive/2010/06/02/1749963

px 相对长度单位。像素（Pixel）。 像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 em 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 pt 绝对长度单位。点（Point）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc pc 绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。 1in = 2.54cm = 25.4 mm = 72pt = 6pc in 绝对长度单位。英寸（Inch）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc mm 绝对长度单位。毫米（Millimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc cm 绝对长度单位。厘米（Centimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 来源： https://www.cnblogs.com/ydx2020/archive/2010/06/06/1752789

在CSS中，度量单位分为两种: 相对单位: px /em/ex 绝对单位:cm/ pt /in/ pc /mm 这些单位的具体解释 px 相对长度单位。像素(Pixel)。 像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 em 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 pt 绝对长度单位。点(Point)。 1in = 2.54cm = 25.4 mm = 72 pt = 6 pc pc 绝对长度单位。派卡(Pica)。相当于我国新四号铅字的尺寸。 1in = 2.54cm = 25.4 mm = 72 pt = 6 pc in 绝对长度单位。英寸(Inch)。 1in = 2.54cm = 25.4 mm = 72 pt = 6 pc mm 绝对长度单位。毫米(Millimeter)。 1in = 2.54cm = 25.4 mm = 72 pt = 6 pc cm 绝对长度单位。厘米(Centimeter)。 1in = 2.54cm = 25.4 mm =

在CSS中，度量单位分为两种： 相对单位：px/em/ex/% 绝对单位：cm/pt/in/pc/mm 这些单位的具体解释 px 相对长度单位。像素（Pixel）。 像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 em 相对长度单位。相对于当前对象内文本的字体尺寸。 如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 pt 绝对长度单位。点（Point）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc pc 绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。 1in = 2.54cm = 25.4 mm = 72pt = 6pc in 绝对长度单位。英寸（Inch）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc mm 绝对长度单位。毫米（Millimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc cm 绝对长度单位。厘米（Centimeter）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc

CSS之长度单位 很多CSS属性要靠长度度量衡才能正确显示元素。因此，CSS中有许多长度单位。 CSS中的长度单位分为 绝对长度单位 和 相对长度单位 。 绝对长度单位 英寸(in) 1 英寸为2.54厘米 厘米(cm) 毫米(mm) 四分之一毫米（q) 像素(px) 主要有以上几种,我们通过程序实例来看看他们不同的效果。 < div id = "test" > < p > 计算机科学与技术专业隶属于工学院 < / p > < ul > < li > 舒徐 < / li > < li > 英语 < / li > < li > 计算机 < / li > < / ul > < / div > in #test { width:10in; height:200px; border:1in solid red; background:pink; font-size:1.5vw; } 1in = 2.54cm 2. cm #test { width:20cm; height:200px; border:2cm solid red; background:pink; font-size:1.5vw; } 3. mm 基本如上 4. q #test { width:1000q; height:200px; border:10q solid red; background:pink; font

Css01 一、CSS简介 a) Cascading Style Sheets 层叠样式表(级联样式表) b) 是一个文本文件，不需要编译 由浏览器直接执行 c) 作用是 定义网页外观 如 字体,背景，等。。。 d) 可以配合JavaScript做出绚丽的效果 二、CSS 特点 a) 精确的定位 准确的控制页面的任何元素 b) 精细的控制 可以做到像素级别的调整 c) 样式与内容分离 便于维护，便于重用 三、使用方法 内联 写在标签内的style属性中的叫做内联 例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p> 内嵌 写在head标签的style标签中的属性叫做内嵌 例如: <style> p{color:red;} </style> 外联 通过外部引入的方式使用 例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/> 四、基础语法 1.CSS 格式 选择器 负责圈定范围，要修改的元素集合 声明 由属性名和属性值组成，中间用冒号连接(属性名:属性值)，用于设定具体样式 CSS组成 由选择器和一个或多个声明组成，多个声明之间用分号 选择器{属性名:属性值;属性名:属性值;} 2.CSS 注释 Html 注释 <!-- --> 样式表里面的注释就一种 /* 这里面是注释内容 */

1：废话不多说，直接看如下图表： 2：px就不过多介绍了，就是像素点的大小，加入您的屏幕分辨率为1920，则每一个相当于每一个有横着的1920个像素点； 3：em 为相对单位，一般以 body 内的 font-size 为基准进行定义，默认值 1em = 16px，假如说我们想使用 “1em” = “10px” 来取代默认值 “1em” = “16px”，应写如下代码： body { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } ul{ 　　font-size: 125%; /* 基准变成了20px */ } li { 　　font-size: 1.4em; /*1.4 × ? = 14px ? */ } 但是问题来了，由于 “em” 是相对于父级元素讲的，所以加入 ul 不定义基准大小，则下面的 li 将级成原本的默认值 “1em” = “16px”，但是这样换算单位会很麻烦，但是每一个父级元素你都设置基准大小，平白地增加了无穷的代码编辑烦恼，这该怎么办呢？ 4：结合上面种种情况，rem 应运而生！！！在 W3C官网 上是这样描述 rem 的—— “font size of the root element” 。即当设置了 html{

1.背景介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。 2.知识剖析 1、px px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 兼容性： 2、em 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 兼容性： 3、rem css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。 兼容性： 4、% 一般宽泛的讲是相对于父元素，但是并不是十分准确。 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed