CSS元素显示模式和盒子样式

最新推荐文章于 2025-04-10 09:30:00 发布

原创最新推荐文章于 2025-04-10 09:30:00 发布 · 256 阅读

CC 4.0 BY-SA版权

本文深入探讨了CSS中行内元素与块级元素的区别，包括它们的默认行为、如何相互转换以及行内块元素的应用。通过具体实例，如将a标签转化为块级元素并设置宽度和高度，展示了如何利用这些特性进行网页布局。

1.重点：p里不可以包含div（行级不可包含块级）
2.行级元素，如p一行放多个，而块一行只能有一个。理论上不显示宽度和高度。
块级元素：一行只有一个，有高度宽度
3.特殊：a里不能放a，但是a里可以放块元素。
4.块元素转化为行元素

 div {
        display: inline;
    }

5.块元素转化为行元素

 div {
        display: block;
}

6.转化为行内快:一行放多个，可以有高度和宽度

span {
        display: inline-block;
}

7.行高小于盒子：上空隙偏小，文字偏上
行高大于盒子高度：下空隙偏小，文字偏下。

8.实例

小米盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.转化为块级元素 */
        a {
            display: block;
            width: 118px;
            height: 40px;
            /* 当height和line-height相等时垂直居中 */
            line-height: 40px;
            background-color: #55585a;
            /* 字体大小 */
            font-size: 14px;
            color: #ffffff;
            /* 下划线 */
            text-decoration: none;
            /* 首行缩进 */
            text-indent: 2em;
        }
        /* 鼠标碰后变为某颜色 */
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本</a>
    <a href="#">出行</a>
    <a href="#">智能</a>
    <a href="#">耳机</a>
</body>
</html>

在这里插入图片描述