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

最新推荐文章于 2022-03-21 10:39:51 发布

pick豆子

最新推荐文章于 2022-03-21 10:39:51 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/105884744

版权

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>

在这里插入图片描述

pick豆子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS元素显示模式和盒子样式

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

扫一扫