小白学习html&css一些笔记——8.css属性_盒子模型

最新推荐文章于 2024-10-12 09:53:06 发布

NiaYoop

最新推荐文章于 2024-10-12 09:53:06 发布

阅读量91

点赞数

分类专栏：自学分享小白编程文章标签： css html

本文链接：https://blog.csdn.net/niayooop/article/details/115069838

版权

自学分享同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

小白编程

24 篇文章 0 订阅

订阅专栏

本文通过一个HTML示例展示了CSS中盒模型的应用，特别是`border-box`属性如何影响元素大小。同时，解释了浮动元素`.div3`, `.div4`, `.div5`如何在页面上布局，并探讨了`.div1`的内边距与盒子大小的关系。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


    div{
        border: 1px solid blue;
        width: 100px;
    }

    .div1{
        width: 200px;
        height: 200px;
        padding: 50px;
        /*默认情况下内边距会影响盒子的大小*/
        /*设置盒子的属性，让width和height就是最终盒子的大小*/
        box-sizing: border-box;
    }

    .div2{
        height: 100px;
        width: 100px;
        /*外边距*/
        /*margin: 50px;*/
    }

    .div3{
        float: left;
    }

    .div4{
        float: left;
    }

    .div5{
        float: right;
    }


    </style>
</head>
<body>

    <div class="div1">
        <div class="div2"></div>
    </div>

    <div class="div3">aaaa</div>
    <div class="div4">bbbb</div>
    <div class="div5">cccc</div>

</body>
</html>