当前位置: 首页 > news >正文

两种盒模型

在CSS中,有两种主要的盒模型(Box Model),它们决定了元素的尺寸计算方式:

  1. 标准盒模型(W3C Box Model)
    在标准盒模型中,元素的总宽度和总高度分别由以下几个部分组成:
    • Content(内容区):这是元素的实际内容,比如文字、图片等,由 widthheight 属性设置的尺寸仅影响内容区的大小。
    • Padding(内边距):围绕内容区的空白空间,可通过 padding 属性来设置。
    • Border(边框):紧邻内边距的边框,可通过 border 属性来设置边框的宽度、样式和颜色。
    • Margin(外边距):元素外部的空白区域,与其他元素分隔开来,由 margin 属性控制。

所以,在标准盒模型中,当您声明一个元素的宽度(width)时,这个宽度仅仅指的是内容区域的宽度,整个盒子的总宽度将是:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  1. 怪异盒模型(IE盒模型 / Quirks Mode Box Model)
    在怪异盒模型(通常在老版IE浏览器中使用,但在某些quirks模式或特定情况下现代浏览器也可能采用此模型)中,元素的宽度(width)和高度(height)属性同时包含了内容区以及内边距,边框的尺寸。
    因此,在怪异盒模型中,如果设置了元素的宽度(width),那么:
总宽度(在这里称为“总布局宽度”)= border-left + padding-left + width + padding-right + border-right


注意这里的“总宽度”其实是指内容加上内边距的宽度,而不是整个盒子占据的空间(外边距依然独立计算)。

为了统一不同浏览器之间的盒模型行为,并确保元素的尺寸计算一致,可以使用CSS3中的 box-sizing 属性来指定盒模型的计算方式:

  • box-sizing: content-box; 表示使用标准盒模型(默认大多数现代浏览器的行为)。
  • box-sizing: border-box; 表示使用怪异盒模型,此时元素的总宽度(或高度)会包含内边距和边框,仅content的尺寸会影响元素内部内容的大小。
http://www.lryc.cn/news/353939.html

相关文章:

  • 【C++】类型转换
  • Redis RDB 持久化问题
  • windows 下nginx常用命令
  • xjoi题库一级1-10段题解(c语言版)
  • 1.int 与 Integer 的简单区别
  • 单片机原理及技术(二)—— AT89S51单片机(一)(C51编程)
  • 某方protobuf闲谈
  • 专为汽车内容打造的智能剪辑解决方案
  • 【C语言】二叉树的实现
  • 在ubuntu22.04里网站源码连不上mysql数据库
  • 博客说明 5/12~5/24【个人】
  • 豆瓣电影后端设计
  • 【深度学习】第1章
  • Vue3实战笔记(37)—粒子特效登录页面
  • 解锁无限可能:JavaScript与【机器学习】的浪漫邂逅
  • 【Linux】$()中的内容与不加$()时有什么区别
  • 2024最新前端面试八股文【基础篇293题】
  • 【NumPy】关于numpy.median()函数,看这一篇文章就够了
  • 起保停电路工作原理
  • 【Vue】Vue2使用ElementUI
  • 设计模式在芯片验证中的应用——模板方法
  • Webpack Bundle Analyzer:深入分析与优化你的包
  • Java后端开发学习历程
  • CentOS 7 socat命令端口转发
  • vue全局修改设置滚动条样式
  • ​✨聚梦AI绘图插件-for photoshop(基于ComfyUI) 内测版V0.1发布
  • java “错误:编码GBK 的不可映射字符”
  • 前端 JS 经典:Web 性能指标
  • SVN创建分支,分支合并,切换分支。通俗易懂
  • 【编译原理复习笔记】中间语言