它简化了基于网格或弹性盒子的布局的创建，通过提供一种设置网格或弹性盒子项在行和列中的间隙的简写方式。 要理解 gap 属性，让我们分别看一下它在网格和弹性盒子布局中的用法。...start ：滚动容器将对齐捕捉位置到容器的起始位置。 end ：滚动容器将对齐位置与容器的末尾对齐。 center ：滚动容器将对齐位置设置为容器的中心。...这对于屏幕外或不可见的元素（如移动菜单）特别有用。...下一条垂直线位于前一条线的右侧。 sideways-rl：内容从上到下垂直流动，所有字形，甚至垂直书写的字形，都向左侧倾斜。 目前只有Firefox支持最后两个值。...9. aspect-ratio aspect-ratio 属性是CSS的一个相对较新的添加，它允许我们控制元素的宽高比。它提供了一种简单的方法，确保元素保持特定的宽高比，无论其内容或视口的大小如何。
--视口设置：视口宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale...类: 流式布局容器 百分百宽度 占据全部<em>视</em><em>口</em> (viewport) <em>的</em>容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统，是指将页面布局划分为等宽<em>的</em><em>列</em>，然后通过<em>列</em>数<em>的</em>定义来模块化页面布局...，内容就可以放入这些<em>创建</em>好<em>的</em>布局<em>中</em> 行 (row) 可以去除父容器<em>的</em>15px边距 xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大； <em>列</em> (...-6 <em>列</em>嵌套: 内置<em>的</em>栅格系统将内容再次嵌套，就是一个<em>列</em>内再分若干份小<em>列</em>，可以通过添加一个新<em>的</em>.row<em>元素</em>和一系列 .col-sm <em>元素</em><em>到</em>已经存在<em>的</em> .col-sm <em>元素</em>内 <em>列</em>偏移: 使用 .col-md-offset 类可以将<em>列</em>向右侧偏移，这些类实际是通过使用 * 选择器为当前<em>元素</em>增加了<em>左侧</em><em>的</em>边距 (margin) <div class="row
但是，对于大屏幕，这是非常烦人的。 对设计元素进行分组可以更好地增加间距。 在没有wrapper的情况下，将设计元素划分为列是不容易完成的。...要考虑的重要事项是在左侧和右侧添加padding。 当视口大小小于 wrapper 的最大宽度时，这将导致 wrapper 边缘粘在视口上。...16px的偏移量，即使视口的大小小于最大宽度。...全屏中的 Wrapper 在某些情况下，如果某个部分的背景视口宽度为100%，并且其中包含wrapper`，则可能会出现这种情况。 与上一个示例中介绍的类似。...然而，继承的属性如颜色(color)和字体(font)却能照常影响到子元素。
在下面的demo中，body元素创建了一个经典的三列网格，中间列为main，左边和右边的列称为fullbleed。...容器查询 在 @container 之前，网页的元素只能响应整个视口的大小。这对于大型布局非常有用，但对于外部容器不是整个视口的小型布局，布局不可能进行相应调整。...第一种颜色 --absolute-change 在 LCH 中从基色创建新颜色，然后继续将基色的亮度替换为 75%，保持色度 (c) 和色相 (h)。...或者，当颜色在其颜色空间内从 A 点移动到 B 点时。由于渐变将从 A 点到 B 点采用直线，因此色彩空间的形状变化极大地改变了路径沿途的停止点。...在后来的几年里，vh 单位特别需要决定要使用两种视口尺寸中的哪一种，因为这会在移动设备上造成不和谐的视觉布局问题。已确定 vh 将始终代表最大的视口。
理想视口的好处 注意：理想视口不是真实存在的视口 设置理想视口的方法 2-缩放 PC 端 放大时 布局视口变小 视觉视口变小 元素的像素大小不变 缩小时 布局视口变大 视觉视口变大 元素的像素大小不变...touchend 手指从元素上离开时触发 touchcancel 触摸被打断时触发 这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。...touchstart 事件的作用在于实现移动端的界面交互 事件绑定 方式一 方式二 点击穿透 touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为...350ms 左右，如设置完美视口则时间间隔为 5ms 左右。...这里推荐创建一个包裹元素，绑定 touchstart 事件并阻止默认行为。
=1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap...Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下...，container的宽度不同，我们再把containei划分为12等份 3.2栅格选项参数 栅格系统用于通过一系列的行（row）与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中...简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。...这些实际是通过选择器为当前元素增加了左侧边距（margin） //列偏移 左侧
--视口设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta name="viewport" content="width=device-width, initial-scale...百分百宽度 占据全部<em>视</em><em>口</em>（viewport）<em>的</em>容器。...Bootstrap提供了一套响应式、移动设备优先<em>的</em>流式栅格系统，随着屏幕或<em>视</em><em>口</em>（viewport）尺寸<em>的</em>增加，系统会自动分为最多12<em>列</em>。...栅格系统用于通过一系列<em>的</em>行（row）与<em>列</em>（column）<em>的</em>组合来<em>创建</em>页面布局，你<em>的</em>内容就可以放入这些<em>创建</em>好<em>的</em>布局<em>中</em>。...简单理解就是一个<em>列</em>内再分成若干份小<em>列</em>。我们可以通过添加一个新<em>的</em> .row <em>元素</em>和一系列 .col-sm-* <em>元素</em><em>到</em>已经存在<em>的</em> .col-sm-*<em>元素</em>内。
X 高度和大写高度单位：ex/rex 和 cap/rcap 在字体设计中，x-height是指小写字母 x 字形从基线测量的高度。...另一方面，大写高度是指从基线到大写字母顶部的距离，通常是指顶部平坦字母的高度。在某些字体中，尖顶或圆形大写字母（如 A、O 和 S）的顶端高度可能会稍高一些。...当无法从字体本身确定 x 高度时，浏览器会使用 0.5em 的备选 x 高度。 image.png 当浏览器无法从字体中确定大写高度时，就会使用字体的升角值。...「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小 image.png 例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...选择正确的单位可以提高网站的可读性、可用性和可访问性。当你知道输出媒介的物理尺寸时，请使用绝对单位。字体相对单位和视口相对单位非常适合创建适应多种屏幕尺寸的布局。
宽度定为 750px 超小屏 (100%) .container-fluid 流式布局容器 百分百宽度 占据全部视口（viewport）的容器。...2.6 bootstrap栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。 <!...这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。 <!
此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。 scrollLeft/Top在日常工作中是比较频繁使用关于操作滚动条的相关api，他们是一个可以设置的值。...元素的 offsetLeft/offsetTop 的值等于它的左边框左侧/顶边框顶部到它的 offsetParent 元素左边框的距离。...element.getBoundingClientRect()返回的相对于视口左上角的位置。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
简而言之，auto-fill将在不扩展列宽的情况下对列进行排列，而auto-fit只会在列为空的情况下将列折叠到零宽度。 8....当视口不够高时将元素固定在屏幕顶部 如果将元素固定在屏幕顶部，如果视口不够高会发生什么情况?很简单:它会占用屏幕空间，因此，用户浏览网站时可用的垂直区域就会变小，这会影响用户的体验。...我们告诉浏览器仅在视口的高度等于或大于 500`像素时才标题固定在顶部。...使用伪元素 我经常使用伪元素，它们为我们提供了一种创建伪造元素的方法，主要用于装饰目的，而无需将其添加到HTML中。...RTL 布局的电话号 在从右到左的布局中添加电话号码(如+ 972-123555777)时，加号将定位在电话号码的末尾。要解决这个问题，重新分配电话号码的方向即可。
在 PC 端上， 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。...为了让移动端也能正常显示未适配移动设备的页面，从而引入布局视口和视觉视口的概念。 布局视口（layout viewport） 布局视口的宽度默认为 980px，通常比物理屏幕宽。...使用媒体查询（Media Queries） 媒体查询允许开发者根据设备类型和特征（如屏幕分辨率或浏览器视口宽度）来按需设置样式。...同理于 flexible 方案，使用 vw、vh 也需要对设计稿中的尺寸进行换算，将 px 转换为 vw 值，常见的工具如 postcss-px-to-viewport 等可以满足需求。...使用响应式图片 展示图片时，可以在 picture 元素中定义零或多个 source 元素和一个 img 元素，以便为不同的显示/设备场景提供图像的替代版本。
通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...https://codepen.io/cellinlab/pen/xxpaXzd 响应式设计中的列非常灵活多变，比如一宽一窄的列、等宽的列、两列、三列。...固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。...网页默认就是响应式的。没添加 CSS 的时候，块级元素不会比视口宽，行内元素会折行，从而避免出现水平滚动条。加上 CSS 样式后，就需要来维护网页的响应式特性了。...# 不同视口大小使用不同的图片 响应式图片的最佳实践是为一个图片创建不同分辨率的副本。如果用媒体查询能够知道屏幕的大小，就不必发送过大的图片，不然浏览器为了适配图片也会将其缩小。
1.1 Intersection Observer API 出现的原因 因为在如今网页开发的过程中，常常需要判断某个元素是否进入了"视口"（viewport），即用户能不能看到它。...)元素 --- 帮助我们判断目标元素是否符合条件的元素 以下两种情况根元素会默认为顶级文档的视口(一般为 html)。...如果指定为 null，也为浏览器视口。 必须是目标元素的父级元素。 rootMargin --- 根元素的扩缩边距。...属性 说明 默认值 root 指定根元素。如果传值为 null，则为顶级文档的视窗。 顶级文档的视口(一般为 html) rootMargin 根元素的扩缩边距。...，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null intersectionRect 返回目标元素与视口（或根元素）的交叉区域的信息
而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。...这个指定的区域可能有固定的宽度和高度，或者可能是一个更具响应性的空间，如根据浏览器视口大小变化的网格区域。...我们的图像比我们的div大得多，如果我们将图像放在div内，它会溢出，如下所示。 我们的目标是防止图像从其容器中爆裂出来，但也要让它舒适地适应其中，object-fit 将帮助我们做到这一点。...在响应式布局中使用 object-fit object-fit 属性在图像的指定区域的尺寸响应浏览器视口大小的情况下可能最有用。...3; } article { display: grid; grid-template: 5% 1fr 10% / 40% 1fr 40%; height: 100vh; } 随着视口和网格区域的扩展和收缩
负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。...考虑下面的模型： 当它们彼此靠近时，这些元素看起来并不好，我用 flexbox 构建它们，这种技术被称为“Alignment Shifting Wrapping”，我从 CSS Tricks 中了解到它的名字....element { display: flex; flex-wrap: wrap; } 当视口尺寸较小时，它们确实会在新行中结束， 见下图： 需要解决的是in-between设计状态，两个item...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。...例如，根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的！ 我们可以。 最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。
「如果大家对这些概念熟悉，可以直接忽略」 同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。...这意味着 CSS 将查找 HTML 树并找到最近的一个祖先，「该祖先也使用了这些值之一」。如果找不到，则绝对定位元素将相对于视口定位。...替换元素 在 CSS 中，替换元素（Replaced Element）是指一个由浏览器根据元素的标签和属性创建的、在渲染时展示的元素，而「不是由文档中的内容决定其显示的元素」。...❝在Flexbox中，一切都「基于主轴」。算法不关心垂直/水平，甚至不关心行/列。所有规则都围绕这个主轴以及垂直运行的交叉轴结构。 ❞ 我们可以轻松切换水平布局到垂直布局。所有规则都会「自动适应」。...当我们设置width: 2000px时，我们肯定能到一个宽度为 2000 像素的元素，即使它已经超过当前视口的宽度。 ❝然而，在 Flexbox 中，width属性的实现方式不同。
CSS 中与布局和位置相关的所有内容都受框模型的影响，如果你打开 chrome 开发工具，你可以看到如何在页面上的任何元素计算框模型。 ?...，允许你在 UI 中的任何位置创建灵活的列或行，当元素具有显示 flex 时，它还具有 x 和 y 轴，你可以在其上对齐其子项。...当涉及到布局时，Flexbox 通常是我使用的第一个工具，但它确实有一个主要缺点，如果你有一个包含许多相交行和列的大型复杂 UI，你最终可能会在 HTML 中使用大量容器或包装元素。 ?...例如，你可能有一篇文章的首选宽度为 50%，但在小屏幕上，你希望将其固定为 200 像素或在大屏幕上固定为 800 像素，你可以通过编写将有条件地应用 CSS 的媒体查询来实现基于视口大小，唯一的问题是媒体查询会让你想要随着项目的增长而离开自己...但真正酷的是你可以结合使用不同的单位，比如你可能想从我们的代码中的当前视口宽度中减去 50 像素，我们有一个动画，其中元素从顶部下降。 ? 但我们想错开它们，让它们一个接一个地出现。 ?
四、CSS 网格单位 在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。...八、线（lines） 网格的假想水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。 这是一个 3x3 网格的线条： ?...如下 grid-column: 2 / 4;这会让网格项从左侧第二条线开始到第四条线结束，占用两列。...: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ; item1 { grid-area: 1/1/2/4; }:网格项将占用第 1 条和第 2 条水平线之间的行及第 1 条和第 4 条垂直线之间的列...二十二、在网格中创建网格 将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
通过使用JavaScript，Web开发人员可以控制特定元素从服务器获取和渲染到用户屏幕的时间和方式。本文将探讨懒加载的好处、实施方法、对Web性能的影响、挑战和最佳实践。...，我们将创建一个Intersection Observer的实例，并指定一个回调函数，每当观察的元素进入或离开视口时，该函数将被触发。...然后，我们创建一个新的Intersection Observer实例，传入一个回调函数，每当观察的元素（在这种情况下是懒加载的图片）进入或退出视口时触发。...通过延迟加载图片，只有用户视口内或可见区域的图片会最先加载。利用无限滚动或分页来展示大量内容的网页可以从延迟加载中受益。带有交互元素和小部件（如滑块、轮播图和手风琴）的页面也可以利用延迟加载。...跨多个页面的长文章或博客文章也可以从延迟加载中受益。与预加载所有页面不同，延迟加载可以在用户滚动到当前页面末尾时获取和加载后续页面。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
