首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

2024年,你需要了解下这 12 个现代化 CSS 新属性

object-fit属性的作用是让img标签或其他替换元素(视频)的内容表现得就像它们是容器本身,从而使这些内容能够像背景图片那样进行尺寸调整。...逻辑属性的一员,用于简化水平书写模式下(英文、中文)的左右外边距设置。...浏览器兼容性 9、width: fit-content 在前端开发,经常需要调整元素的宽度以适应其内容。...width: fit-content 属性允许元素的宽度自动调整以适应其内容的大小,相当于“收缩包裹”(shrink wrap)效果。这意味着元素的宽度会刚好足够容纳其内容,不会过大或过小。.../* 应用width: fit-content */ .fit-content { width: fit-content; } 在这个例子,类名为.fit-content的元素将其宽度自动调整为恰好适应其内容的大小

38610

CSS3新特性应用之结构与布局

一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型剩余的宽度,包含margin、padding、border...min-content:采用内部元素最小宽度值最大元素的宽度作为最终容器的宽度,最小宽度:替换元素,:图片的最小宽度就是图片呈现的宽度,文本元素,如果全是中文就是一个中文的宽度,如果包含英文,默认为英文单词不换行的宽度...fit-content:实现浮动元素的水平居中,因默认情况下浮动的元素元素是不能通过margin:auto实现水平居中的,这时就需要fit-content辅助实现。...每次要產生假句時就從隨機挑選一個,然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。...结构 利用calc可以少一层html结构,且Css更简洁 calc(50% - 300px): -之间必须要有空格,否则会解析出错 用容器一半的宽度 - 内容块一半的宽度 容器的宽度可以不设置为100%

1.5K90

如何使用Grid的repeat函数

在下面的演示,我们有三列,每一列都设置为 min-content,因此每一列的宽度与其包含的最长单词一样宽: article { grid-template-columns: repeat(3,...使用fit-content()函数 fit-content()函数接收一个参数,该参数代表轨道可增长到的最大尺寸。fit-content() 可以接收任何长度值, fr、px、em、% 和 ch。...(3, fit-content(120px)); } image.png 使用命名线 在网格布局,轨道周围的垂直线和水平线默认是编号的。...例如: article { grid-template-columns: repeat(auto-fit, 150px); } image.png 在上面的演示,div 的宽度设置为 150px...我们将剥离演示 HTML,使其只有四个 div,并设置以下 CSS: article { grid-template-columns: repeat(auto-fill, minmax(min(100px

45530

你不知道的 CSS

另外这里,老姚谢谢各位一既往的支持。??? 01.【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02....【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ? 34【fit-content】?...设置宽度fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?

1.3K30

你未必知道的49个CSS知识点

另外这里,老姚谢谢各位一既往的支持。??? 01.【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02....【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ? 34【fit-content】?...设置宽度fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?

1.5K20

你未必知道的49个CSS知识点

另外这里,老姚谢谢各位一既往的支持。??? 01.【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02....【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ? 34【fit-content】?...设置宽度fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?

1.2K10

你未必知道的49个CSS知识点

另外这里,老姚谢谢各位一既往的支持。??? 01.【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02....【input的宽度】?并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ? 34【fit-content】?...设置宽度fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果 ? 35【自定义属性】?CSS自定义属性的简单使用 ?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?

1.3K20

Jekyll 文章侧边索引导航

Jekyll 生成目录的方案   参考资料 1 中所提到的,如果想要在 Jekyll 实现文章目录,有三种不同的方案可供选择: 第一种方案   利用完整的标签来生成静态目录,可以看到在本文的开头就是这样的一个实例...缺点也比较明显,不大符合语义化 HTML 的规范,即 HTML 标签只做与它含义相同的事情。Table 标签作为表格布局标签,应该专注于展示表格数据,而非为整个页面布局操心。...具体在 post 模板页使用 toc 模块的代码最后所示。 自适应   为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏时采用如下 common.sass 的样式。...显示目录时,正文内容宽度为 720 px,目录宽度为 280 px。...不显示目录时,让正文占据所有宽度,并设置目录块为 display: none,即隐藏该元素。具体实现最终代码 common.sass 和 layout.sass 所示。

1.5K30

CSS特效,给你的惊喜

现在这种设计在移动端很常见,因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的。...实际上,我们可以借助CSS :placeholder-shown伪类,纯CSS,无任何JS,实现这样的占位符交互效果。...输入内容功能布局效果也是正常的: ? 纯CSS实现,要比JS实现好一千倍,代码少,性能高,样式调整方便,上手简单容易,可谓是前端必备技能了。...实现原理 拿第一个fill模式的输入框举例,HTML结构如下: ? 首先,让浏览器默认的placeholder效果不可见,我们可以让颜色透明即可,如下CSS: ?...其他 demo页面还使用了其他一些CSS3属性,例如,外部容器宽度是跟着输入宽度走的,使用的是width:fit-content这个声明。

2K30

使用min-content实现容器宽度自适应于内部元素

前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布)。...随着CSS的广泛应用,设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中,这有悖于HTML原生响应的特性。 过去几年出现了一场革命,包括自适应设计,响应式设计,移动优先设计等。...CSS3也因此定义和实现一些新的属性。其中就包括内在和外在的宽度(intrinsic and extrinsic width values)。...但是如果 figure 的 p (段落)元素宽于图片宽度,则figure元素会收缩至最宽的子元素,而不是图片的宽度。...min-content 是内在和外在的宽高系列值的一个,其它还包括 max-content , fit-content等。

74430

那些不常见,但却非常实用的css属性(整理不易)

用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。...9、font-variant-east-asian 控制对东亚字符(日语和汉语,韩语等)使用替代符号。...max-content 它的宽度或者高度,会自动调整为,刚刚好容纳下子元素那个长度最长(按照文字不换行时计算)的元素即可。 参考的基准为子元素有多宽多高。...min-content 它的宽度或者高度,会自动调整为,刚刚好容纳下子元素那个“最小宽度值”最大的元素即可,剩余超长的要么换行,要么溢出 参考的基准为子元素“最小宽度值”有多宽多高。...fit-content 表示元素自动伸缩到内容的宽度,和 max-content 的区别为,都是刚刚好容纳下子元素那个长度最长的元素即可。

1.7K10
领券