CSS Sprite无法工作，因为宽度/高度定义了容器 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

0 , 只要有一个子项目设置了 flex: 1; 样式 , 那么该子项目就会自动占据剩余的所有空间 ; 4、二倍精灵图设置下图中的放大镜图片和头像图标都定义在精灵图中 , 二倍精灵图设置步骤...边框高度 - 内边距高度 ) 普通盒子模型中 , 设置垂直居中对齐时 , 直接设置内容高度 = 行高即可 ; 由于采用的是 CSS3 样式 , 该模式下 , 设置的 height 高度 = 内容高度...+ 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3 样式中 , 高度设置为 26 像素 , 其中包括了 24...高度不等于行高原因是这是 CSS3 模型 CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中 */ height: 26px; line-height...行高原因是这是 CSS3 模型 CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中 */ height: 26px; line-height:

6.1K2 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？ 21、元素竖向的百分比设定是相对于容器的高度吗？...21、元素竖向的百分比设定是相对于容器的高度吗？...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。...flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。

4.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

用 Compass 分分钟地做图片精灵

: no-repeat; } .icon--facebook{ width: 图标宽度; height: 图标高度; background-position: 图标在图片精灵中的位置; }....icon--flickr{ width: 图标宽度; height: 图标高度; background-position: 图标在图片精灵中的位置; } 以后，新增或删除图标后，需要手动修改图片精灵图片...Compass中也提供了一系列的方法获取这些值。..., $图标文件名称), 2);// 因为是垂直放的 } .icon--flickr{ $iconPath: sprite-file($sprites, 图标文件名称(不包含文件拓展名)); //...调用我的工具方法，图片精灵就更简单啦，代码如下 @import "sprite"; // 导入定义工具方法的文件 .icon { display: inline-block; $sprites

1.6K3 0

59道CSS面试题(附答案)

（1）父元素的高度无法被撑开，影响与父元素同级的元素。（2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）。...17、解释一下 CSS Sprite，以及如何在页面或网站中使用它。...24、如何定义高度很小的容器？因为有一个默认的行高，所以在IE6下无法定义小高度的容器。...定义img为 display:block，或定义父容器为font-size：0。 26、如何解决IE6双倍 margin的Bug？...伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局。 43、访问超链接后 hover样式就不出现的原因是什么？应该如何解决？

7.1K5 0

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置在上一篇博客中实现的搜索栏 , 使用...64 像素 , 同时该父容器是一个圆角矩形 , 圆角半径为 8 像素 ; 该导航栏上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 在该横向导航栏中设置了...5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式 , 这样 5 个子项目平均分配整个宽度尺寸.../normalize.css"> css/index.css"> Flex 弹性布局案例 CSS3 模型 CSS3 中的垂直居中是在边框 + 内边距 + 尺寸的总高度中垂直居中 */ height: 26px; line-height:

4K2 0

2020 年「我与技术面试那些事儿」

前言 2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢平台！...3.每次写浮动元素，会引起父元素的高度无法被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会类似于遮盖现象，这里注意如果一个元素浮动，那它前面的元素也是需要浮动的，不然会影响页面显示的结构...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。...伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。...sprite是把网页中一些背景图片整合到一张图片文件中，再利用css的background-image,background-repeat,background-position的组合进行背景定位background-position

2.1K2 0

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

前言 2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力，在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢腾讯云+社区的平台！...3.每次写浮动元素，会引起父元素的高度无法被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会类似于遮盖现象，这里注意如果一个元素浮动，那它前面的元素也是需要浮动的，不然会影响页面显示的结构...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。...伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。...sprite是把网页中一些背景图片整合到一张图片文件中，再利用css的background-image,background-repeat,background-position的组合进行背景定位background-position

2.4K34 1

CSS面试题总结

大家好，又见面了，我是你们的朋友全栈君。前面的话小柒前面总结了与HTML相关的面试题，这篇文章总结CSS相关面试题。题目 (1) 盒子模型的理解？...box-sizing用于告诉浏览器如何计算一个元素总宽度和总高度。...这时我们要避免这种情况发生，就需要清除浮动, 就算子元素浮动了，其父元素也不出现高度塌陷现象。清除浮动的方式：父级元素定义height。但这样定死的高度，往往不是我们想要的。...外链式（link引入）内联式行内式 @import引入 (10) CSS Sprite 是什么，谈谈这个技术的优缺点。 CSS Sprite将多张图片合并在一张图上。...浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式

1.4K1 0

PixiJS 修炼指南 - 01. 启程

这也使得它更专注于做好高效的2D渲染工作，给予WebGL高效渲染，实现上万对象渲染的粒子效果；同时也提供了更高的自由度，可用于做任何游戏类型的渲染层，甚至仅仅用于宣传页面的2D动画绘制。...开始工作创建成员刚才我们搭建完项目后，创建了一个 PixiJS 提供的 Application 对象，它就是我们开发的游戏应用了。...容器与层级如果查看他们的 type 声明就会发现，它们具有这样的继承派生关系：符号 -> 表示继承。...实际上因为 PixiJS 没有 CSS 的层级概念，绘制时其实就是按照遍历整个 app.stage 的树形结构，从上到下、从前到后进行绘制，后绘制对象覆盖先绘制的对象的优先级来决定层级覆盖关系。...通过查看类型定义，我们发现前者的类型是 Rectangle，即矩形，对其的官方定义为： Rectangle 对象是一个由它左上角的原点 (x, y) 和自身宽度 width+高度 height 定义的区域

6.8K7 3

前端硬核面试专题之 CSS 55 问

混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。 ? ? CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。...正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0（高度塌陷）。...清除浮动的方式父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...---- 元素竖向的百分比设定是相对于容器的高度吗？当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。 ---- 全屏滚动的原理是什么？用到了 CSS 的哪些属性？...因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。当然我们不能让它填满了，填满了它就不能和 sidebar 保持同一行了。

3.2K2 0

CSS遮罩的过渡效果有趣的幻灯片

今天，我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起，遮罩是定义可见性和与元素合成的另一种方式。...最后，我们可以将我们的作品保存为PNG序列，然后使用Photoshop或像这样的CSS Sprite生成器来生成单个图像：这是一个非常有机的显示效果的精灵图像。...CSS 在这一部分中，我们将为我们的效果定义CSS。我们将设置一个经典的全屏滑块的布局，一些居中的标题和导航在页面的左下角。此外，我们将定义一些媒体查询以适应移动设备的风格。...我们定义了一个名为hide的类，只要我们想隐藏它就会添加到幻灯片中。类定义包含我们的精灵作为一个面具应用。...知道一个帧是100％的屏幕，我们的动画包含23个图像，我们需要将宽度设置为23 * 100％= 2300％。现在我们添加我们的CSS动画利用步骤。我们希望我们的精灵在我们最后一帧的开始处停下来。

5.5K9 0

CSS Flexbox 可视化手册

如果这些项目的高度不一致，它们将会伸展到最高的那个高度 flex-basis默认为 auto（项目宽度将由其内容决定） flex-wrap默认为nowrap（如果容器的宽度不足以适合这些项目，它们不会换行...在默认情况下，flex-wrap被设置为 nowrap，这意味着如果容器不能适应在其内的行中原始宽度的项目，则这些项目将会缩小来进行适应。如果它们因为某种原因无法收缩，则会溢出容器。...auto选项通过 align-items将 align-self重置为容器全局定义的值。...下图显示的是宽度为 980px的容器，它容纳了5个宽度为 300px的物品。...默认值为 auto，项宽度由 width属性显式设置，或者取其内容宽度。它也接受像素值。下面的动图显示了一个800px宽的容器和五个设置为 flex-basis:160px的弹性项目。

4.7K2 0

知识整理之CSS篇

解决方案： img { float: left; } 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。...通过伪类实现了常规CSS无法实现的逻辑。 CSS3对于伪元素的定义伪元素在DOM中创建了一些抽象元素，这些对象不存在与常文档流中。伪元素由两个冒号::开头，然后是伪元素的名称。...示意图： image.png 解释下什么是浮动和它的工作原理？什么是浮动？非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。...原理：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。 css sprite是什么？有什么优缺点？

3K2 0

干货 | 跨平台 Canvas 绘图引擎背后的黑科技

但是因为Canvas的API和DOM/SVG差别较大，因此要把例子移植为Canvas渲染，改动比较大，这样不利于开发人员快速学习和使用D3完成项目。...、Vue等现代前端框架跨平台，支持Node.js服务端渲染、支持微信小程序 SpriteJS有与DOM高度一致的模型，它的对象以树状结构组织： ?...其中Sprite、Label和Path分别是可带图片纹理的元素、可带文字的元素和可带SVG Path的矢量元素，Group是容器，Layer可以分层渲染，Scene是根元素。...Flex布局二、缓存和批次为了提升性能，SpriteJS支持自定义缓存策略和批次渲染。如果渲染对象的形态可枚举，我们可以采用自定义的缓存策略，利用少量的缓存对象来大大提升性能： ?...用CSS定义样式 SpriteJS支持大部分DOM的CSS属性，对于一部分SpriteJS独有的属性，可以使用--sprite-属性名的方式设置。

2.6K3 0

微信小程序的组件用法与传统HTML5标签的区别

所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。...自定义的icon推荐svg sprite格式或者iconfont。目前来看，市面上还没有很好的自动合并单个svg为svg sprite的工具，需要手动拼图。...这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。...(开发者说这样设置的原因是：如果设置 auto ，页面布局会因为图片加载的过程有一个闪的现象(例如高度从 0 到 height )，所以要求一定要设置一个宽度和高度。)...align-items:center;//定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

3K2 1

CSS | 视差滚动 | 笔记

perspective: 1px; 是 CSS 属性，用于创建透视效果。它定义了观察者（即浏览器窗口）与 3D 元素之间的距离，从而影响到元素的透视效果。...vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。...因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。...应用: CSS Sprite (雪碧图/精灵图) 参考: CSS 雪碧图的使用_w3cschool Sprite Cow - Generate CSS for sprite sheets - 在线获取...CSS 雪碧图位置雪碧图是根据 CSS sprite 音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

4.9K2 1

面试题整理｜45个CSS面试题

Q7、使用CSS的缺点？ 1、无法通过选择器升序 2、垂直控制的局限性 3、没有表情 4、没有列声明 5、伪类不受动态行为的控制 6、规则，样式，无法定位特定文本 Q8、列举一些CSS框架？...Q14、什么是CSS Sprite（“精灵图”） CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。...vh viewpoint height，视窗高度，1vh=视窗高度的1% vw viewpoint width，视窗宽度，1vw=视窗宽度的1% vmin vw和vh中较小的那个。...它可以改善容器中物品的对齐，方向和顺序，即使它们的尺寸是动态的，甚至是未知的。flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。...box-sizing：边框更改了元素的宽度和高度的计算方式，边框和填充也包括在计算中。元素的高度由内容的高度+垂直填充+垂直边框宽度计算得出。

7.5K3 0

解析 span 元素背景图像的渲染流程

span 元素的基本含义与定位HTML 中的 span 元素是一种行内 (inline) 容器，主要用于标记文本或文档的一小段区域，以便通过 CSS 或 JavaScript...行内元素的特性行内 (inline) 元素与块级 (block) 元素在布局上存在差异：行内元素不会在前后形成换行，也不会影响父容器的高度，默认仅按内容宽度...在这个示例中，span 不含文本内容或子元素，若未指定宽高或 padding、margin，可能会导致背景图像无法显示，通常需配合 CSS width/height...在前端 UI 库中，常用 CSS sprite 技术：将多张小图合并为一张大图，然后通过 background-position 在不同 span 上显示指定区域，实现...针对性能和可维护性，建议：为 span 元素指定合适的 display 与尺寸，确保背景图像能正确显示；使用 CSS sprite 或 data URI 减少 HTTP

5190 0

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。这就是在过去10年中设计Web布局的方式。...例如，如果我在平板中使用 featured 也就是 PC 的样式，它不能工作，为什么?因为它的媒体查询宽度是大于1300px。不仅如此，当内容低于预期时，我们还会面临一个问题。...换句话说，如果我们查询父组件，并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。什么是容器查询首先，让我定义容器。...然后，再告诉浏览器，如果父元素的宽度等于或大于500px，它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。...在右边，一个根据父组件宽度更改的组件。这就是容器查询的功能和用途。在设计时考虑容器查询作为一名 UI，你需要适应这个革命性的CSS特性，因为它将改变我们为网页设计的方式。

3.6K3 0

小白必知什么是css和盒模型

打开调试界面,按左边的箭头，鼠标移到元素可以看到他的宽高，如下图元素下边的黑色区域62x62分别是元素的宽度和高度。...如果宽度或者高度加上margin则是元素的总占用宽度或者高度。所以margin不计算在元素的实际宽度或者高度中。童鞋们明白了吗，不理解的话一定把文章多看几遍。...5.Sprite Spirit SCSS Mixin，具备出色的图像处理能力。...9.iconoo 有了它，您将不再需要外部图标资源。 10.text-spinners 纯文本、纯CSS、独立字体、内联加载指示器。...Emmet面向大量使用HTML/XML与CSS的Web开发工作流进行开发与优化，但也可配合其它编程语言使用。

1.6K7 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭