6th week blog1(CSS单位)

①CSS单位

1.fr:Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.

可以使用任何长度单位定义轨道。Grid还引入了一个额外的长度单元来帮助我们创建灵活的网格轨道。新fr单元表示网格容器中可用空间的一小部分。下一个网格定义将创建三个相等宽度的轨道,根据可用空间增长和缩小。

2.px:One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.

一个像素。对于屏幕显示,它传统上代表一个设备像素(点)。但是,对于打印机高分辨率屏幕,一个CSS像素意味着多个设备像素。1px= 1/96 1in

3.em:Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

表示font-size元素的计算结果。如果在font-size属性本身上使用它,它表示元素的继承字体大小。

4.remRepresents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).

表示font-size根元素(通常<html>)。在根元素中使用时font-size,它表示其初始值(常见的浏览器默认值为16px,但用户定义的首选项可能会修改此值)。

原文地址:https://www.cnblogs.com/shengbowen1004/p/9785683.html

时间: 2024-11-08 15:00:44

6th week blog1(CSS单位)的相关文章

css单位中px和em,rem的区别

css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说是相当可以,大家对px的了解肯定是没有很大的问题的. em(相对长度单位) 使用:1.浏览器的默认字体都是16px,那么1em=16px,以此类推计算12px=0.75em,10px=0.625em,2em=32px: 2.这样使用很复杂,很难很好的与px进行对应,也导致书写.使用.视觉的复杂(0.

你可能没注意的CSS单位

原文:你可能没注意的CSS单位 扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那么 1em = 16px 这样使用换算很复杂,尤其是和px对应,大家总结出了经验 body { font-size: 62.5%; } 这样之后 1em = 10px 在布局等使用的时候好换算了很多 百分比 百分比也是很常见的用法,看似简单其实有些初学者可能注意不到的

css - (单位)

今天主要来整理整理css中一些我会用到的单位,及区别. 1. px 2.% 3.em 4.rem 5.vh 6.vw 今天主要就来讲讲这6种css 单位 1.px   => 它的大小是相对于浏览器屏幕分辨率来决定的: 2.%   => 它的大小是相对于它的父级元素来决定的: 3.em  => 它是相对于当前对象的大小来决定的: 4.rem  => 它是相对于根目录(html)下的单位来决定大小的: 5.vh  => 它是相对于整个屏幕的高度来决定的: 6.vw  =>

七个你可能不了解的CSS单位

我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它. 这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具. 今天,我将要向你介绍一些你以前可能不知道的CSS工具.这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧. rem 我们将

CSS:CSS 单位

ylbtech-CSS:CSS 单位 1.返回顶部 1. 尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如,如果某元素以 12pt 显示,那么 2em 是24pt. 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体. ex 一个 ex 是一个字体的 x-height. (x-height 通常是字体尺寸的一半.) pt 磅 (1 pt 等于 1/72 英寸) pc 12 点活字

CSS单位分析及CSS颜色表示法、颜色表(调色板)

CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相对单位. 我们需要了解到为什么要拓展em,rem这样的相对单位呢? 比如我就特爱用px,感觉所有的东西都能用px来表现距离,而事实上这种做法早已跟不上时代的步伐了,随着更高分辨率的显示器出现,则需要原本的多栏定宽布局,则需要更加灵活多变的响应式布局. em是最常见的相对长度单位,这是排版中使用的一种

CSS单位计算总结

CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 10px; font-weight: bolder; } .s { background-color: #ddd; margin: 10px; white-space: nowrap; color:

7个你可能不认识的CSS单位

众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员,我们别无选择,必须熟悉我们手上的工具,做到知己知彼,这样才能百战不殆. 这就意味着有那么些个特别的货,虽然平常都不怎么会用上,但是一旦某个地方需要它们了,他们就真的是特么得合适不过来了呢. 今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们.他们每个都是度量的单位,类似pixel 和 

css单位em、px、rem和pt的区别

1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM是相对于父元素来设计字体大小的.如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 优缺点:EM的值并不是固定的,它会继承父级元素的字体大小. EM和PX的之间的相互转换: 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.7