前端学记之CSS-文本

最新推荐文章于 2025-08-20 08:31:22 发布

原创最新推荐文章于 2025-08-20 08:31:22 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中关于文本样式、位置及盒模型的各种实用技巧，包括如何设置字体大小、颜色、行高等文本样式，如何调整文本对齐方式、缩进等位置属性，以及如何控制元素的宽度、高度、内外边距等盒模型属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、文本样式类

.txt{
    /*改变文字大小*/
    font-size: 12px;
    /*字体*/
    font-family: "Courier New";
    /*字体加粗*/
    font-weight: bold;
    /*斜体*/
    font-style: italic;
    /*行高*/
    line-height: 40px;
    /*字体颜色*/
    color: red;
}

2、文本位置类

.txt{
    /*文本内部位置*/
    text-align: center;
    /*文本绘制基线*/
    vertical-align: baseline;
    /*缩进*/
    text-indent: 2rem;
    /*内边距*/
    padding: 2rem;
    /*外边距*/
    margin: 2rem;
}

3、格式

.txt{
    /*是否自动换行*/
    white-space: nowrap;
    /*长单词自动换行*/
    word-wrap: break-word;
    /*单词控制是否切分换行*/
    word-break: normal;
    /*阴影*/
    text-shadow: 1px 1px;
    /*文字划线*/
    text-decoration: underline;

    /*文本益出以...末尾显示*/
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*鼠标形状，wait等待等等*/
    cursor: wait;
}

4、盒模型

.txt{
    /*宽*/
    width: 200px;
    /*高*/
    height: 200px;
    /*内边距*/
    padding: 20px 20px 20px 20px;
    /*外边距*/
    margin: 20px 20px 20px 20px;
    /*边框*/
    border: none;
    /*圆角半径*/
    border-radius: 5px;
    /*超出部分如何显示*/
    overflow: scroll;
    /*将当前的属性指定倒内box还是外box*/
    box-sizing: content-box;
    /*外阴影    水平 垂直 模糊半径 模糊半径 颜色*/
    box-shadow: 4px 4px 3px 3px red;
    /*内阴影*/
    box-shadow: inset 4px 4px 3px 3px red;
    /*内外结合阴影*/
    box-shadow: 4px 4px 3px 3px red, inset 4px 4px 3px 3px red;
    /*效果boder一致，但不占据实际空间*/
    outline: 1px solid red;
}