但是，在处理具有大量细节和子元素的组件时，这可能会变得越来越复杂。 Margin- 外部间距 它用于在一个元素和另一个元素之间添加间距。...边距折叠 简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。 在这种情况下，将使用较大的边距，而忽略另一个边距。...关于解决方案 #2，它没有 CSS 特异性问题。 但是，它仅适用于一个列堆栈。 更好的解决方案是通过向父元素添加负边距来取消不需要的间距。...或者，当它垂直堆叠时，这将如何在移动设备上工作？ 很多很多的复杂性。 使用抽象组件 上述问题的一个解决方案是拥有抽象的组件，目的是托管其他组件。...让我们假设一个部分需要从左边算起 24px 的边距，考虑到这些限制： Margin 不能直接用于组件，因为它是一个已经构建的设计系统。 它应该是灵活的，间距可能在 X 页面上，但不在 Y 页面上。
另外，当图片源失败时，可以给它们添加伪元素。 响应式图片 的好处是，它可以扩展为具有特定视口大小的照片的多个版本。比如说，这可以用于文章图片。 我们有两种不同的方式获得一组响应式的图片集。...CSS背景图片 当使用CSS背景来显示图片时，需要一个有内容或特定宽度或高度的元素。通常情况下，背景图片的主要用途应该是用于装饰。 如何使用CSS背景图片 很简单，我们需要一个元素。...，只有当视口宽度大于700px时才会显示。...它是静态的还是会动态变化（例如来自CMS）？ Hero - 解决方案1 通过使用多个CSS背景，我们可以有一个用于叠加，另一个用于实际图片。请看下面的CSS。...但是，当用户上传的头像是半白色的，或者是很淡的头像时，这个设计就会失败。 注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆圈。这就是一个问题。
虽然另一个折叠了，以适应其空的 alt 属性的内容，但由于它的边框，导致了它作为一个小点出现。 但是，当存在 alt 属性值时，它将如下所示： ? 这不是很好的反馈吗？...另外，当图片源发生故障时，可以向其中添加伪元素。 1.4 响应式图片 ? 的优点在于，可以针对特定视口大小将其扩展为具有多个版本的图片。例如，这可用于商品图片。...CSS背景图片 当使用CSS背景显示图片时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图片的主要用途应该是用于装饰目的。 2.1 如何使用CSS背景图片 简单来说，我们需要一个元素。...700px 时显示。...但是，当用户上传半白色头像或非常浅的头像时，此设计将失败。 ? 注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆形。
另外，当图片源失败时，可以给它们添加伪元素。 响应式图片 的好处是，它可以扩展为具有特定视口大小的照片的多个版本。比如说，这可以用于文章图片。...CSS背景图片 当使用CSS背景来显示图片时，需要一个有内容或特定宽度或高度的元素。通常情况下，背景图片的主要用途应该是用于装饰。 如何使用CSS背景图片 很简单，我们需要一个元素。...在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。 伪元素 可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。...它是静态的还是会动态变化（例如来自CMS）？ Hero - 解决方案1 通过使用多个CSS背景，我们可以有一个用于叠加，另一个用于实际图片。请看下面的CSS。...但是，当用户上传的头像是半白色的，或者是很淡的头像时，这个设计就会失败。 注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆圈。这就是一个问题。
translateX,translateY表现出在屏幕中的上下左右移动，transformZ 的直观表现形式就是大小变化， 实质是 XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是...white; } 解释 image-2023-7-19-17-33-13 虽然所有背景图都重叠在了视口处，但只有当其对应容器抵达视口时才能显示对应可视区域的背景图。...在上图中，应该在屏幕底部的按钮被隐藏了。 更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部， 因此用户体验是很糟糕的。...一个好的解决方案: window.innerHeight 解决这个问题的一种方法是依赖 JavaScript 而不是 CSS。...这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开， 就解决了上述的两个问题。 显示雪碧图的条件： 1. 一个设置好宽和高的容器 2.
而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。 但是，当alt属性有值，它看起来是这样的： ? 这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。...例如： img { object-fit: cover; object-position: 50% 50%; } CSS背景图片 使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素...与使用相比，这是一个额外的好处。 在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。 可访问性问题 如果使用不当，背景图像可能会影响可访问性。...它是静态的还是动态变化的？ 解决方案1 通过使用多个CSS背景，我们可以将一个背景作为叠加层，将另一个背景作为实际图像。...解决方案用包裹 头像中，并添加专用于内部边框的元素。
wrapper 简介 当我们说到 wrapper 或container，实际上是指一组元素被包装或包含在另一个元素内。...上图显示了当没有用wrapper进行包裹时元素是如何展开的，用户不应该体验这种行为。我们来解释一下背后的原因。...要考虑的重要事项是在左侧和右侧添加padding。 当视口大小小于 wrapper 的最大宽度时，这将导致 wrapper 边缘粘在视口上。...现在，当将display:flex应用于.site-header元素时，.wrapper的后代项将成为.site-header的子项。 ?...流动背景，固定内容 Lea Verou 在她的《CSS Secrets》一书中介绍了一种有趣的技巧，该技巧可用于流动背景（占据整个视口宽度）且内部带有wrapper部分。 让我们回顾一下常见的做法。
如果两个或多个元素很接近，那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。...但是，当处理具有许多细节和子元素的组件时，这会变得越来越复杂。 margin 外部间距 它用于增加元素之间的间距。...margin 折叠 简而言之，当两个垂直元素具有margin，并且其中一个元素的margin大于另一个元素时，发生边距折叠。在这种情况下，将使用更大的margin，而另一个将被忽略。 ?...grid-column-gap: 16px; } CSS Flexbox 间隙 gap 是一个提议的属性，将用于CSS Grid和flexbox，撰写本文时，它仅在Firefox中受支持。...它应该是灵活的。间距可能在X页上，但不在Y页上。 我在检查Facebook的新设计CSS时首先注意到了这一点。 ?
在下面的图中，是没有使用flex-grow情况。换句话说，这是它们的自然大小。 ? 要了解 flex 项目宽度的计算方式，可以参考下面的公式。 我们来计算一下文本是 CSS 的项目宽度。 ?...现在我们把第一项的flex-grow值改为2。 这们它又是如何计算？ 请注意，本示例的可用空间为498px。 ? 上图已经解释的很清楚，这里就不在啰嗦了，还不懂的，可以多看几次。...如图所示，在视口宽度大于300px时，宽度为300px，少于 300px，该项目的宽度就被压缩成跟视口一样的宽度。 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。...因此，内容越多的flex项目就会越大。 ? flex 项目绝对大小 相反，当flex-basis属性设置为0时，所有flex项目大小会保持一致。...增加的用户体验 ? 源码：https://codepen.io/shshaw/pen... 当内容大于其包装器时 ? 不久前，我收到一个读者的问题，他的问题如下。
例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。...两种解决方案分别是 overflow:hidden或font-size：容器高度px 25、如何在图片下方设置几像素的空白间隙？...IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值 （2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。 （3）当两个外边距一正一负时，折叠的结果是两者相加的和。
当 Flex 项目的数量是动态的时，不要使用justify-content: space-between 当将justify-content: space-between应用于flex容器时，它将分配元素并在元素之间留出相等的空间...长单词和链接 当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...当视口不够高时将元素固定在屏幕顶部 如果将元素固定在屏幕顶部，如果视口不够高会发生什么情况?很简单:它会占用屏幕空间，因此，用户浏览网站时可用的垂直区域就会变小，这会影响用户的体验。...styles*/ } } 在上面的代码段中，我们告诉浏览器仅在视口的高度等于或大于 500`像素时才标题固定在顶部。...字体与交互式HTML元素不兼容 当为整个文档设置字体时，它们不会应用于input、button、select和textarea等元素。它们在默认情况下不会继承，因为浏览器将默认系统字体应用于它们。
我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...因为它的媒体查询宽度是大于1300px。 不仅如此，当内容低于预期时，我们还会面临一个问题。有时，UP主可能只会添加一篇文章，而设计是包含其中的三篇。...然后，再告诉浏览器，如果父元素的宽度等于或大于500px，它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。...我们可以使用CSS容器查询来实现它。 当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。...然后，如果容器宽度大于180px，将显示用户名。 另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。
float float：left (或 right)，向左（或右）浮动，直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，无法将父类元素撑开。...Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas 不支持鼠标键盘等事件。 SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。...有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。 JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。...---- 有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？...视口的尺寸 不过由于 vw 和 vh 是 css3 才支持的长度单位，所以在不支持 css3 的浏览器中是无效的。
不可能根据元素的数量来设计父元素的样式 想象一下，当有5个或更多的项时，我们需要为每个添加display: flex。我们不能用 :nth-last-child 伪类选择器来做这个。...例如，当容器或视口宽度较小时，我们需要每行显示1个项。 为了控制间距要付出更多 当有3个或更少的项时，间距是水平的，而当有5个或更多时，间距是垂直的。...我们没有太多的控制，因为我们需要调整minmax()中的150px的值。当有4个或更少的项时，它可以很好地工作，而当有5个或更多的项时就会出现问题。 解决办法是什么？...我们可以用CSS :has检查是否有超过5个项目或更多，并在此基础上改变minmax()的值。...动态标题布局 在下图中，我们有一个标题，当导航项有4个或更多时，应该改变其布局。通过CSS :has和:nth-last-child，我们可以检测并改变布局。
DOM元素（targets）相对于包含元素或顶级视口（root）的可见性和位置。...每个测试都有两个文件：一个用于Intersection Observer，另一个用于滚动事件。 所有测试的目的是检测目标元素何时以25％的增量向上滚动通过视口。...当目标首次进入根元素时，将创建滚动事件侦听器，然后在目标离开根元素时将其删除。滚动时，输出仅显示每个事件的时间戳，以实时显示事件的变化-比单独的观察者要精确得多。 下面是JavaScript。...如果容器具有溢出剪裁或css剪裁路径[11]属性，请通过应用容器的剪裁来更新intersectionRect。 因此，当剪裁目标时，将重新计算相交区域的边界。Firefox显然尚未实现。...即使Intersection Observer告诉我们目标元素何时跨越根元素的边界，也不一定意味着该元素实际上对用户是可见的。它可能具有零不透明度，或者可能被页面上的另一个元素覆盖。
’ + ‘margin-right’ = 块的宽度 当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。...下面是一个更好的解决方案。...overflow 属性 当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。如果内容超过了最大值，那么我们需要显示一个滚动条。...; height: 100px; } 如何在较大的视口中重设left？...这是一个更经得起时间考验的解决方案。 卡片组件 你可能有一个card组件，其左上角有一个操作，它可能仅用于装饰，也可能是一个有用的操作。不管是什么，你都应该考虑到它是双向的。 ?
注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。... 我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。...比如以下情况： 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等） 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。...页面一开始渲染的时候（这肯定避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算...+= 'border-left: 1px; border-right: 2px; padding: 5px;'; 修改CSS的class const el = document.getElementById
注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。... 我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。...比如以下情况： 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等） 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。...页面一开始渲染的时候（这肯定避免不了） 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的） 注意：回流一定会触发重绘，而重绘不一定会回流 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算...+='border-left: 1px; border-right: 2px; padding: 5px;'; 修改CSS的class constel=document.getElementById
） text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板...适用场景 适用于响应式截断，多行文本溢出省略的情况 Demo 当前仅适用于文本为中文，若文本中有英文，可自行修改 const text...: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...设置 A 盒子的高度与 B 盒子高度（或最大高度）要保持一致 当 B 盒子高度低于 A 盒子，C 盒子仍会处于 B 盒子右下方。...参考文章 纯 CSS 实现多行文字截断 ( https://github.com/happylindz/blog/issues/12 ) 【 CSS / JS 】限制一行和多行文字数量，溢出部分用省略号显示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
