【12】CSS知识点：57.vertical-align 属性 58.媒体查询 59.媒体查询——外链式 60.CSS学习总结

本文链接：https://blog.youkuaiyun.com/qq_20535249/article/details/95734987

博客围绕CSS展开，介绍了vertical-align属性，其用于设置元素垂直对齐方式，可定义行内元素基线相对位置，允许负长度和百分比值，在表单元格中设置内容对齐。还提及媒体查询及外链式，最后进行了CSS学习总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

57.vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式。

说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

58.媒体查询

  /*
        需求:
        PC显示小牛(大于等于980)
        pad显示小猪(小于980, 并且大于等于620)
        phone显示小马(小于620)
        */

        /*如果浏览器的宽度大于等于980, 那么就执行后面{}中的代码*/
        @media(min-width: 980px) {
            body{
                background: url("images/animal1.png");
            }
        }
        /*如果浏览器的宽度大于等于620, 并且宽度小于980*/
        /*注意点: and的两边必须添加空格*/
        @media(min-width: 620px) and (max-width: 979px) {
            body{
                background: url("images/animal2.png");
            }
        }
        @media(max-width: 619px) {
            body{
                background: url("images/animal3.png");
            }
        }

59.媒体查询——外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>144-媒体查询-外链式</title>
    <link rel="stylesheet" href="144-style-pc.css" media="(min-width:980px)">
    <link rel="stylesheet" href="144-style-pad.css" media="(min-width:620px) and (max-width:979px)">
    <link rel="stylesheet" href="144-style-phone.css" media=" (max-width:619px)">

</head>
<body>

</body>

</html>

文件“144-style-pad.css”内容如下：

body{
    background: url("images/animal2.png");
}

60.CSS学习总结

 1.js基础(掌握)
        基础语法, 以及利用基础语法编写一些简单的案例
        2.js特效(掌握)
        稍微高级一点点的js语法, 以及利用语法编写一些稍微高级一点案例
        3.js面向对象(重点掌握)

    4.canvas-->涉及面向对象
    5.jQuery-->涉及面向对象
    6.jQ原理-->涉及面向对象
    7.Ajax
    7.其它框架(MVVM/模块化/MVC)-->涉及面向对象
    8.ng项目-->涉及面向对象
    9.git/svn/自动化/包管理
    10.NodeJS
    11.React 跨平台

    1.学会写笔记-->最好发布到网络
    锻炼大家总结能力 -->  4个月时间来端 --> 非常非常非常大
    2.学会分享(帮助别人) --> 帮助自己 -->面试
    3.学会多问问题~有问题不要憋着