CSS进阶-问题解决（一）

1、文本溢出

<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、元素隐藏

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

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

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

3、属性继承

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

<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标签。

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

5、绝对居中实现

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

<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>

6、去除元素间的空白

<style>
    div {
        font-size: 0;
    }

    span {
        background-color: aqua;
        font-size: 20px;
    }
</style>

7、浮动

7.1 浮动的实现

float 属性主要用于页面布局和元素定位。它可以让一个元素向其父容器的左侧或右侧靠拢，从而使其他元素环绕在它的周围。这对于创建多栏布局非常有用。

<style>
    .out {
        height: 400px;
        background-color: rgb(135, 137, 133);
    }
    .d1 {
        background-color: antiquewhite;
    }
    .d2 {
        background-color:rgb(0, 191, 255);
        float: left;
    }
    .d3 {
        background-color:rgb(226, 43, 198);
        float: left;
    }
</style>

7.2 浮动的影响

• 父元素高度塌陷：当一个容器内的所有子元素都设置了浮动元素，该容器的高度可能塌陷，即容器不会自动调整大小以包含所有的子元素；
• 浮动元素的重叠：如果没有正确设置宽度和外边距，浮动元素之间可能会发生重叠，导致布局混乱。

7.3 清除浮动的影响

通过给最后一个元素设置空内容并设置清除样式，清除浮动所带来的影响。

<style>
    .out {
        width: 400px;
        background-color: aqua;
    }

    .d1,
    .d2,
    .d3,
    .d4,
    .d5 {
        float: left;
        background-color: antiquewhite;
        height: 100px;
        width: 100px;
        margin: 10px;
    }

    .out::after {
        content: "";
        display: block;
        clear: both;
    }
</style>

相关代码地址：https://gitee.com/justinc666/front-end/tree/master/CSS/4、CSS进阶