CSS之盒模型

盒模型概念

浏览器盒模型(Box Model)是CSS中的基本概念,它描述了元素在布局过程中如何占据空间。盒模型由内容(content)、内边距(padding)、边框(border)、和外边距(margin)四个部分组成。分为标准盒模型 和 IE盒模型 。

  • 标准盒模型(W3C盒模型):在这个模型中,元素的总宽度等于左右margin + 左右border + 左右padding + width,总高度等同于上下margin + 上下border + 上下padding + height的和。

    盒宽度=内容宽度(content)+ border + padding + margin

  • IE盒模型:在这个模型中,宽度和高度不仅包括内容的尺寸,还包括内边距和边框。这意味着,元素的实际宽度等于width(内容宽度 + 左右内边距 + 左右边框),高度同理。

    盒宽度=内容宽度(content+border+padding)+ margin

盒模型设置

通过CSS的box-sizing属性,可以在标准盒模型与IE盒模型之间进行切换。
  • content-box(默认值):应用标准盒模型,元素的宽度和高度只包括内容区域。
  • border-box:应用IE盒模型,元素的宽度和高度还包括内边距和边框。

举个例子

css代码示例

复制代码
 <body>
    <div class="content-box base-box"></div>
    <div class="border-box base-box"></div>
  </body>
  <style>
    .base-box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid red;
      margin: 5px;
    }

    .content-box {
      box-sizing: content-box;
    }

    .border-box {
      box-sizing: border-box;
    }
  </style>

渲染示例


设置为content-box时,元素宽度:100 + 10 x 2 + 2 x 2 = 124;设置为100最终是124。

设置为border-box时,元素宽度:76 + 10 x 2 + 2 x 2 = 100;设置为100就是100。

相关推荐
陈不知代码9 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记11 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏18 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam1 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite