CSS 小抄 | 奴止

type

Post

status

Published

date

Mar 3, 2023

slug

css-cheatsheet

summary

前端开发中，遇到的CSS相关知识欠缺点随手记。

内联

line-height

⚠️

它不会影响替换元素的高度，看似影响的，其实是影响了幽灵空白节点的高度。也不会对块级元素自身有影响，只是影响了其内部内联元素，从而导致了高度变化。

高度影响

内联非替换元素，padding 和 border 无影响，仅由 line-height 决定高度


.item { line-height: 20px; }

.item-1 { padding: 10px; }
.item-2 { border: solid 10px; }

继承问题


// .father > .child
.father { font-size: 14px; }

.father-1 { line-height: 1.5; }
.father-2 { line-height: 150%; }
.father-3 { line-height: 1.5em; }
.father-4 { line-height: 21px; }

最终 .father-1 的计算属性 line-height 都是 21px，但是除了 line-height:1.5 的 father，其 .child 仍然是 line-height:1.5外，其余的 .child 都是 line-height:21px。

一个示例（幽灵节点、继承、非替换元素高度）：

vertical-align

它支持数字、百分比值，不仅仅是 middle、baseline 等。

可以通过负值来解决图文混行中，对齐问题以及 middle 对齐但是整体高度偏大的问题，如下图示(预期各行高度20px)：

百分比值是相对 line-height 的计算值来计算的。

💡

一个 inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘，否则基线是元素里最后一行内联元素的基线。

利用上面这个特性，可以实现图标+文字对齐的一种技巧：


<!-- 以 20px 大小的图标为例 -->
<p><i class="icon icon-delete"></i>文字文字</p>
<style>
.icon {
    display: inline-block; 
    width:20px;
    height:20px; 
    white-space: nowrap; 
    letter-spacing: -1em; 
    text-indent: -999em;
}
.icon:before {
    content: '\3000';
}

.icon-delete {
</style>

【示例】基于 vertical-align 属性的水平垂直居中弹框