css盒子模型

最新推荐文章于 2024-09-29 09:36:14 发布

绿色农夫山泉

最新推荐文章于 2024-09-29 09:36:14 发布

阅读量160

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81091194/article/details/139869683

版权

css盒子模型

由外边距margin 内边距padding 边框 boder 内容content四部分构成

盒子总宽度由左外边距+左内边距+左边框+内容宽度+右边框+右内边距+右外边距构成

盒子总高度由上外边距+上内边距+上边框+内容高度+下边框+下内边距+下外边距构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子</title>
    <style>
        div{
            /* 设置盒子的背景颜色和大小 */
            background-color: green;
            width: 400px;
            height: 400px;
            /* 设置外边距和内边距 */
            margin: 40px;
            padding-left:  40px;
            padding-top: 100px;
            /* 设置边框 */
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div>
        <!-- 为盒子的内容 -->
        aaaaaa <br>
        aaaaaa <br>
        aaaaaa <br>
        aaaaaa <br>
        
</div>
</body>
</html>

我们可以通过margin和padding调节位置

margin调节盒子与边框的位置

padding调节盒中内容与盒子的位置

margin和padding都可以通过（-方向）来调整位置