第三次作业--盒子模型

最新推荐文章于 2024-07-20 23:54:17 发布

2301_81637433

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量406

点赞数 5

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_81637433/article/details/140009137

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .box{
            /* 盒子模型由
            内容区域（可设置 内容区域的宽高）、
            内间距（padding）、
            边框（border）、
            外边距（margin）组成 */
        width: 1200px;
        height: 650px;
        padding: 50px;
        border:10px solid red;
        margin: 30px;
        /* 因为外边距的不计算在内，所以盒子的的宽为1320，高为770； */
        /*盒子尺寸的设计默认content-box是内容区域，
        若改为border-box,则此时的1200px是盒子的总宽度的意思， 而不再是1320*/
        box-sizing:border-box;
        /* 常用替换元素有
        <iframe/》、<img/>、<video/> */
    }   
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>