文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design —卡片（Cards）

左：卡片有圆角、能有多个操作、可关闭/重现    右：是tile而不是卡片，无圆角、最多两个操作 ? 左：快速可浏览列表，适合展示无操作的同类内容    右：阻碍了快速浏览，且这些内容不能关闭 ?...内容层次 使用卡内的层次结构来引导用户注意最重要的信息。 例如，将主要内容放置在卡的顶部，或使用排版来强调最重要的内容。 图像可以强化卡片中的其他内容。...最大高度限于平台上可用空间的高度，但可以暂时扩大（例如，显示评论）。 卡片不会翻转以显示背面的信息。 支持的手势 卡片手势应始终在卡片集合中实施。...在集合中的卡片中，始终展示操作。 补充操作 使用图标，文本和UI控件（通常放置在卡的底部）明确调出卡内的补充操作。 除了溢出菜单之外，补充操作限制为两个操作。 ? ?...溢出菜单（可选） 溢出菜单通常放置在卡的右上角。但当能改善内容布局和易读性时，则可以将其放置在右下角。 注意不要让溢出菜单负荷的操作太多。 ? 其他操作 强烈建议不要在文本内容中使用内联链接。

4.3K100

web前端学习摘要。

对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。    2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。...3.弹性布局（flexbox） 响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。 PC站常见布局 1....一列布局（静态布局）：一列自适应居中 2. 两列布局：一列固定宽+一列自适应 3. 三列布局（双飞翼布局）：中间列自适应宽+左右列固定宽 一列布局： <!...内容可见，溢出到容器外部。...（默认值） hidden 溢出的内容被隐藏，无法查看 scroll 无论内容是否溢出，容器都被添加滚动条。（溢出才激活） auto 当内容溢出时，容器边缘（纵向）出现滚动条。

3.6K30
您找到你想要的搜索结果了吗？
是的
没有找到

Java常见问题分析(内存溢出、内存泄露、线程阻塞等)

新生成的对象在Eden区完成内存分配 (2) 当Eden区满，再创建对象，会因为申请不到空间触发YGC，进行young(eden+1survivor)区的垃圾回收（为什么是eden+1survivor：两个...survivor中始终有一个survivor是空的，空的那个被标记成To Survivor） (3) YGC时，Eden不能被回收的对象被放入到空的survivor（也就是放到To Survivor，此时...Eden被清空），另一个survivor（From Survivor）里不能被GC回收的对象也会被放入To Survivor，始终保证一个survivor是空的（YGC完成之后，To Survivor...，且发生在：at com.iflytek.diange.data.provider.sendsong.impl.SendSongImpl.getSendSongInfosByUserId(SendSongImpl.java...3.程序无响应 死锁（程序表现为无响应） 线程状态为“waiting to lock”: 两个线程各持有一个锁，又在等待另一个锁，故造成死锁，且发生在DeadLockTest.java:39行 ?

1.3K10

Flutte部件目录-基本部件（一）

如果部件没有子且没有alignment(对齐)，但是提供了高度，宽度或constraints(约束)，那么基于给定这些约束和父对象的约束相结合容器会尝试尽可能小。...示例代码 这个例子显示了一个48x48的绿色正方形（放置在一个Center部件中，以防父容器对Container应该采用的尺寸有自己的看法），并带有一个边距，以便它远离相邻的小部件： new Center...在这种情况下，解决方案通常只是将内部列包装在Expanded中，以表明它应该占用外部列的剩余空间，而不仅仅是它需要的空间。 显示此消息的另一个原因是将列嵌套到ListView或其他垂直滚动条中。...黄色和黑色的条纹横幅 当列的内容超过可用空间量时，列溢出，内容被剪辑。 在调试模式下，在溢出边缘处呈现黄色和黑色条纹条以指示问题，并在列下方显示一条消息，指出检测到多少溢出。...Column的宽度是子部件的最大宽度（这将始终满足传入的水平约束）。 列的高度由mainAxisSize属性确定。

7.4K20

前端面试实录CSS篇（最近一周）

1. display: none;: 不会渲染该元素，不会占位，也不会响应绑定的监听事件 2. visibility: hidden;: 会渲染，但是不会显示且会占位，也不会响应绑定的监听事件 3. opacity...在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4. BFC 区域不会与浮动的容器发生重叠 5....单行/多行文本溢出？ /* 多行文本溢出 */ display: -webkit-box; /*作为弹性伸缩盒子模型显示。...: hidden; /*溢出隐藏 */ text-overflow: ellipsis; /*溢出用省略号显示 */ /* 单行文本溢出 */ white-space: nowrap;.../*规定段落中的文本不进行换行 */ overflow: hidden; /*溢出隐藏 */ text-overflow: ellipsis; /*溢出用省略号显示 */ 11.

9710

WatchDog的几种用法

其外在表现常常是：正常功能丧失,按键无响应,显示凝固。单片机死机后,只有复全才能走出死循环,执行正常的程序流程。众所属知,克服死机的最有效手段是加看门狗(WatchDog)。...DogTimer按固定速率计时,计满预定时间就发出溢出脉冲使单片机复位。如果每次在DogTimer溢出前强行让DogTimer清零,就不会发出溢出脉冲。...当程序进入某个死循环,而这个死循环中又包含FeedDog语句,这时DogTimer始终不会溢出,单片机始终得不到复位信号,程序也就始终跳不出这个死循环。...双时限看门狗有两个定时器;一个为短定时器,一个为长定时器。...定时复位看门狗的主体也是一个定时器,到预定时间就发出溢出脉冲,此溢出脉冲使单片机强行复位。定时复位看门狗不需要CPU FeedDog。 简言之,定时复位看门狗就是定时地让单片机强行复位。

85920

前段：可能是最全的 “文本溢出截断省略” 方案合集

text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板...响应式截断 文本溢出范围才显示省略号，否则不显示省略号 加粗文字短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差 适用场景 适用于响应式截断，多行文本溢出省略的情况...， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...） ::after {} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低..., 实现文本溢出显示省略号效果） word-break: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好

2.1K00

前段：可能是最全的 “文本溢出截断省略” 方案合集

text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板...响应式截断 文本溢出范围才显示省略号，否则不显示省略号 加粗文字短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差 适用场景 适用于响应式截断，多行文本溢出省略的情况...， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...） ::after {} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低..., 实现文本溢出显示省略号效果） word-break: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好

2.3K40

Jump Start Bootstrap 第2章

Bootstrap建议我们应该把所有的行和列放在一个容器内，以确保正确的对齐和填充;Bootstrap中有两种类型的容器类:container和container-fluid，前者在浏览器窗口中创建一个固定宽度的容器...因此，所有列在超小显示器上跨越12格，它们将组成一列显示；但在小显示器上，它们将分别占据6格，显示成两列。如图 ? 让我们在前面的代码中再增加一行。我们将复制用于在代码中创建一行的相同代码。...对于桌面版显示的线框，我们还剩下三列的博客文章。这一次，我们不会为接下来的三列创建单独的行。相反，我们将直接将这些列附加到现有的行中。你可能想知道我们怎么能有24列(6列在每一行中跨越4个引导列)。...最后，我们有一个完整的HTML页面响应式，可以手动调整浏览器宽度，动态地观察布局变化。我希望您在理解引导程序的网格系统时发现这个案例研究很有用。...如果使用得当，你可以设计一个可以工作在几乎任何类型的显示设备的美观且响应迅速的网站。诸如嵌套、偏移和重新排序的功能，也让网格系统变的更强大。

2.9K40

可能是最全的 “文本溢出截断省略” 方案合集

） text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板...○ 基于 JavaScript 的实现方案 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差...，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...{} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低

3.4K20

可能是最全的 “文本溢出截断省略” 方案合集

） text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 省略号位置显示刚好 短板...○ 基于 JavaScript 的实现方案 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 需要 JS 实现，背离展示和行为相分离原则 文本为中英文混合时，省略号显示位置略有偏差...，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...{} （设置省略号样式） 优点 无兼容问题 响应式截断 短板 无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低

3.2K11

超级实用！，掌握这9个鲜为人知的CSS属性

这是一个示例，设置了一个网格容器，行之间有20像素的间隔，列之间有10像素的间隔 .container { display: grid; gap: 20px 10px; } 使用这个CSS，容器内的网格项之间将有指定的行和列之间的间隙...它简化了创建灵活且均匀间距的布局的过程。...mandatory ：容器会自动吸附到最近的吸附点，确保在滚动过程中始终处于吸附位置。 proximity ：如果滚动停止在特定的阈值内，容器会自动对齐到最近的对齐点。...设置元素的宽高比在处理响应式设计或保持特定视觉比例时非常有用。例如，可能希望创建一个容器，始终保持16:9的宽高比，确保图像无论其原始尺寸如何都能正确显示。...这是一个将容器设置为16:9宽高比的示例： .container { aspect-ratio: 16 / 9; } 通过应用这个CSS，容器将始终保持16:9的宽高比，无论其内容或视口大小如何。

32230

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。 flex-basis : 指定 flex 元素在主轴方向上的初始大小。...长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning, 虽然这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。...flex-shrink ：指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。... Two Three 执行结果: flex-flow - flex 容器中布局及单多行显示...属性指定 flex 元素单行显示还是多行显示。

34120

css grid 布局那些事儿

CSS 网格架构 有两种使用 CSS 网格布局的方法：隐式和显式。使用隐式网格，您只需定义所需的列数，浏览器将自动创建网格。使用显式网格，您可以定义列数和行数。...这意味着它可以处理列和行。然而，与主要是一维的传统 CSS 布局不同，CSS Grid 旨在同时处理两个维度。 它是一个基于容器的布局系统。这意味着它适用于作为容器元素的子元素的元素。...容器元素定义网格，子元素放置在网格单元格中。 它是一个响应式布局系统。这意味着它可以适应不同的屏幕尺寸和分辨率。CSS Grid 也很灵活，这意味着它可以用于从简单到复杂的各种布局。...但是，它还具有一些使其独一无二的新功能。 CSS Grid 独一无二的功能 提供使用基于行的定位将项目放置在网格上的能力。这使得创建非常复杂的布局成为可能，而无需使用传统的浮动或绝对定位。...所有这些功能在正确使用时都可以创建在任何屏幕尺寸上都能很好显示的响应式布局。 使用 CSS 网格的好处 在构建网页时使用 CSS Grid 有很多好处。主要好处之一是它可以更轻松地创建复杂的布局。

2K30

一分钟实现Android遮罩引导视图

GuideView是一种基于DialogFragment实现的引导遮罩浮层视图的轻量级解决方案，它具备以下的特性： 响应导航按钮的动作（因为引导浮层本质是一个dialog）； 链式引导层，支持设定一组的引导遮罩视图...其中的属性都通过构造器的模式，通过静态内部类Builder进行构建，属性说明如下： targetView 引导视图需要显示附着的目标视图 hintView 引导视图（不包含半透明浮层以及透明焦点区） transparentSpaceXXX...如果需要在位置之余有不一样的对齐效果，可以使用hintViewMarginXXX属性 outlineType 透明焦点区的轮廓类型，有圆形（椭圆）轮廓和方形轮廓两种 maskColor 半透明遮罩浮层的颜色...，对外部业务完全透明无感知到一个类 GuideViewFragment 实际显示引导视图的弹窗。...其内部加载了一个FrameLayout容器，通过在容器中添加GuideView的实例实现显示引导视图层。一个GuideViewFragment可以设定一组引导视图，完成一组引导序列。

1.9K10

如何使用Grid中的repeat函数

当浏览器变窄时，"auto"列继续变窄，直到达到min-content阈值。 image.png 在上面的演示中，只有当每一列达到min-content阈值时，div 才会开始溢出容器。...之后，内容就会开始脱离容器。我们很快就会看到如何获得更好的效果。 使用min()或者max() minmax() 函数的参数也可以是 min() 或 max() 函数。这两个函数都接收两个参数。...min()函数应用两个值中较小的值，而 max() 函数应用较大的值。这在响应式环境中非常有用。...因此，在窄屏幕上，我们仍然会发现内容悬挂在容器外；要做到完全响应式，还有很长的路要走。...当这一列的宽度小于 200px 时，div 就会开始溢出其容器。 image.png 我们可以通过引入 min() 来防止溢出，接下来我们就来看看它。

50530

CSS实用技巧（中）

内联元素垂直居中对齐 开发中会遇到用字幕x代替关闭icon，用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐，这是因为文本默认是基线对齐，x、省略号默认底部在基线处。...paint 的元素 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素） 网格元素（display 为 grid 或 inline-grid 元素的直接子元素） 多列容器...（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1） column-span 为 all 的元素始终会创建一个新的BFc BFC使用案例...我们只需要把container容器转成BFC容器，即可清楚浮动，注释的几种方法都可以。...这个特性某些情况下非常有用，比如给box-card加一个图标，借助无依赖定位 + padding/margin即可。写法比较简洁，建议尝试一下。

1.4K40

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

但这种传统的方式，一来使用较复杂，二来某些排版效果不好实现，如列表、居中、响应式布局等效果。 而 flex 则能够很好的完成传统的布局工作，而且，它还可以支持响应式布局。...当设置了 wrap 时，允许 items 在主轴方向溢出时自动进行换行布局，这点可以很好的用来实现响应式布局，比如当空间逐渐缩小时，原本水平排列的控件换成垂直方向排版。 示例： ?...items 设置了溢出换行属性，且当前在交叉轴方向上存在多行 item 的情况下，该属性才会生效。...当 flex 容器空间不够，item 要溢出时，设置次属性可控制 item 按比例进行相应收缩，以便不让 item 溢出，默认 1，值越大收缩倍数越大，最后 item 就越小，0 表示不收缩，负值无效。...换行和收缩都是用于解决 item 在主轴方向上溢出的问题，既然是互斥，且换行优先级高，那么设置了换行，就不会再对 item 进行收缩了。 示例： ?

1.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券