1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

长度单位

在 CSS 中的长度单位被分成两种,绝对长度单位与相对长度单位。绝对长度单位是固定的长度,不以任何参考物为参考。而相对长度单位会相对某一个参照物来决定自身的长度。

绝对长度单位

绝对长度单位表:

单位 名称 等价换算
cm 厘米 1cm = 96px/2.54
mm 毫米 1mm = 1/10th of 1cm
Q 四分之一毫米 1Q = 1/40th of 1cm
in 英寸 1in = 2.54cm = 96px
pc 十二点活字 1pc = 1/16th of 1in
pt 1pt = 1/72th of 1in
px 像素 1px = 1/96th of 1in

像素

我们最常使用的绝对长度单位是像素,因此这里仅仅介绍一下像素(px)单位。我们的显示器设备都有一个像素分辨率,但我们设置的像素并不会一对一地显示到屏幕上,而是先经过 逻辑像素渲染像素物理像素 的转换。

一般在电脑显示上, 逻辑像素 等同于 渲染像素 ,而 渲染像素 等于我们设置的屏幕分辨率。当我们的设置的屏幕分辨率等同于设备 物理像素 时, 我们设置的像素将会刚好一对一地显示到屏幕上。

$$tip

在初期只需有个简单理解就行,在日后的学习过程中再慢慢深入理解。

$$

image

对于像素与分辨率有以下几个常常接触的概念:

  • 物理像素(physical pixel):屏幕上真实物理像素点数量,比如我们在网上购买显示器时,参数标明的像素值。
  • 渲染像素(render pixel):系统等设置的分辨率,对于 PC 来说,渲染像素就是显示设置中的分辨率。
  • 逻辑像素(device point / device pixel / point ):是为了调和距离不一样导致的差异,将所有设备根据距离,透视缩放到一个相等水平的观看距离之后得到的尺寸,是一个抽象的概念。 我们设置 px 这个像素值时,对应的就是逻辑像素。
  • ppi(Pixels Per Inch):每英寸所拥有的像素数,这个数值越高代表每英寸内的像素数越多,屏幕也越精细。
  • dpr(Device Pixel Ratio):设备像素比 = 物理像素宽 / 逻辑像素宽 = 物理像素高 / 逻辑像素高。

以下例子是将一个 <div> 宽设置为 200px,高设置为 100px,背景色设置为 pink。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/XWzELRV?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

相对长度单位

相对长度单位表:

单位 相对于
em 在 font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
ex 字符“x”的高度
ch 数字“0”的宽度
rem 根元素的字体大小
lh 元素的line-height
vw 视窗宽度的1%
vh 视窗高度的1%
vmin 视窗较小尺寸的1%
vmax 视图大尺寸的1%
% 相对父元素的百分比

百分比

百分比可以使得我们针对父元素来设置长度,下例中把第二个 <div> 的宽高分别设置成了父元素宽高的 50%。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/mdqxZYJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

em

设置 em 用于字体大小时, 1em 等于父元素的字体大小,如果用于其他属性时 1em 等于自身的字体大小。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/ZEaxdgo?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

rem

1rem 等于根元素的字体大小,一般默认值是 16px

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/qBVYzZp?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

vw

1vw (view width)等于视窗宽度的 1%。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/YzELopO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

vh

1vh (view height)等于视窗高度的 1%。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/PoOermv?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

该用什么单位?

场景 单位
大部分情况 px
响应式布局 px、rem、em、%
自适应布局 rem、em、%、vw、vh
  • 响应式布局:页面元素在不同的设备或分辨率下内容位置不会发生大的变化,仅是内容大小发生改变,多见于一些手机的活动页面等对页面设计要求不高的场景。参考案例:http://m.ctrip.com/html5/
  • 自适应式布局:页面元素在不同的设备或分辨率下内容版块、页面风格会发生较大的变化,通常用于对不同设备大小的设计有较高要求的场景。参考案例:https://www.jianshu.com/