网络直播|web前端入门教程(非常详细)( 三 )

它们之间的介绍以及区别：
1、px：像素，是网页内常用的单位，也是基本单位。常听到的电脑像素是 1024*768，表示的就是水平方向 1024 个像素点，垂直方向 768 个像素点。
2、rpx：是微信小程序解决自适应屏幕尺寸的尺寸单位，微信小程序规定的屏幕宽度为 750rpx。 rpx 单位可以根据屏幕进行自动适应。
3、em：默认字体大小的倍数。 1em 的值并不是固定的，需要根据父级元素字体大小确定。
场景1：字体设置 font-size:2em，字体大小继承父级元素的字体大小（默认大小是16px）的2倍。
场景2：元素的 width:2em，这里默认的字体大小是自身元素的字体大小，所以宽度是自身元素字体大小的 2 倍。
4、rem：是相对于根元素 html。这就意味着，我们只需要设置根元素字体大小，就可以把整个页面进行按比例调整。移动端适配这种方法挺常见的。
5、% ：百分比一般来说都是相对于父级元素的。
css 的新单位：
6、vw：view width 的简写。1vw 代表浏览器视口宽度的 1%。如：浏览器的宽度为 1200px，则 1vw = 12px 。
7、vh：view height 的简写。 1vh 代表浏览器视口高度的 1%。如浏览器高度 900px，则 1vh = 9px 。
8、vmin：相对单位，当前 vw 和 vh 中较小的一个值，其中较小的被分为 100 份。
9、vmax：当前 vw 和 vh 中较大的一个值。其中较大的值被分为 100 份。
如浏览器视口大小为：1200*900px，则 1vmax = 900/100 = 1px 。兼容性差，所以用的比较少。 vmin 同理。
cm、mm、in(英寸)、pt(点)、pc(派卡)这些单位在 CSS 中基本不怎么使用。
九、如何实现 0.5px 边框？
实现方法有 4 种，分别为：
9.1、利用缩小视觉上是 0.5px。
实现：给容器设置伪元素，设置绝对定位，宽高是 200%，边框为 1px，然后缩小元素为50% ，视觉上实现 0.5px。
特点：兼容性较好，能够使用圆角，推荐使用。
9.2、利用线性渐变实现。
实现：给容器设置伪元素，设置绝对定位，高度为 1px，添加背景为线性渐变，一半有颜色，一半没有颜色，视觉上只有 0.5px。
特点：适合设置一条边框，无法展示圆角。
9.3、用阴影实现。
实现：用阴影代替边框，设置阴影为：box-shadow: 0 0 0 0.5px #000。
特点：使用方便，也能够正常展示圆角，但是兼容性一般。
9.4、直接设置 box-width:0.5px。
特点：使用方便，但是兼容性差。
十、什么是响应式图像？
在响应式的流行下，很多 web 应用兼容手机平板电脑，其中最头疼的就是图片了，不同平台使用一张高清图，不但浪费流量，还影响加载速度，所以就有了响应式图像，根据分辨率、设备像素比、屏幕方向等来加载合适的图片，在保证图片清晰的情况下，让图片尽可能小。
解决方案：

媒体查询：该方案只适用于根据大小设置不同的背景图片，对于动态图片，如 banner 和产品图等，处理起来显的无能为力。
srcset：可以设置通过不同的 DPR 或者不同的屏幕分辨率，选择对应的或者大小最接近的图片。
sizes：告诉浏览器图片的实际显示尺寸，html 解析时浏览器能够自动算出需要请求的对应图片

十一、height 与 line-height 的区别
接下来我们就细细分析下它们之间的区别有哪些？

定义不同：line-height 设置每行文字所占的高度， height 元素自身的高度。就是你理解的行高和高度。
同为高度时，表示的意义不同。对于块级元素，设置 line-height 时，高度会被内容自动撑开，此时高度就是行高和几行内容共同决定的，即：height = line-height * 行数，而 height 设置的是一个固定值，与内容无关。
- 上一页
- 1
- 2
- 3
- 4
- 下一页