文本属性

1.text-decoration

该属性用于设置文本的装饰线

1.none（默认值）：无任何装饰线

可以去除a元素默认的下划线

2.underline：下划线
3.overline：上划线
4.line-through：中划线（删除线）
2.letter-spacing(字符间距)与word-spacing（单词间距）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            letter-spacing: 10px;
        }
        .p2{
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <p class="p1">hello world</p>
    <p class="p2">hello world</p>
</body>
</html>
2.text-transform

该属性用于设置文本的大小以及转换

1.none（默认值）
2.capitalize：将每个单词的首字母变为大写
3.uppercase：将每个单词的每个字母转为大写
4.lowercase：将每个单词的每个字母转为小写
3.text-indent

该属性用于设置第一行内容的缩进

4.单位
1.px：像素
2.em：当用于font-size时，其相对父元素的字体大小；用于其他属性时，相对当前元素的字体大小
3.rem：相对于根元素（html）的字体大小
5.text-align

该属性可以设置元素内容在元素中的水平对齐方式

1.left：左对齐
2.right：右对齐
3.center：正中间对其
4.justify：两端对齐（消除两端的空白，平分到每行的单词间距内，使得每行两端文字会顶到边界，但是justify对最后一行没有效果，如果希望对最后一行也生效，则需要添加text-align-last:justify）

注意：块级盒子由于占一行，浏览器会认为其符合text-align的要求，即使设置width也不会有效果，如果希望有效果，可以设置display:inline-block(inline会使得width属性失效)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            text-align: center;
            background-color:green;
        }
    </style>
</head>
<body>
   <div class="box1">
       <div class="box2">文字内容</div>
   </div>
</body>
</html>

此时文字居中的原因是因为text-align可以继承，因此.box2的文字会在.box2的盒子中居中

盒子居中可以使用以下的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            text-align: center;
            background-color:green;
        }
        .box2{
            text-align: center;
            width: 200px;
            display: inline-block;
            background-color: yellow;
        }
    </style>
</head>
<body>
   <div class="box1">
       <div class="box2">文字内容</div>
   </div>
</body>
</html>

6.word-break

该属性规定自动换行的处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            word-break: break-all;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">      sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div>
</body>
</html>

当内容放不下时自动换行

posted @ 2020-02-19 09:59  kanaliya  阅读(268)  评论(0)    收藏  举报