CSS进阶（一）

Justinc.2024-10-14 9:42

1、文本溢出

html 复制代码

<style>
    .d1 {
        width: 400px;
        height: 300px;
        background-color: antiquewhite;
        /* 超出部分色设置为可见，默认方式 */
        /* overflow: visible; */
        /* 超出部分使用滚动条 */
        /* overflow: scroll; */
        /* 如果内容未超出元素则正常显示，超出元素则加上滚动条 */
        /* overflow: auto; */
        /* 超过元素的全部隐藏 */
        /* overflow: hidden; */

    }

    .d2 {
        width: 600px;
        background-color: aqua;
        /* 将文本变为一行溢出部分使用省略号代替 */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

2、元素隐藏

html 复制代码

<style>
    div {
        width: 100px;
        height: 100px;
    }

    .d1 {
        background-color: aqua;
        /* 将元素隐藏并不占位 */
        /* display: none; */
        /* 将元素隐藏占位 */
        visibility: hidden;
    }

    .d2 {
        background-color: blueviolet;
    }
</style>

3、属性继承

能继承的属性都是不影响布局的，比如字体属性、文本属性、文字颜色等，其他的属性，比如宽高等会影响布局的属性是不会继承的。

html 复制代码

<style>
    .d1 {
        height: 400px;
        width: 400px;
        background-color: antiquewhite;
        font-size: 30px;

    }

    .d2 {
        height: 100px;
        width: 100px;
        background-color: aqua;
    }

    .d3 {
        height: 100px;
        width: 100px;
        background-color: blueviolet;
    }
</style>

4、默认样式

一些元素具有默认样式，比如下面的a标签。

html 复制代码

<style>
    /* 清除默认样式 */
    a {
        color: black;
        cursor:auto;
        text-decoration: none;
    }
</style>

5、绝对居中实现

由于字体设计，字体可能并不是绝对居中的，可以通过将父元素的font-size属性设置为0来实现绝对中。

html 复制代码

<style>
    div {
        height: 400px;
        width: 400px;
        background-color: aqua;
        text-align: center;
        line-height: 400px;
        font-size: 0;
        text-indent: 20px;
    }

    img {
        height: 80px;
        width: 100px;
        vertical-align: middle;
    }

    span {
        font-size: 20px;
        vertical-align: middle;
    }
</style>

ertical-align: middle;

}

复制代码

span {
    font-size: 20px;
    vertical-align: middle;
}

~~~