记录－交流－Web开发知识分享
默认情况下，an<img>占用零空间，直到浏览器加载足够的图像以知道其尺寸：
运行演示时，您会<figcaption>立即看到。然后，几秒钟后，这一段和随后的页面内容向下移动，为图像腾出空间。这使得用户体验非常令人沮丧，因为内容从用户的眼睛/手指/指针下方移出。
十多年来，我们不得不使用愚蠢的技巧来手动应用纵横比，然后，典型的，两个更好的解决方案几乎同时出现。它们是 CSSaspect-ratio和width&height表示性提示。
那么，您应该使用哪个？首先，让我们看看这些功能是如何工作的，因为那里有很多错误信息……
如果你这样做：
.aspect-ratio-demo {
aspect-ratio: 16 / 9;
}......你得到这个：
该功能于 2021 年末登陆 Safari 15 …
CSS 文件是渲染阻塞资源：它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的渲染时间。
在本指南中，您将了解如何以优化关键渲染路径和改善 First Contentful Paint (FCP) 为目标来延迟加载非关键 CSS。
以下示例包含一个带有三个隐藏文本段落的可折叠项，每个文本段落都使用不同的类来设置样式：…
为了提高页面加载速度，您可以通过仅调整页面的 HTML 代码来延迟 CSS 和 JavaScript 资源。
CSS、字体和 JavaScript 等资源被视为渲染阻塞。这意味着浏览器在实际呈现页面内容之前需要时间来加载它们。
所以这些资源的文件越大，加载它们的时间就越长，用户看到页面内容的时间就越长。
要检查页面加载速度和渲染阻止资源，您可以直接在浏览器 (Chrome) 中使用Lighthouse工具。这是衡量 Web 性能的重要工具之一。
为了防止渲染阻塞资源减慢您的页面速度，您可以实施下面列出的小 HTML 更改来解决此问题。
处理 CSS 负载的正确方法是将样式拆分为关键 CSS 和非关键 CSS。
video标签是不会自动铺满整个div的，即便是给它设置了高度为100%；所以当需要video标签铺满整个div时，可以给video标签加上‘object-fit:fill’样式，这样就可以解决了！
<div class="videoContent">
<video class="videoElement" controls preload="auto" width="100%" height="100%"></video>
</div>
.videoContent{
background-color: rgb(40, 46, 83);
width: 600px;
height: 420px;
}
.videoElement{
object-fit: fill;
}
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
…
一般产品列表页都是白底的产品图片，有时觉得白底的不好，想换成灰色或者其它淡色的底，是否需要重新处理图片，其实不用的，我们可以用css 的混合属性来让白底的图片成透明显示，这样我们在图片底下定义任意背景色，就相当于图片换了背景色，而不用在Photoshop里换背景。由于是css定义的，基本上也不会影响性能。
在photoshop里正底叠底是去掉白色的，同样在css里，我们通过对img进行正底叠底就可以去掉图片的白色底，这样图片就透明了。
所以有一些电商平台图片做成白底是有原因的，他们可能要在某处想实现图片背景改色。
…
2.px:px是屏幕设备物理上能显示出的最小的一点。是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，css中的1px并不等于设备的1px。比如iphone3，分辨率是320 x 480。iphone4变成了640 x 960，但是iphone4的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。
3.rem:相对于html根元素的字体大小（font-size）来计算的长度单位，可以设置，默认16px
4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级尺寸，也是相对单位。
二、vw px rem之间的换算
1.我们假设psd的设计稿是以1920px为标准的。那么：
100vw = 1920px => 1vw =
px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小
rem
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
/*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：…
Ordinary input of type file in webpages comes with a default style and the caption, choose file. The good news is that we can style and tweak it to what …
小编给大家分享一下CSS如何实现div宽度根据内容自适应 ，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在实际应用中，可能有这样的需求，那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应，其实这是错误的，因为在默认状态下，div的宽度值是百分之百，也就是会占满整个父元素宽度。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.yisu.com/" />
<title>亿速云</title>
<style type="text/css"…
近期评论