展开

关键词

css常用单位

px pixel像素点,最常用单位 % percent百分比,经常用到 em element,1em等于元素字体尺寸 rem rem=root element,rem等于根元素字体尺寸 vw viewport width,可视区域宽度1% vh viewport height,可视区域高度1% vmin vw与vh较小那一个作为单位 vmax vw与vh较大那一个作为单位 较不常用单位 cm: centimetre厘米 mm:millimeter毫米 pt:points(12pt=16px) pc:picas(1pc=12pt) in:inch(1in=96px) ch:1ch="0"宽度 ex:1ex=当前字体x-height

24620

CSS常用单位

CSS常用单位 CSS长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位 绝对长度单位 px 像素 通常而言,一个CSS像素代表屏幕设备一个像素点,但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素,也就是说有多个屏幕像素点来表示1px,1px = 1in / 96。 ,但不同字体x高度可能不同,对于很多字体来说1ex ≈ 0.5em,所以很多浏览器在实际应用取em值一半作为ex值,ex单位在实际中常用于微调。

文字
ch ch与ex类似,这一单位代表元素所用字体0 vw: 相对于视窗宽度,1vw等于视窗宽度1%。 vmin: vw和vh较小值。 vmax: vw和vh较大值。

32720
  • 广告
    关闭

    老用户专属续费福利

    云服务器CVM、轻量应用服务器1.5折续费券等您来抽!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css单位

    前端开发, 做适配是少不了, 即页面在各种尺寸机型显示效果一样, 这就用到了css各种长度单位, 做一下总结 在css, 长度单位分为以下几种 绝对单位: px、in、cm、mm、pt、pc 百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位介绍 px 不用过多介绍, 精确像素 in 寸 cm 厘米 mm 毫米 pt 大约1/72寸 pc 大约 1/6寸 vw 以窗口宽度为参照, 1vw为窗口宽度1% vh 窗口高度为参照, 1vh为窗口高度1% vmin 窗口宽度和高度较小一个为参照,百分比 vmax 窗口宽度和高度较大一个为参照 , 百分比 % 以父节点为基准百分比 em 以父节点字体大小为基准值, 父节点字体大小为20px, 则1.5em为30px rem 以根节点字体大小为基准值, 及HTML标签字体大小 ex 当前字体 x高度为基准, 无法确定时为0.5em ch 以当前字体0字符为基准值, 无法确定时为0.5em

    31620

    CSS 各种单位

    之前遇到 css 需要使用单位情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式页面的时候,要重新补一下 css 单位技术债。 px px 是 css 中最常用字体大小单位。 px 就是表示 pixel,像素,是屏幕上显示数据最基本点;还有一个看起来很像单位 pt,pt 就是 point,是印刷行业常用单位,等于1/72英寸,一般在打印时候使用。 像素 px 是相对于显示器屏幕分辨率而言,所以一般把它看做一个基础单位,很多其它单位都是以 px 为参照。 百分比 css 百分比是一种相对值,使用百分比关键是找到它参照物。 属性 参照 width & height 宽和高在使用百分比值时,其参照一般都是父元素 content 宽和高。

    11120

    深度解析CSS单位以及区别

    css中有几个不同单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。 长度单位可分为两种类型:相对和绝对。 绝对长度 绝对长度单位是一个固定值,反应真实物理尺寸,不依赖于显示器、分辨率、操作系统等。 具体单位以及解释如下: px像素:一个像素就相当于我们屏幕一个小点,屏幕实际就是由很多个像素点构成,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。 vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度1% vh:vh(viewpoint height)视窗高度,1vh = 视窗高度1% vmin:vw和vh较小那个。 vmax:vw和vh较大那个。 一些设置css长度属性有width、height、margin、padding、font-size、border-width等。

    6220

    深度解析CSS单位以及区别

    css中有几个不同单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。 长度单位可分为两种类型:相对和绝对。 绝对长度 绝对长度单位是一个固定值,反应真实物理尺寸,不依赖于显示器、分辨率、操作系统等。 具体单位以及解释如下: px像素:一个像素就相当于我们屏幕一个小点,屏幕实际就是由很多个像素点构成,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。 vw:vw(viewpoint width)视窗宽度,1vw = 视窗宽度1% vh:vh(viewpoint height)视窗高度,1vh = 视窗高度1% vmin:vw和vh较小那个。 vmax:vw和vh较大那个。 一些设置css长度属性有width、height、margin、padding、font-size、border-width等。

    8910

    聊一聊CSS长度单位

    绝对单位 绝对单位(px,cm, mm,in,Q,pt和pc)意味着以此为单位长度值与其代表物理长度相等,比如width: 1cm即与现实世界1cm长度相等,也意味着绝对单位在所有的媒介上显示效果是一致 但这是理想情况,受显示器和不同浏览器CSS实现差异,在很多设备上绝对单位显示并不精确。 下面贴出绝对单位直接换算公式: 1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px px 作为CSS中最常用单位,关于px还是有必要多说两句。 因为这一特性,rem现在被更广泛应用于响应式设计。 ch ch用表较少,是CSS3新加入单位,表示当前字体 "0" (零、unicode 字符 U+0030) 宽度。 Viewport Based vw,wh,vmin,vmax 都是CSS3新加入单位。vw,vh可以根据视窗大小调整字体大小。vw是视窗1/100宽度,而vh是视窗1/100高度。

    35270

    CSS中常见长度单位

    1.CSS中常见长度单位 名称 英文全称 中文名 相对绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素 长度由屏幕大小和其分辨率决定 em equal-M-width =172in≈0.3527mm 磅一般为重量单位,但是在印刷行业可作为长度单位,用于描述字体大小 pc pica 派卡 1pc=12pt, 6pc=1in=2.54cm 印刷行业用于描述字体大小 注意 (2)CSS设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一致命缺点就是在IE下无法用浏览器字体缩放功能。2. CSS3新增度量单位(1)ch——字符0(零)宽度; (2)rem——根元素(html元素)em; (3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度1%; (4)vh ——viewpoint height,视窗高度,1vh等于视窗高度1%; (5)vmin——vw和vh较小那个。

    53220

    CSS可使用font-size长度单位

    CSS给开发者提供了许多种长度单位,用于各种不同CSS属性,如 margin, padding, line-height还有 font-size。为了满足不同需求,我们有了各种各样长度单位。 即使你可以给某一CSS属性赋予相同值,其背后计算逻辑也是不一样。不同情况下,适用长度单位是不同。 它们常用在自适应网站设计与根据不同页面宽度断点设置不同字体大小。 这个技巧在视窗单位基础排版一文中有具体解释。 其他绝对值单位 CSS也允许其他很多绝对值单位,这些单位在屏幕排版情况下使用较少,更多是用在传统打印介质。 有两种类型关键字:绝对和相对。绝对值关键字常用在指定字体大小,其值是根据不同用户浏览器计算出一个数据表里某项。

    95320

    css单位vw,vh在响应式设计应用

    考虑到未来响应式设计开发,如果你需要,浏览器高度也可以基于百分比值调整。 但使用基于百分比值并不总是相对于浏览器窗口大小定义最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入单位明确解决这一问题。 View Demo css3引入”vw”和”vh”基于宽度/高度相对于窗口大小,”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小 参照demo案例对照下面四个容器css样式: .demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%, 字体大小为窗口10% */ } . 目前这款css3应用支持所有主流浏览器,IE必须10以上。

    6710

    如何决定响应式网站 CSS 单位

    在我们创建适合各种设备响应式网站时,了解正确CSS 单位很重要。不过在深入研究决策之前,让我们先对它们进行分类以便了解它们用途。 如何决定响应式网站 CSS 单位? 如果未覆盖,默认字体大小为 16px,假设在父元素字体大小为 48px,那么在子元素为 1em == 48px。 概括总结 px单位常用于边框。 % 单位相对于相对父级宽度。 em 单位相对于元素字体大小边距和填充 。 rem 单位相对于根字体大小 。 vw 和 vh 表示相对于根宽度和高度。 这些是 6 个 css 单元,它们最常用于使网站具有响应性。 我已经写了很长一段时间技术博客,并且主要通过CSDN发表,这是我一篇 响应式网站 CSS 单位教程。我喜欢通过文章分享技术与快乐。

    16810

    分享:CSS长度单位:px和pt区别

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据最基本点;而pt就是point,是印刷行业常用单位,等于1/72英寸。 所以它是一个自然界标准长度单位,也称为“绝对长度”。 因此就有这样说法,在网页设计,pixel是相对大小,而point是绝对大小。 在网页设计,面向用户屏幕基本单位是px,因此使用px作为单位是最简单也最容易理解,而pt也不过是通过了Windows设置乘上了一个比率转变成px再显示,算是绕了个圈子。 参考大部分大型网站,包括Adobe和Microsoft,都是使用px作为单位,而且在HTML,默认单位就是px,是不是也暗示着px是网页设计“内定单位”? :即%,在CSS,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。

    52520

    常用CSS框架

    常用CSS框架 之前在写自己个人网站时候,由于自己Web前端不是特别好,于是就去找相关CSS框架来搭建页面了。 找到以下这么一篇文章(列出了很多常用CSS框架): http://w3schools.wang/report/top-UI-open-source-framework-summary.html Bootstrap Iview Layui Mui Frozenui AlloyUI W3.CSS 本篇主要是记录我用过CSS框架,并把之前写过笔记进行整合一下。 Mac OS X浏览器。 Mac OS X浏览器。

    60780

    常用 CSS 技巧

    下面这个简单 css3 代码片段可以给网页加上漂亮顶部阴影效果: body:before { content: ""; position: fixed; 注意:在IE11要小心flexbox。 逗号分隔列表 让html列表项看上去像一个真正,用逗号分隔列表: ul > li:not(:last-child)::after { content: ","; } 对最后一个列表项使用 :not 使用负 nth-child 选择项目 在CSS中使用负 nth-child 选择项目1到项目n。 对纯 CSS 滑块使用 max-height 使用 max-height 和溢出隐藏来实现只有CSS滑块: .slider ul { max-height: 0; overlow: hidden

    21500

    常用css样式

    圆角 -moz-border-radius: 6px; /* Mozilla浏览器私有属性 */ -webkit-border-radius: 6px; /* Webkit浏览器私有属性 */ border-radius

    16710

    kubernete原子调度单位:pod

    在前面的文章,我们介绍了容器技术,他本质是操作系统上一个进程,那么打包容器镜像其实就是一个安装包,类似于windows操作系统exe文件,那容器所在kubernete集群其实就是一个操作系统 调度在一个pod容器,一般具有某些关联关系,比如共享Linux namespace,共享volume,通过localhost进行通信。像Tomcat和它所依赖war包,就是这样一个例子。 namespace,这样pod容器共享一份namespace,就可以通过localhost进行通信了。 同时我们也看到war包所在容器类型是initContainer,这个镜像特点是会比spec.containers容器先启动。 上面这个配置所使用设计模式,叫做sidecar,也就是在pod启动一个辅助容器来配合主容器进程工作,上面的war容器就是一个sidecar。

    19220

    Android单位(dp、sp、dpi)

    概述 因为不同屏幕具有不同像素密度,因此同样数量像素在不同设备上可能对应于不同物理尺寸。因此要使用 dp和 sp单位。 dp:是一种密度无关像素,对应于160dpi下像素物理尺寸。 sp:是相同基本单位,但它会按用户首选文本尺寸进行缩放(属于缩放无关像素),因此在定义文本尺寸时应使用此计量单位(但切勿为布局尺寸使用此单位)。 px 像素,屏幕上显示数据最基本点。 dpi dpi(Dots Per Inch):每英寸点数,也称像素密度,即屏幕对角线像素值÷英寸值。 ? 例:720x1280分辨率5.7英寸手机: ? dp dp:在每英寸160点显示屏上,1dp = 1px,即px = dp(dpi / 160) sp sp(Scaled Pixels):通常用于指定字体大小,当用户修改手机显示字体时,字体大小会随之改变 单位转换 public class SizeUtil { public static int dp2px(Context context, float dpValue) { float

    1K10

    CSS 长度单位 px,em,rem,vw,vh,%,vm 区别

    CSS 各种长度单位区别 CSS 单位 px,em,rem,vw,vh,%,vm 区别 px px 就是 pixel 缩写,意为像素。 在网页设计,px 是最常用基本单位,它是相对于显示器屏幕分辨率而言。 em em 是相对长度单位。参考物是父元素 font-size,具有继承特点。 rem 简介 rem 是 CSS3 新增一个相对单位,rem 是相对于根元素 html 字体大小(font-size)来计算长度单位。 Chrome 浏览器 12px 坑 我们开发常用 Chrome 浏览器,支持最小字体大小是 12px,此时使用 62.5% 会令 Chrome 和其他浏览器页面效果不一样。 vw、vh 简介 vw、vh、vmax、vmin 这四个都是 CSS3 单位,是一种视窗单位,也是相对单位,它们大小都是由视窗大小来决定单位 1,代表类似于 1% 。

    34300

    扫码关注腾讯云开发者

    领取腾讯云代金券