CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
长度单位
在 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)单位。
一般来说,CSS 中设置的一个像素长度对应屏幕上一个像素点。但不绝对,手机屏幕的像素点与 CSS 中设置的像素就不是一一对应。
更深入地理解像素
我们的显示器设备都有一个像素分辨率,但我们设置的像素并不会一对一地显示到屏幕上,而是先经过 逻辑像素
→ 渲染像素
→ 物理像素
的转换。
一般在电脑显示上, 逻辑像素
等同于 渲染像素
,而 渲染像素
等于我们设置的屏幕分辨率。当我们的设置的屏幕分辨率等同于设备 物理像素
时, 我们设置的像素将会刚好一对一地显示到屏幕上。
$$tip
在初期只需有个简单理解就行,在日后的学习过程中再慢慢深入理解。
$$
对于像素与分辨率有以下几个常常接触的概念:
- 物理像素(physical pixel):屏幕上真实物理像素点数量,比如我们在网上购买显示器时,参数标明的像素值。
- 渲染像素(render pixel):系统等设置的分辨率,对于 PC 来说,渲染像素就是显示设置中的分辨率。
- 逻辑像素(device point / device pixel / point ):是为了调和距离不一样导致的差异,将所有设备根据距离,透视缩放到一个相等水平的观看距离之后得到的尺寸,是一个抽象的概念。 我们设置 px 这个像素值时,对应的就是逻辑像素。对于电脑来说,逻辑像素一般等于渲染像素,而手机上逻辑像素通常远小于渲染像素。这使得我们的元素在手机上不至于显示得太小。
- ppi(Pixels Per Inch):每英寸所拥有的像素数,这个数值越高代表每英寸内的像素数越多,屏幕也越精细。
- dpr(Device Pixel Ratio):设备像素比 = 物理像素宽 / 逻辑像素宽 = 物理像素高 / 逻辑像素高。
$$tip
在 <head>
中包含以下代码,像素尺寸将会对应到逻辑像素上。需要适配手机端的网站都需要包含这段代码。
有关这段代码的详细解释,请看: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
$$
以下例子是将一个
<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>
以下有一个例子,页面上的元素都以 rem
作为单位。因此可以通过调整 html
根元素的字体大小,来缩放整个页面的大小。
最常用的场景就是,通过 JavaScript
检测用户设备是电脑、还是平板或手机,然后调整html
根元素的字体大小,达到最佳的显示效果。
<div class="controls">
<button onclick="scaleUp()">放大页面</button>
<button onclick="scaleDown()">缩小页面</button>
</div>
<h1>三眼牛牛</h1>
<div class="name">三眼鸭的编程教室</div>
<div class="box"></div>
<style>
.controls {
font-size: 16px;
}
.name {
width: max-content;
padding: 1rem;
background-color: pink;
}
.box {
width: 5rem;
height: 2rem;
margin: 1rem 0;
background-color: teal;
}
</style>
<script>
var fontSize = 16
function scaleUp() {
fontSize *= 1.2
document.documentElement.style.fontSize = fontSize + "px"
}
function scaleDown() {
fontSize /= 1.2
document.documentElement.style.fontSize = fontSize + "px"
}
</script>
$$demo <div class="controls"> <button onclick="scaleUp()">放大页面</button> <button onclick="scaleDown()">缩小页面</button> </div> <h1>三眼牛牛</h1> <div class="name">三眼鸭的编程教室</div> <div class="box"></div> <style> .controls { font-size: 16px; } .name { width: max-content;
padding: 1rem;
background-color: pink;
}
.box {
width: 5rem;
height: 2rem;
margin: 1rem 0;
background-color: teal;
}
</style> <script> var fontSize = 16 function scaleUp() { fontSize *= 1.2 document.documentElement.style.fontSize = fontSize + "px" }
function scaleDown() {
fontSize /= 1.2
document.documentElement.style.fontSize = fontSize + "px"
}
</script>
$$
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/