CSS box model ：盒子模型-阿里云开发者社区

CSS box model ：盒子模型

2023-02-09 79

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS box model ：盒子模型

前言

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

在学习过程中总觉得基础巩固不好，那有可能就是理论没有得到很好的实践，亲自将代码实现出来才能更容易掌握所学，比如刷题就是一个很好的选择，边学边练，学完即练！

牛客网

https://www.nowcoder.com/exam/oj?page=1&tab=HTML/CSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan

属性

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。（默认情况下padding=0）

Content(内容) - 盒子的内容，显示文本和图像。

计算方式

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度(width)+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

例子

<head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style type="text/css">
    div{
      width: 300px;/*这是宽度*/
      padding: 25px;/*左右填充一共是50px*/
      border: 25px green solid;/*左右边框一共是50px*/
      margin: 25px;/*左右边距一共是50px*/
    }
    </style>
  </head>
  <body>
    <h>这是一个盒模型，元素的总宽度就是450px</h>
    <div>hello worder</div>
  </body>

如果觉得不是很容易看，我们可以利用截图看一下参数：

宽度350px，这就是width+2padding（左右填充）

接下来我们看一下盒模型中border的用法：

边框border，边框属于盒子的边缘边框里面属于盒子的内部，除了边框就是盒子的外部

border-width边框宽度

border-style边框类型

border-color边框颜色

使用border-width可以指定四条边的边框宽度

border-width：

<head>
    <meta charset="utf-8">
    <title>盒模型</title>
    <style type="text/css">
    #main{
          height: 200px;
          width: 200px;
          border: 2px red solid;
          background-color: #00BFFF;
          border-width: 10px 20px 30px 40px;
        }
     </style>
   </head>
  <body>
    <div  id="main">
    hello world
    </div>
  </body>