盒模型及其大小计算方式和对齐方式 - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 盒模型及其大小计算方式和对齐方式

博主信息

博文 60

粉丝 5

访问量 81492

专题推荐

更多>

1. 什么是盒模型

html中的每个元素，我们都可以看做是一个盒子，在开发工具中可以很直接的看出来，比如我先写一段代码，来看看在开发工具中怎样显示的盒模型：

<style>
    /* 给div加上宽度，高度和背景色，页面就能显示 */
    div {
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 10px;
      border: 3px solid black;
    }
  </style>
  <body>
    <!-- div中我先不写任何东西，没加样式前，在页面中什么都看不到 -->
    <div></div>
    <div></div>
  </body>

在开发工具中可以看到右边一个这样的盒子：

这样就比较好理解了，这个div在开发工具中显示出来的样子就像是一个盒子，而这个盒子呢，有以下几个非常重要的属性：

padding:内边距，即内容到边框的间距
border:边框，可以设置边框线的粗细，样式和颜色
margin:外边距，即边框与其他盒子之间的间距

每个属性还可以细分为上右下左，比如：

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距

padding和border的用法与margin是一样的，就不做举例了。在属性margin中，有一点必须要了解的是外边距折叠这种情况，举例如下：

<style>
    /* 给div加上宽度，高度和背景色，页面就能显示 */
    div:first-of-type {
      width: 300px;
      height: 300px;
      background-color: red;
      /* 把第一个盒子的下边距设置为30px */
      margin-bottom: 30px;
      border: 3px solid black;
    }
    div:last-of-type {
      width: 300px;
      height: 300px;
      background-color: red;
      /* 把第二个盒子的上边距设置为50px */
      margin-top: 50px;
      border: 3px solid black;
    }
  </style>
  <body>
    <div></div>
    <div></div>
  </body>

通过上面图例，发现两个盒子间的距离并不是50px+30px=80px，而且50px，这就是外边距合并，当遇到这种情况时，外边距会取值为较大者。

接着看看padding是一个什么样的效果，举例如下：

通过上面案例，可以知道padding内边距属性是一个什么效果了。

2. 盒模型大小计算方式

在上面的案例中，我们已经知道盒模型是一个什么样子了，是一个矩形的形状。那么它的大小如下：

盒子的可视宽度=内容区宽度（width）+左右边框（border-left + border-right）+左右内边距（padding-left + padding-right）
盒子的可视高度=内容区高度（height）+上下边框（border-top + border-bottom）+上下内边距（padding-top + padding-bottom）

但是，刚才知道一个问题，就是当我们修改padding的时候，盒子被撑开，盒子的宽度和高度会发生自动变化，在实际开发中布局会受到影响，所以常常会用到一个属性box-sizing,来解决这个问题，重新计算大小，先看看此属性的两个常用取值：

content-box:默认取值，盒子大小只覆盖到内容区，内容区的高宽始终不变，那么设置padding肯定会影响其大小，影响布局
border-box：盒子大小覆盖到边框线，这样就把padding包裹在里面了，无论你怎么变，盒子大小都不受其影响

我们着重的看下boder-box这个属性值，举例如下：

<style>
    div {
      margin: 20px;
      width: 250px;
      height: 250px;
      border: 2px solid black;
    }
    div:first-of-type {
      background-color: red;
      background-clip: content-box;
      box-sizing: border-box;
      padding: 0;
    }
    div:last-of-type {
      background-color: green;
      background-clip: content-box;
      box-sizing: content-box;
      padding: 0;
    }
  </style>
  <body>
    <div></div>
    <div></div>
  </body>

上面案例中，我把第一个盒子大小设为border-box，第二个设为content-box,然后我们在开发工具中修改padding的值，看看有什么变化：

通过上面，可以看出，当box-sizing:border-box;时，修改padding对它的大小是不受影响的，盒子会自动修改内容区的值，你想让盒子多大，它就多大，这对布局是非常重要的！这个属性会经常用到初始化代码块中，以保证实际开发中盒子的固定大小值。

3. 定位元素的对齐方式

对于块级元素，肯定不能用text-align,vertical-align这样的方式来水平垂直居中，要掌握好margin:auto的用法。

水平居中：

水平居中就是让元素的左外边距为auto，右外边距也为auto，以这样的方式把元素硬挤到中间去，举例如下：

<style>
    .container {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      background-color: red;
    }
    .container div {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 设置左右外边距为auto */
      /* 
      margin-left: auto;
      margin-right: auto; 
      */
      /* 简写方式(上下外边距默认为0) */
      margin: auto;
    }
  </style>
  <body>
    <div class="container">
      <div></div>
    </div>
  </body>

水平垂直居中：

通过绝对定位来实现，让当前元素绝对定位的上下文充满整个容器，从左上角开始，右下角结束，然后使用margin:auto，举例如下：

<style>
    .container {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      background-color: red;
      /* 父容器变为定位元素 */
      position: relative;
    }
    .container div {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 设置绝对定位 */
      position: absolute;
      /* 左上角 */
      left: 0;
      top: 0;
      /* 右下角 */
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <body>
    <div class="container">
      <div></div>
    </div>
  </body>

如果页面中只有一个盒子需要垂直水平居中，就不需要找父容器，会默认以body定位，比如会经常应用到一个简单的登陆页面，举例如下：

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: cadetblue;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    /* 知道是这么个用法就行，表单里面的细节就不再写了 */
  </style>
  <body>
      <div>
          <form action="">
              <button>登陆</button>
          </form>
      </div>
    </div>
  </body>