最开始用的是Easy-scroll插件，可是在使用过程中，发现一个问题——由于在开发过程中，需要经常打开开发者选项进行调试，可是只要一开启这个选项，Easy-scroll插件就会出现debugger断点...-- 引入css，该链接始终为最新版的资源 --> css...import 'vue-happy-scroll/docs/happy-scroll.css' 3、vue组件中使用 在这里就以我的小项目为例，在dashboard.vue文件中写入如下代码，使用happy-scrool...所以默认宽度就是和外层盒子宽度一样，所以就不会出现横向滚动条了（当然如果当内部盒子宽度超出外层盒子，就会出现横向滚动条了），效果图如下： 2.jpg 4、常用属性说明 该插件可以配置常用的滚动条颜色、粗细、竖向滚动条是左还是右边显示...、横向滚动条是上还是下边显示、滚动条是否开启监听容器大小变化等属性。
端同样适用 在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb...：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果」) 使用TinyJpg和TinyPng...树的渲染 「移除CSS空规则」：CSS空规则增加了css文件的大小，影响CSS树的执行 「正确使用display」：display会影响页面的渲染 display:inline后不应该再使用...display:table-*后不应该再使用float和margin 「不滥用float」：float在渲染时计算量比较大，尽量减少使用 「不滥用Web字体」：Web字体需要下载、解析...「Put Scripts At The Bottom」：置底脚本 「Make JavaScript And CSS External」：使用外部JS和CSS 「Minify JavaScript
在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb M端因配置原因，除加载外渲染速度也是优化重点...，会造成用户流失 可感知Loading：进入页面时Loading 不可感知Loading：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示...(「过度压缩图像大小影响图像显示效果」) 使用TinyJpg和TinyPng压缩图像 使用CSS3、SVG、IconFont代替图像 使用img的srcset按需加载图像 选择合适的图像：webp优于...、transform、transition ❝「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」：CSS表达式的执行需跳出CSS树的渲染 「移除CSS空规则」：CSS空规则增加了...At The Bottom」：置底脚本 「Make JavaScript And CSS External」：使用外部JS和CSS 「Minify JavaScript And CSS」：压缩JS和CSS
浏览器使用自定义字体隐藏文本，直到字体加载完成后再显示文本。 block ：通过这个值，浏览器减少了在等待自定义字体加载时隐藏文本的时间，使得备用字体能够更快地显示出来。...这是一个示例，它将容器设置为在水平和垂直方向上捕捉到特定位置： .container { scroll-snap-type: mandatory both; } 使用这个CSS，容器在滚动时会自动吸附到最近的吸附点...这个属性在使用Web组件和React组件时特别有用，其中包含性可以帮助隔离变化的影响。它提供了几个取值： none ：这是默认值，不应用任何约束效果。...虽然通常与图像一起使用，但它也可以与其他元素创造性地结合使用，例如段落，以仅显示内容的一部分。通过 clip-path ，您可以隐藏元素的特定区域并创建视觉上引人注目的设计。...设置元素的宽高比在处理响应式设计或保持特定视觉比例时非常有用。例如，可能希望创建一个容器，始终保持16:9的宽高比，确保图像无论其原始尺寸如何都能正确显示。
刚刚看了下感觉还不错，纯CSS实现，虽然在开发主题时CSS3用的比较少。...当一张牌悬停时，其他牌不应改变大小并向外移动，以免彼此重叠。 所有的牌应该保持垂直居中。 听起来不错吧？现在让我们开始带大家一步步写代码。 HTML和flexible元素 让我们先设置一行预览的图像。...其中包括： 包含多个.item元素的.container父元素容器 每个.item元素都包含一个包装在锚标记中的图像 将.container转换为一个flex容器，该容器将行中的项对齐 设置.item类的...一种方法是在父容器本身上添加其他悬停规则。这是计划： 悬停父容器时，请将该容器内的所有项目向左移动。 使用通用的同级组合器可以将悬停的项目向右移动后放置的项目。...如果要在从右到左的上下文中使用此效果，则需要将悬停的外部容器内的所有项目设置为向右移动，并使用常规的同级组合器将所有选定的项目向左移动。
在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb M端因配置原因，除加载外渲染速度也是优化重点...，会造成用户流失 可感知Loading：进入页面时Loading 不可感知Loading：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示...(「过度压缩图像大小影响图像显示效果」) 使用TinyJpg和TinyPng压缩图像 使用CSS3、SVG、IconFont代替图像 使用img的srcset按需加载图像 选择合适的图像：webp优于jpg...css文件的大小，影响CSS树的执行 「正确使用display」：display会影响页面的渲染 display:inline后不应该再使用float、margin、padding、width和height...At The Bottom」：置底脚本 「Make JavaScript And CSS External」：使用外部JS和CSS 「Minify JavaScript And CSS」：压缩JS和CSS
块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。 我们可以把这种容器比喻为一个盒子。...这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。 文档详解 ---- 随便打开一个网页源码，基本结构如下： 在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。...| | | 定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。 | | | 用于链接外部的 CSS 到该文档。...| | | 用于内联 CSS。 | | | 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
这意味着 CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。但是，正如我们将看到的，CSS 可以对图像执行多种操作。 某些替换元素（例如图像和视频）也具有宽高比。...在 CSS 中，替换元素是指那些其内容由外部资源提供的元素，例如 、 和 。这些元素的显示取决于其替换内容，而不是其内部内容。...，使用 CSS 设置了边框、使其成为块级元素、并确保其宽度适应容器。...这些样式使得图像在不同设备上都能良好显示。 二、图像的尺寸控制 在 CSS 中，我们可以通过设置宽度和高度属性来调整图像的大小。...八、其他有用的设置 在处理图像、媒体和表单元素时，还有许多其他的 CSS 属性可以用来提升用户体验和界面美观。 示例 : 其他有用的 CSS 设置 <!
Flex 布局 1）定义 2）概念 3）容器的属性 4）项目的属性 5）实例 一、基本知识 CSS 指层叠样式表 (Cascading Style Sheets) 1.1 CSS选择器 派生选择器 通过依据元素在其位置的上下文关系来定义样式... 类选择器 在 CSS 中，类选择器以一个点号显示。...列表 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。...null的区别 null表示"没有对象"，即该处不应该有值。...display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
144 PPI（每英寸像素）PNG 图像在具有 144 PPI 显示分辨率的设备上看起来很棒。然而，在更高分辨率的 400 PPI 显示器上查看时，相同的图像可能看起来很模糊。...矢量图像格式不使用网格上的像素，而是描述构成图像的原始形状（圆形、矩形、线条或路径）以及它们在文档坐标系中的位置。因此，矢量图像与分辨率无关，无论显示分辨率或显示尺寸如何，都可以保持其质量。...我们可以使用styleSVG 元素的属性来应用 CSS，使用该元素在文档中对 CSS 进行分组，或者链接到外部样式表。每种方法的优缺点与在 HTML 中使用 CSS 时相同。...从 SVG 链接到外部 CSS 文件 与 HTML 一样，链接到外部 CSS 文件可以在多个 SVG 文档之间共享样式。要链接外部 CSS 文件，请添加CSS 是外部的时，SVGLoad事件可能会在其关联的 CSS 完成加载之前触发。 使用媒体查询 background-size SVG 文档和媒体查询不限于前景图像。
display的值及作用 display属性可以设置元素的内部和外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现，例如块级或内联元素，元素的内部显示类型可以控制其子元素的布局，例如grid...外部显示 这些值指定了元素的外部显示类型，实际上就是其在流式布局中的角色，即在流式布局中的表现。...display: inline-table display: inline-table;是CSS2规范，兼容性良好，该属性值与display: table;在元素内部表现相同，在元素外部显示表现为inline...display: inline-flex display: inline-flex;是CSS3规范，目前主流浏览器都已支持，该属性值与display: flex;在元素内部表现相同，在元素外部显示表现为...display: inline-grid display: inline-grid;是CSS3规范，目前主流浏览器都已支持，该属性值与display: grid;在元素内部表现相同，在元素外部显示表现为
交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。...边框内圆角 有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状 解决方案：box-shadow和outline结合 实现原理： outline（描边）不会跟着元素的圆角走...（因而显示直角）；box-shadow却是会跟着元素走的；，两者相结合，box-shadow会填补描边和容器圆角之间的空隙； ?...解决方案:伪元素，变形属性和css渐变实现 1.把这个元素设置为一个圆形； ? 2.用一个简单线性渐变来把图像的有半部分设为其他颜色 ?...垂直居中 在css中对元素进行水平居中垂直居中，我们在页面布局的时候会经常用到。
交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。...边框内圆角 有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状 解决方案：box-shadow和outline结合 实现原理： outline（描边）不会跟着元素的圆角走...（因而显示直角）；box-shadow却是会跟着元素走的；，两者相结合，box-shadow会填补描边和容器圆角之间的空隙； 试一试 5....解决方案: css内部与外部尺寸模型:min-content max-content,min-content,fit-content min-content：宽度表示的并不是内部那个宽度小就是那个宽度...垂直居中 在css中对元素进行水平居中垂直居中，我们在页面布局的时候会经常用到。
③border即CSS框的边界是一个分割层，位于内边距的外边缘以及外边距的内边缘之间； ④margin即外边距代表CSS框周围的外部区域。...相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline...width:70%; max-width:1280px; min-width:480px; 然后，添加下句CSS使该容器在它的父容器内居中显示： margin:0 auto...②max-width属性的另一个好处是可以将容器内的媒体（如图像和视频）控制在容器内（响应式图片）： 在上述例子中，图像会引起一个问题–起初它的显示正常，但当容器变得比图像更窄时...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
PDF 文件一般不应该被压缩,因为它 们本来就是压缩格式保存的 6 把样式表放在头部 浏览器会阻塞显示直到样式表下载完毕,因此我们需要把样式表放在 HEAD部分 把样式表移到HEAD部分可以提高界面加载速度...因此如果您把图像文件分布到多台机器的话,就可以达到超过2个的并行下载 但是当脚本文件下载时,浏览器不会启动其他的并行下载,甚至其他主机的下载也不启动 所以直接将脚本放在底部 8 避免 CSS 表达式...CSS 表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式 直接以明确的数值来写，不写表达式 如果必须动态设置的话,可使用事件处理函数代替 9 把JavaScript和CSS放到外部文件中...在现实世界中,使用外部文件会加快页面显示速度,因为外部文件会被浏览器缓存 10 减少DNS查询次数 DNS用于映射主机名和IP地址,一般一次解析需要 20~120 毫秒 把内容分布到至少2...代替， 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等 优化图片格式为常用格式 精灵图 用CSS或JavaScript实现预加载 在保证最不失真的情况下尽可能压缩图像文件的大小 17.5 网络加速
③border即CSS框的边界是一个分割层，位于内边距的外边缘以及外边距的内边缘之间； ④margin即外边距代表CSS框周围的外部区域。...相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline...使该容器在它的父容器内居中显示： margin:0 auto; 那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时...②max-width属性的另一个好处是可以将容器内的媒体（如图像和视频）控制在容器内（响应式图片）： 在上述例子中，图像会引起一个问题--起初它的显示正常，但当容器变得比图像更窄时...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
定义文档的头部，是所有头部信息的容器。 为页面上所有的链接规定默认的链接地址或目标。...链接外部资源，常用于链接外部样式表，用于链接一个外部的css文件。rel：stylesheet，type：text/css，href：URL。...定义HTML文档的样式信息，用于文档内部使用的css。必须且唯一：type：text/css。...视频下载时或播放前显示的图像。... 显示器 以视觉方式显示信息的装置 ... ...
css">：从外部引入一个 CSS...：一个空的 span 元素，可能用于显示一个装饰性的点或图标，具体样式由外部的 CSS 决定。...，src 属性指定图像的来源，class="lazyimg_img" 可能用于实现图像的懒加载或应用其他图像相关的样式，alt 属性提供图像的替代文本，当图像无法显示时会显示该文本，同时也有助于搜索引擎理解图像内容...text-overflow: ellipsis;：当文本内容超出元素的显示区域时，在最后一行的末尾显示省略号，给用户一个简洁的提示，表明还有更多的内容未显示。...三、工作流程 ▶️ 在 HTML 中，构建了页面的基本结构，包括列表、列表项、图片、信息容器和价格信息等元素，其中可能会出现文本溢出的元素是 .more2_info_name 类的 p 元素。
简述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表【.css文件、css区域】中 样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题...外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式表解决了html的内容与表现分离 使用样式表极大的提高了工作效率。...若采用内部样式，则你需要写20个相同的样式分别放在每个网页的头部 若采用外部样式，则你只需要写一个，然后在20个里面导入样式即可 样式不应当与html耦合 5. css选择器 css选择器主要是用于选择需要添加样式的...锚伪类 在支持css的浏览器中，链接的不同状态都可以不同的方式显示 这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。 ?...5.9 分类 CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
失真现象包括色彩、透明度和缩放比例，在图像、CSS、SVG都有失真。...叠加75%的黑色不应该完全盖住明亮的区域，也不应该压坏黑色。想一想，如果你有4盏灯，关掉3盏，场景会有多亮。 我们有理由想要一个不同的效果，这就是为什么我们有混合模式，但这些是明确的设计选择。....png SVG填充不透明度 正确的缩放比例 post15image9.png 一个按2次方缩小的测试图像 灰色方块的外部和内部应该是相同的整体亮度，因为它们都发出了平均亮度为白色一半的光。...图像在缩小时应保持相同的整体亮度。不正确的渲染使最小的图像过于黑暗。 如果你有一个HiDPI显示器或正在使用缩放功能，你的浏览器已经在缩放了（不正确的），全尺寸的图像看起来会有问题。...你的浏览器缩放比例失真情况 post15image10.png with dimensions post15image11.png CSS背景-图像 post15image12.png CSS
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
