绝对定位-元素宽度自动撑开
发表于|更新于|cssTricks
|总字数:198|阅读时长:1分钟|浏览量:
情景
当父级出现定宽高情况下,子级绝对定位元素需要宽度撑开时。
原场景
子元素-撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑
.box-1 {
left: 50%;
transform: translateX(-50%);
}
1. width: max-content
子元素-撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑
.box-1 {
left: 50%;
transform: translateX(-50%);
+ width: max-content;
}
2. white-space: nowrap;
子元素-撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑
.box-1 {
left: 50%;
transform: translateX(-50%);
+ white-space: nowrap;
}
文章作者: kshao
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录!
相关推荐

2020-12-25
Css 模拟赛博朋克 故障风格 按钮
clip-path 和 step 的运用 记录。 .punk-wrap { display: flex; align-items: center; justify-content: center; width: 400px; height: 300px; margin: 100px auto; background-color: #F8F005; } .punk-btn, .punk-btn::after { position: relative; width: 150px; font-size: 25px; height: 40px; line-height: 40px; font-family: 'Bebas Neue', cursive; outline: none; border: none; ...

2020-12-25
css 文字渐入效果,css 变量的进一步使用 setProperty
通过 js 修改 css 变量来更简单的实现动画效果,dom.style.setProperty 的使用 setPropertyconst a = document.querySelector('xx'); xx.style.setProperty(name, value); 顺带记一下获取的 // 该方法获取的值带 `单位` getComputedStyle(a).getPropertyValue('--x'); demo .iphoneText-wrap { margin: 100px auto; width: 400px; height: 400px; background-color: #000; overflow-y: auto; } .text { height: 300%; } .ihone-title { display: block; text-align: center; --x: 0%; position: sticky; top: 50%; transform: tra...

2024-05-15
【CSS】解决外边距重叠(重合)引起的 margin 垂直方向(top、bottom)不生效,无作用的问题
随着各种 UI 库的使用,像这种问题在业务中可能都很少接触,但是仍需了解其现象和解决方案。 一键直达 相邻兄弟元素的外边距重叠 父级与子级的外边距重叠 空块级元素的外边距重叠 什么是外边距重叠 —— Margin Collapsing 当块级元素(Block)的上下外边距与其相邻或嵌套的块级元素外边距重叠时,外边距会合并为一个外边距,而不是相加。这种行为成为外边距重叠。(浮动和绝对定位的元素不会发生外边距重叠) 外边距重叠只会发生在块级元素(Block)上,例如 div、p、section 等。 外边距重叠计算规则示例元素 <div class="css-fix-margin-item-parent"> <div class="css-fix-margin-item-child">child di...

2020-03-12
css-手风琴动效
.sfq-wrap { width: 100%; min-width: 400px; margin: 100px auto; } .sfq-wrap ul, .sfq-wrap li { padding: 0; margin: 0; list-style: none; } .sfq-wrap .list { display: flex; overflow: hidden; justify-content: flex-start; align-items: flex-start; } .sfq-wrap .list > li { display: flex; justify-content: center; align-items: center; position: relative; padding: 10px; height: 500px; width: 600px; transition: width 0.5s; font-size: 18px; font-weight: bold; c...

2023-06-13
【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器::not、:is、:where、:has,除了 :has 比较新以外,其他选择器在一些 UI 库中都有广泛的使用,浏览器基本都已经支持了,一起卷起来,使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...

2024-05-14
【CSS】CSS-Nesting:CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套
现在 CSS 也有了嵌套写法,“不再需要” less sass 等预处理器,原生 CSS 就可以实现嵌套写法,可以减少代码量,提高代码可读性,让 CSS 更加优雅~哦,没人写 css 了是吧 QAQ CSS-Nesting 从 Chrmoe 112 开始,原生 CSS 就可以支持嵌套语法了(你不会还是旧版本吧????) 语法 MDN 示例 /* Without nesting selector */ parent { /* parent styles */ child { /* child of parent styles */ } } /* With nesting selector */ parent { /* parent styl...
评论
公告
在线工具例如 获取 bdy key 等,可在线搜索哦~
目录
最新文章





