0323作业 - CSS学习 - php中文网博客

首页 > 博客列表 > 0323作业

博主信息

博文 19

粉丝 0

访问量 13311

专题推荐

更多>

1. 理解 box-sizing功能并实例演示;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: yellow;
            padding: 10px;
            margin: 10px;
            /* 始终保持宽高400px */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2. 理解相对定位与绝对定位，并实例演示他们的区别与联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 绝对定位根据BODY来定位  脱离文档流*/
        .parent {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top:20px;
            left: 20px;
        }
        /* 相对定位根据自己的位置来定位 没有脱离文档流*/
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            top: 150px;
            left:150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 绝对定位根据BODY来定位  脱离文档流*/
        .parent {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
        }
        /* 相对定位根据自己的位置来定位 没有脱离文档流*/
        /* 在实战子盒子根据父盒子来定位，子绝父相 */
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 150px;
            left:150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

批改老师：

灭绝师太

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0628前端作业

2021-07-02 14:41:20