CSS

将ul+li 分两列显示(横向显示)的方法

有一个 ul>li 列表,默认为单列显示,把它变为两列显示可以使用DIV+CSS代码,也可以直接使用CSS控制,感兴趣的朋友可以参考了下哈,希望对你有所帮助
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。
方法1,使用DIV+CSS代码:

代码如下:

<style type="text/css">
.mycode{ width:300px; height:74px; float:left;}
.mycode ul{ width:280px;}
.mycode li{ width:100px; float:left; display:block;}
</style>
<div>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
</ul>
</div>

方法2,直接使用CSS控制

代码如下:

<style type="text/css">
.list{width:400px;overflow:hidden;zoom:1;border:1px solid #ccc}

如何保持网页图像的纵横比:aspect-ratio vs width & height 属性

默认情况下,an<img>占用零空间,直到浏览器加载足够的图像以知道其尺寸:

一只黑猫,看着镜头,在他的背上滚动
塞纳猫

运行演示时,您会<figcaption>立即看到。然后,几秒钟后,这一段和随后的页面内容向下移动,为图像腾出空间。这使得用户体验非常令人沮丧,因为内容从用户的眼睛/手指/指针下方移出。

十多年来,我们不得不使用愚蠢的技巧来手动应用纵横比,然后,典型的,两个更好的解决方案几乎同时出现。它们是 CSSaspect-ratiowidth&height表示性提示。

那么,您应该使用哪个?首先,让我们看看这些功能是如何工作的,因为那里有很多错误信息……

CSS 纵横比

如果你这样做:

.aspect-ratio-demo {
  aspect-ratio: 16 / 9;
}

......你得到这个:

16 / 9

该功能于 2021 年末登陆 Safari 15 …

延迟加载非关键 CSS

CSS 文件是渲染阻塞资源:它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的渲染时间。

在本指南中,您将了解如何以优化关键渲染路径和改善 First Contentful Paint (FCP) 为目标来延迟加载非关键 CSS。

以次优方式加载 CSS #

以下示例包含一个带有三个隐藏文本段落的可折叠项,每个文本段落都使用不同的类来设置样式:…

        

推迟 CSS 和 JavaScript 资源以提高页面加载速度的现代方法

为了提高页面加载速度,您可以通过仅调整页面的 HTML 代码来延迟 CSS 和 JavaScript 资源。

  1. 延迟 CSS
  2. 延迟媒体
  3. 延迟 JavaScript

CSS、字体和 JavaScript 等资源被视为渲染阻塞。这意味着浏览器在实际呈现页面内容之前需要时间来加载它们。

所以这些资源的文件越大,加载它们的时间就越长,用户看到页面内容的时间就越长。

要检查页面加载速度和渲染阻止资源,您可以直接在浏览器 (Chrome) 中使用Lighthouse工具。这是衡量 Web 性能的重要工具之一。

为了防止渲染阻塞资源减慢您的页面速度,您可以实施下面列出的小 HTML 更改来解决此问题。

延迟 CSS

处理 CSS 负载的正确方法是将样式拆分为关键 CSS 和非关键 CSS。

  • 关键- 这些样式是显示即时内容所必需的,一旦页面加载(首
        

video标签样式铺满全屏

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去图片白色底 让白色底图片在网页透明

一般产品列表页都是白底的产品图片,有时觉得白底的不好,想换成灰色或者其它淡色的底,是否需要重新处理图片,其实不用的,我们可以用css 的混合属性来让白底的图片成透明显示,这样我们在图片底下定义任意背景色,就相当于图片换了背景色,而不用在Photoshop里换背景。由于是css定义的,基本上也不会影响性能。

mix-blend-mode: multiply正底叠底

在photoshop里正底叠底是去掉白色的,同样在css里,我们通过对img进行正底叠底就可以去掉图片的白色底,这样图片就透明了。

所以有一些电商平台图片做成白底是有原因的,他们可能要在某处想实现图片背景改色。

rem、rm、px、vw之间的相互转换

一、vw px rem em到底是什么
1.vw/vh:就是相对视口宽度或者高度,100vw 等于整个屏幕宽度 100vh等于整个屏幕高度。1vw = 1% * 视口宽度。意思是一个视口就是100vw。长度和宽度等于窗口长度或宽度的1/100
例如:1920x800的设计稿
换算1/1001920=19.2 所以 1vw=19.2px; 即:1vw/y=100vw/1920px
换算1/100
800=8 所以 1vh=8px;

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 =

Chrome 104 中范围媒体查询的新语法

了解这种新语法如何简化媒体查询。

媒体查询支持响应式设计,大约 80% 的使用媒体查询的网站使用了能够测试视口最小和最大大小的范围功能。Media Queries Level 4 规范包括用于这些范围查询的新语法。

新语法自 Firefox 63 起已在 Firefox 中可用,并且将从 104 开始在 Chrome 中可用。让我们看看它如何简化您的查询。

针对最小视口宽度的典型媒体查询测试将编写如下:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or 
    

Css单位px,rem,em,vw,vh的区别

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的区别:…