【前端从入门到精通：第六课：CSS常用基本属性(字体、文本、列表、背景、尺寸)】-CSDN博客

本文链接：https://blog.csdn.net/weixin_50556117/article/details/140240480

文本属性

overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条
（1）取值
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。 textarea元素的overflow默认值就是auto。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            .visible{
                width:100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: visible;
            }
            .scroll{
                width: 100px;
                height: 100px;
                border:1px solid red;
                margin-bottom: 50px;

                overflow: scroll;

            }
            .auto{
                width:100px;
                height: 100px;
                border:1px solid blue;
                margin-bottom: 50px;
                overflow: auto;

            }
            .hidden{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*隐藏会截断内容*/
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="visible">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="scroll">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="auto">
            aaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
        <div class="hidden">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
    </body>
</html>

text-overflow 让溢出的文字以省略号显示
（1）取值
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            /*text-overflow 溢出的文字处理方式*/
            .clip{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-top:50px;
                /*不能单独设置*/
                text-overflow: clip;
                /*培超超出部分隐藏*/
                overflow: hidden;
            }
            .ellipsis{
                width: 100px;
                height: 100px;
                border:1px solid blue;
                margin-top:50px;
                /*不能单独设置*/
                text-overflow: ellipsis;
                overflow: hidden;
                /*针对与中文会默认换行 必须设置内容才同一行才能显示省略号*/
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <!--溢出的文字显示省略号或者切断-->
        <div class="clip">
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>

        <div class="ellipsis">
            我是div标签中间的内容，我不知道我会不会超出元素的大小元素的大
        </div>
    </body>
</html>

white-space 设置文字是否在同一行显示
（1）取值：
normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行。
pre-line：与normal值一致，但是会保留文本输入时的换行。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性</title>
        <style>
            /*white-space 设置文本是否在同一行显示*/
            ul p{
                width: 100px;
                border:1px solid red;
            }
            .normal>p{
                white-space: normal;
            }
            .pre>p{
                white-space: pre;
            }
            .pre-wrap>p{
                white-space: pre-wrap;
            }
            .pre-line{
                white-space: pre-line;
            }
            .nowarp{
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="normal">
                <p>我是第一个P标签，我来测试normal aaaaaa</p>
            </li>
            <li class="pre">
                <p>我是第二个P标签
                    我来测试pre属性值
                </p>
            </li>
            <li class="pre-wrap">
                <p>
                    我是第三个      p标签
                    我来测试  pre-wrap
                </p>
            </li>
            <li class="pre-line">
                <p>我是第四个      p标标签
                    我来测试 pre-line
                    hello
                </p>
            </li>
            <li class="nowarp">
                <p>我是第五个P标签
                    我来测试的是nowarp
                </p>
            </li>
        </ul>
    </body>
</html>

text-align 元素内容对齐方式
（1）取值：
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .left{
                text-align: left;
            }
            .center{
                text-align: center;
            }
            .right{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="left">我是第一个li标签，我是左对齐</li>
            <li class="center">我是第一个li标签，我是居中对齐</li>
            <li class="right">我是第一个li标签，我是右对齐</li>
        </ul>
    </body>
</html>

text-decoration 指定文本是否有修饰

（1）取值：
none：指定文字无装饰（取消修饰）
underline：指定文字的装饰是下划线
overline：指定文字的装饰是上划线
line-through：指定文字的装饰是贯穿线
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-文本修饰</title>
        <style>
            /*text-decoration 指定文本是否修饰*/
            .none{
                text-decoration: none;
            }
            .underline{
                text-decoration: underline;
            }
            .overline{
                text-decoration: overline;
            }
            .line-through{
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <p>
            <a class="none" href="">文本修饰-取消修饰</a><br>
            <span class="underline">为文本修饰-上划线</span><br>
            <span class="overline">为文本修饰-下划线</span><br>
            <span class="line-through">为文本修饰-删除线</span>
        </p>
    </body>
</html>

text-indent 文本首行缩进

（1）取值：用长度值指定文本的缩进，可以为负值
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .text-indent{
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <p class="text-indent">
            这是HTML中的段落标签，特点与上行文本和下行文本间隔一行
        </p>
        <p>
            这是HTML中的段落标签，特点与上行文本和下行文本间隔一行
        </p>
    </body>
</html>

word-wrap 设置当前行超过指定容器的边界时是否换行。

（1）取值：
normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行，如果需要，单词内部允许断行。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容对齐方式</title>
        <style>
            .break-word{
                width: 100px;
                border:1px solid red;
                word-break: break-word;
            }
        </style>
    </head>
    <body>
        <div class="break-word">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </body>
</html>

vertical-align 设置对象内容的垂直对齐方式。

（1）取值：
baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：把当前盒的top和父级的内容区的top对齐
text-bottom：把当前盒的bottom和父级的内容区的bottom对齐
middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：把当前盒的top与行盒的top对齐
bottom：把当前盒的bottom与行盒的bottom对齐
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-内容垂直对齐方式</title>
        <style>
                        /*vertical-align 设置元素垂直对齐方式*/
            .test p{
                border:1px solid red;
                line-height: 2em;
                font-size:16px;
            }
            .test a{
                font-size:12px;
                margin-left:10px
            }
            .baseline a{
                vertical-align: text-top;
            }
            .sub a{
                vertical-align: sub;
            }
            .super a{
                vertical-align: super;
            }
            .top a{
                vertical-align: top;
            }
            .text-top a{
                vertical-align: text-top;
            }
            .middle a{
                vertical-align: middle;
            }
            .bottom a{
                vertical-align: bottom;
            }
            .text-bottom a{
                vertical-align: text-bottom;
            }
        </style>
    </head>
    <body>
        <ul class="test">
            <li class="baseline">
                <p>参考内容<a href="">基线对齐</a></p>
            </li>
            <li class="sub">
                <p>参考内容<a href="">下标对齐</a></p>
            </li>
            <li class="super">
                <p>参考内容<a href="">上标对齐</a></p>
            </li>
            <li class="top">
                <p>参考内容<a href="">内容与顶端对齐</a></p>
            </li>
            <li class="text-top">
                <p>参考内容<a href="">文本与对象顶端</a></p>
            </li>
            <li class="middle">
                <p>参考内容<a href="">文本与对象居中对齐</a></p>
            </li>
            <li class="bottom">
                <p>参考内容<a href="">内容与对象底部对齐</a></p>
            </li>
            <li class="text-bottom">
                <p>参考内容<a href="">文本与对象底部对齐</a></p>
            </li>
        </ul>
    </body>
</html>

line-height 设置对象的行高

（1）作用：设置一行的高度用于美化效果，第二个作用可让让内容垂直居中
（2）取值：用长度值指定行高。不允许负值。
（3）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本属性-行高</title>
        <style>
            /*line-height*/
            .line-height{
                border:1px solid red;
                /*line-height: 3em;*/
                /*给元素添加高度*/
                height: 50px;
                /*行高等于高度即可实现垂直居中*/
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="line-height">
            我是div的内容，我的作用可以设置行高也可以设置垂直居中
        </div>
    </body>
</html>

背景属性

background-color 背景颜色

（1）取值：color设置所有值均可
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景颜色</title>
        <style>
            div{
                width: 100px;
                height: 100px;
            }
            .name{
                background-color:tomato;
            }
            .jinzhi{
                background-color:#0ff;
            }
            .rgb{
                background-color: rgb(255,255,0);
            }
            .rgba{
                background-color:rgba(255,255,0,0.5)
            }
            .hsl{
                background-color: hsl(180deg,50%,50%);
            }
            .hsla{
                background-color: hsla(180,100%,50%,0.5);
            }
            .transparent{
                border:1px solid red;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div class="name"></div>
        <div class="jinzhi"></div>
        <div class="rgb"></div>
        <div class="rgba"></div>
        <div class="hsl"></div>
        <div class="hsla"></div>
        <div class="transparent"></div>
    </body>
</html>

background-image 背景图片

（1）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp')
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-repeat 背景图片是否重复

（1）取值：
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                /*background-repeat:no-repeat;*/
                /*设置背景图片沿X轴重复*/
                /*background-repeat: repeat-x;*/
                /*设置背景图片沿Y轴重复*/
                /*background-repeat: repeat-y;*/
                /*设置背景图片沿x,Y轴重复*/
                background-repeat: repeat;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-size 设置背景图片大小

（1）取值：
：用长度值指定背景图像大小。不允许负值。
：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;

                /*设置背景图的大小*/
                /*background-size:100% 100%;*/
                /*background-size:100px 100px;*/
                /*background-size:auto;*/
                /*background-size:cover;*/
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-position 背景图片位置(相对于外层容器)

（1）取值：
：用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
：用长度值指定背景图像在元素中出现的位置。可以为负值。
center：背景图像横向或纵向居中。
left：背景图像从元素左边开始出现。
right：背景图像从元素右边开始出现。
top：背景图像从元素顶部开始出现。
bottom：背景图像从元素底部开始出现。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;
                /*设置背景图片的位置*/
                /*background-position:center;*/
                /*background-position: 100px 100px;*/
                background-position: -100px -100px;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background-attachment 背景图片是否随内容滚动

（1）取值
fixed：背景图像相对于视口（viewport）固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片</title>
        <style>
            .img{
                width: 100%;
                height: 1800px;
                background-color:tomato;
                /*背景图片如果小于元素的大小 默认沿水平和垂直方向重复*/
                background-image:url('./a.webp');
                /*设置背景图片不重复*/
                background-repeat:no-repeat;
                /*设置背景图居中*/
                background-position: center;
                /*设置背景图是否随内容而滚动*/
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
        <div class="img">

        </div>
    </body>
</html>

background 背景属性简写属性(推荐使用)

（1）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景的简写属性</title>
        <style>
            .back{
                width: 1300px;
                height: 1800px;
                /*background: no-repeat center/contain tomato fixed url('./a.webp');*/
                background: no-repeat center tomato fixed url('./a.webp');
            }
        </style>
    </head>
    <body>
        <div class="back"></div>
    </body>
</html>

尺寸属性

width 设置元素的宽度

（1）取值：
auto：无特定宽度值，取决于其它属性值
：用长度值来定义宽度。不允许负值
：用百分比来定义宽度。百分比参照包含块宽度。不允许负值
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

height 设置元素的高度

（1）取值：
auto：无特定高度值，取决于其它属性值
：用长度值来定义高度。不允许负值
：用百分比来定义高度。不允许负值
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

标尺工具的下载地址：https://picpick.app/zh/download/free

min-height 设置最小高度
（1）取值：
：用长度值来定义最小高度。不允许负值
：用百分比来定义最小高度。不允许负值
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .two{
                width: 100px;
                min-height: 100px;
                background: tomato;
            }
        </style>
    </head>
    <body>
        <div class="two">
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
        </div>
    </body>
</html>

最小高度属性默认显示最小高度，当内容超过最小高度时，最小高度会随内容大小而增加

max-height 设置最大高度

（1）取值：
：用长度值来定义最小高度。不允许负值
：用百分比来定义最小高度。不允许负值
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>尺寸属性</title>
        <style>
            .three{
                width: 100px;
                max-height: 100px;
                background: cyan;
            }
        </style>
    </head>
    <body>
        <div class="three">
            我是留言的内容
            我是留言的内容
            我是留言的内容
            我是留言的内容
        </div>
    </body>
</html>

最大高度属性默认没有高度，当内容增加时告诉随内容增加，当增加到最大高度时，高度不会在增加

min-width 设置最小宽度

取值：
：用长度值来定义最小高度。不允许负值
：用百分比来定义最小高度。不允许负值
max-width 设置最大宽度

取值：
：用长度值来定义最小高度。不允许负值
：用百分比来定义最小高度。不允许负值

最小高度和最大高度适用于页面布局，最小宽度和最大宽度适用于媒体查询

列表属性

list-style-type 设定列表的符号样式

（1）取值：
disc：实心圆(CSS1)
circle：空心圆(CSS1)
square：实心方块(CSS1)
decimal：阿拉伯数字(CSS1)
lower-roman：小写罗马数字(CSS1)
upper-roman：大写罗马数字(CSS1)
lower-alpha：小写英文字母(CSS1)
upper-alpha：大写英文字母(CSS1)
none：不使用项目符号(CSS1)
armenian：传统的亚美尼亚数字(CSS2)
cjk-ideographic：浅白的表意数字(CSS2)
georgian：传统的乔治数字(CSS2)
lower-greek：基本的希腊小写字母(CSS2)
hebrew：传统的希伯莱数字(CSS2)
hiragana：日文平假名字符(CSS2)
hiragana-iroha：日文平假名序号(CSS2)
katakana：日文片假名字符(CSS2)
katakana-iroha：日文片假名序号(CSS2)
lower-latin：小写拉丁字母(CSS2)
upper-latin：大写拉丁字母(CSS2)
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-type:decimal;
            }
            ol>li{
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>

list-style-image 使用指定的图片来代替列表的序号

（1）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-image:url('./b.webp')
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
    </body>
</html>

list-style-position 设定列表需要的位置

（1）取值：
outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ul>li{
                list-style-image:url('./b.webp');
                border:1px solid red;
                list-style-position:inside ;

            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
            <li>我是无序列表</li>
        </ul>
    </body>
</html>

list-style 列表简写属性

（1）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表属性</title>
        <style>
            ol>li{
                list-style: none url('./b.webp') inside;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>