Q1选择题难度 2
1/12
CSS · 中级 04
记忆强度
在宽度为 300px 的容器中,右侧内容为什么仍可能把布局撑宽,哪项修改最直接?
.wrap { display: flex; width: 300px; }
.left { flex: 0 0 100px; }
.right { flex: 1; white-space: nowrap; }
/* .right 内含一段宽度约 400px、不可换行的文本 */
CSS中级题库第 4 组,共 12 张卡片。
CSS · 中级 04
.wrap { display: flex; width: 300px; }
.left { flex: 0 0 100px; }
.right { flex: 1; white-space: nowrap; }
/* .right 内含一段宽度约 400px、不可换行的文本 */
Flex 项目的默认 min-width 是 auto,其自动最小尺寸通常不会小于不可换行内容的最小内容宽度。
无单位的 line-height 会把数值倍率本身继承给后代,而不是先在父元素上算成固定像素再继承。
display:none 时元素不参与渲染,也不存在可供观察的旧视觉状态。
网格项跨越的轨道数量可通过网格线起止位置或 span 关键字表达。
常规情况下 display 的 none 与 block 不能像数值属性那样产生连续的淡入淡出过程。
浮动元素会影响周围行盒,却不按普通块级内容的方式撑开父元素高度。
子元素的 margin-top 与父元素外边距发生折叠,需要父元素与第一个正常流子元素之间不存在边框、内边距、行内内容等分隔条件。
.a 和 .b 都是具有非 auto z-index 的定位元素,各自创建独立层叠上下文。
通常 position:fixed 相对视口建立位置,但祖先元素只要具有非 none 的 transform,就会为其固定定位后代建立包含块。
非 none 的 transform 会创建新的层叠上下文。
flex 子项在主轴方向默认具有基于内容的自动最小尺寸,长且不可换行的文本可能使 .content 拒绝缩小,即使设置了 flex: 1 也会撑破容器。
fixed 元素通常相对视口定位,但存在会建立其包含块的祖先属性。