CSS|09 盒子属性

最新推荐文章于 2026-08-22 23:26:40 发布

原创最新推荐文章于 2026-08-22 23:26:40 发布 · 674 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

当前文章被收录于：

前端

27 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

盒子模型

什么是盒子？

盒子是用来存储物品。

我们可以将一个盒子理解为一个快递的包裹：
有内容+有填充物+纸盒子

那我们如何理去理解CSS中的盒子呢？

在CSS中一个盒子的组成部分：

内容content
内填充padding
边框border
外边距margin

一个盒子中的主要属性：
width：盒子里内容的宽度
height：盒子里内容的高度
padding：内填充，盒子里面的内容到盒子边框的距离
border：外边框，盒子的边框
margin：外边距，盒子与盒子之间的间距
在这里插入图片描述

如何计算一个盒子的总宽度？

一个盒子的总宽度 = 盒子里内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度 = 盒子里内容的高度+上下两边的填充+上下两边的边框线

注意：一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #f00;  /*外边框*/
            padding: 20px;  /*内填充*/
        }
    </style>
</head>
<body>
    <div class="box">文本文本文本文本文本文本文本文本文本文本文本文本</div>
</body>
</html>