CSS元素选择模式

最新推荐文章于 2023-10-16 14:58:40 发布

外太空程序员

最新推荐文章于 2023-10-16 14:58:40 发布

阅读量95

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_48516121/article/details/126874932

版权

CSS元素选择模式

例题：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        div {
            width: 400px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 块级元素 -->
    <div>我是块级元素，比较霸道，自己独占一行</div> 这是另一条语句
</body>

运行结果：

例题:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        .color {
            color: red;
            /* 设置宽高无效 */
        }
    </style>
</head>

<body>
    <!-- 行内元素 -->
    <span>行内元素都是显示在一行上，一行可以显示多个</span>&nbsp;
    <span class="color">注意：行内元素不可以设置宽高，默认的宽度就是它本身内容的宽度！</span>
</body>

运行结果：

例题：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        input {
            width: 200px;
            height: 30px;
        }
    </style>
</head>

<body>
    <!-- 行内块元素 -->
    <input type="text">
    <input type="text">
</body>

运行结果：

例题：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a 转换为 块级元素 */
            display: block;
        }
        
        div {
            /* width: 300px;
            height: 100px; */
            background-color: rgb(230, 119, 230);
            /* 把块级元素div 转换为 行内元素     转换后设置的宽度和高度就会无效*/
            display: inline;
        }
        
        span {
            width: 200px;
            height: 60px;
            background-color: skyblue;
            /* 把行内元素span 转换为 行内块元素  转换后行内元素就可以设置宽高了*/
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">元素显示模式转换:行内 转换 块级</a>
    <a href="#">元素显示模式转换：行内 转换 块级</a>
    <div>我是块级元素，即将转换为行内元素</div>
    <div>我是块级元素，即将转换为行内元素</div>
    <span>行内元素转换为 行内块元素</span>
    <span>行内元素转换为 行内块元素</span>
</body>

运行结果：

例题：

<title>Document</title>
    <style>
        a {
            /* 设置垂直居中的小技巧： 让字体行高等于盒子的高度 */
            display: block;
            background-color: royalblue;
            width: 230px;
            /* 盒子的高度 */
            height: 40px;
            /* 字体的行高 */
            line-height: 40px;
        }
    </style>
</head>

<body>
    <a href="#">字体的垂直居中设置</a>
</body>

运行结果：