当前位置：首页 > article >正文

Web开发 -前端部分-CSS-2

article 2025/1/19 8:44:07

一长度单位

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 根元素 */
        html {
            font-size: 20px;
        }

        /* 第一种长度单位px */
        #ax1 {
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: skyblue;
        }

        /* 第二种长度单位：em(相对于当前元素的font-size 的倍数) */
        /* 没有指定则会向上寻找 */
        #ax2 {
            width: 10em;
            height: 10em;
            font-size: 20px;
            background-color: orange;
        }

        /* 第三种长度单位：相当于根元素 */
        #ax3 {
            width: 10rem;
            height: 10rem;
            font-size: 20px;
            background-color: red;
        }

        /* 第四种长度单位：相对其父元素的百分比尺寸 */
        #ax4 {
            width: 200px;
            height: 200px;
            font-size: 20px;
            background-color: blue;

        }

        .inside {
            width: 50%;
            height: 25%;
            font-size: 20px;
            background-color: brown;
        }
    </style>

</head>

<body>
    <div id="ax1">hello world1</div>
    <div id="ax2">hello world2</div>
    <div id="ax3">hello world3</div>
    <div id="ax4">
        <div class="inside">hello world3</div>
    </div>
</body>

</html>

图形化展示：

二元素显示模式

1 三种显示模式

总结：

2 修改元素的显示模式

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            font-size: 20px;
            /* inline是行内元素 block是块元素 inline-block行内块元素 none是隐藏*/
            display: inline;
        }

        #ax1 {
            background-color: skyblue;
        }

        #ax2 {
            background-color: orange;
        }

        #ax3 {
            background-color: red;
        }

        #ax4 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="ax1">hello1</div>
    <div id="ax2">hello2</div>
    <div id="ax3">hello3</div>
    <div id="ax4">hello4</div>
</body>

</html>

图形化展示：

三盒子模型的组成部分

盒子模型组成：内容区域（content）,内边距区域（padding），边框区域（border）,外边距区域（margin）

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 内容区的宽 */
            width: 400px;
            /* 内容区的高 */
            height: 400px;
            /* 内边距 */
            padding: 20px;
            /* 边框 */
            border: 10px solid black;
            /* 外边距 */
            margin: 50px;

            font-size: 20px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div>内容区</div>
</body>

</html>

图形化展示：