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。

相关推荐
PeterJXL11 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen30 分钟前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心30 分钟前
el-table虚拟列表封装
前端
黄瓜沾糖吃33 分钟前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟34 分钟前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui34 分钟前
打包一个工具类
前端
巴别塔的饿灵36 分钟前
Webpack[TBC]
前端
LinHan37 分钟前
我的浏览器插件 Horizon-Hop 又又又更新啦!
前端
一个小潘桃鸭37 分钟前
需求:el-upload实现上传/粘贴图片功能
前端
胡清波38 分钟前
# vue 的 Diff 算法
前端·面试