11、文本与盒子属性的CSS技巧解析

文本与盒子属性的CSS技巧解析

1. 文本属性

1.1 窄列布局

某些类型的内容适合使用窄列布局，例如字典，它主要是一系列简短内容的列表。在设计时，设置列间距和列之间的分隔线会很有帮助。以下代码展示了带有一定间距和浅灰色分隔线的窄列布局：

/* columns.css */ #columns { columns: 80px; column-gap: 40px; column-rule: 1px solid #ddd; }

1.2 孤行和孤字处理

当单个单词或行落在列的开头或结尾时，会显得格格不入，我们称这些为孤行和孤字。在CSS3中，避免孤行和孤字的唯一方法是在段落元素中添加break-inside:avoid，这会使段落尽量保持完整，而不是分割在不同列中。但这不是一个理想的解决方案，因为它是全有或全无的。如果一个段落哪怕只差一行放不下，整个段落都会跳到下一列，可能会留下一个比孤行更不协调的空白。

1.3 列表样式

列表分为有序列表和无序列表。有序列表通常用数字或字母标记，无序列表通常用项目符号标记。可以使用list-style相关属性来控制列表样式，包括list-style-type、list-style-position、list-style-image和简写属性list-style。 <