CSS进阶(一)

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

~~~

相关推荐
小墨宝13 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED29 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿33 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子33 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet