CSS导读（元素显示模式下）

news2024/11/25 11:20:51

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

3.6 元素显示模式转换

3.7 (一个小技巧)单行文字垂直居中的代码

3.8 单行文字垂直居中的原理

3.9 小案例侧边栏制作

3.10 一个小工具的使用snipaste

3.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。

转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;

（一）行内元素转换为块元素

（二）块元素转换为行内元素

（三）行内元素转换为行内块元素

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a 转换为块级元素 */
            display: block;
        }
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把div块级元素转换为行内元素 */
            display: inline;
        }
        span
        {
            width: 200px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;

        }
    </style>
</head>
<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>
</html>

3.7 (一个小技巧)单行文字垂直居中的代码

css没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案:让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之单行文字垂直居中</title>
    <style>
        div{
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>我要居中</div>
</body>
</html>

3.8 单行文字垂直居中的原理

简单理解:行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。

原理分析：

实例分析：

3.9 小案例侧边栏制作

案例的核心思路分为两步：

把链接a转换为块级元素，这样链接就可以单独占一行并且有宽度和高度。
鼠标经过a给链接设置背景颜色。
设置文字垂直居中。

第一步：把链接a转换为块级元素，这样链接就可以单独占一行并且有宽度和高度

第二步：鼠标经过a给链接设置背景颜色

第三步：设置文字垂直居中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小案例侧边栏</title>
    <style>
        a{
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            /* 文字居中 */
            line-height: 40px;
        }
        /* 鼠标经过链接背景变色 */
        a:hover{
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>
</html>