CSS -- 元素简介

一、元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

二、块状元素

块级元素特点：

1、每个块级元素独占一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块状元素</title>
    <style type="text/css">
    div, p{
        background: pink;
        /*display: inline; 将块状元素转换为内联元素*/
    }
    </style>
</head>

<body>
    <div>走走停停</div>
    <div>磕磕绊绊</div>
    <p>人生路上，精彩不断</p>
</body>

</html>

运行结果：

三、内联元素

内联元素特点：

1、和其他元素都在一行上。

2、元素的高度、宽度及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>行内元素标签</title>
    <style type="text/css">
    a,

    span,
    em {
        background: pink;
        /*设置a、span、em标签背景颜色都为粉色*/
        /*display: block; 将内联元素转换为块状元素*/
    }
    </style>
</head>

<body>
    <a href="http://www.tt.com">网址</a>
    <span>平凡之路</span>
    <span>偶阵雨</span>
    <div>最初的梦想</div>
    <em>追光者</em>
</body>

</html>

运行结果：

四、内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素特点的元素。

内联块状元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>内联块状元素</title>
    <style type="text/css">
    a {

        width: 20px;
        /*a是内联函数，所以在默认情况下宽度不起作用*/
        height: 20px;
        /*a是内联函数，所以在默认情况下高度不起作用*/
        background: pink;
        /*设置背景颜色为粉色*/
        text-align: center;
        /*设置文本居中显示*/
        display: inline-block;  /*将a转换内联块状元素*/
　　　　/*display: none; none设置此元素不会被显示*/
    }
    </style>
</head>

<body>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</body>

</html>

运行结果：

参考：https://www.w3school.com.cn

posted @ 2020-09-12 09:24 Maruying 阅读(1234) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Maruying

CSS -- 元素简介

公告